DataList Control - Selecting/Editing Templates in a DataList
(Page 3 of 4 )
Suppose we wanted to strip down the initial display and only provide a picture and description of the product. This is very practical in a shopping cart, as this would preserve landscape, and allow users to click on individual products to get more specific information. We can do that through the SelectedItemTemplate and by modifying the SelectedIndex of the DataList.
So let's modify the item template to only provide the description and a picture:
<ItemTemplate>
<asp:LinkButton runat="server" commandName="select">
<%# Container.DataItem("description") %>
</asp:LinkButton>
<br /><img src='<%# Container.DataItem("imgPath") %>' />
</ItemTemplate>
Then we will bubble the click on the LinkButton up to the container with OnItemCommand:
<asp:DataList id="dList" runat="server"
onItemCommand="getItem"
OnEditCommand="editItem"
RepeatDirection="Horizontal" RepeatColumns="3">
And this necessitates a subroutine called getItem. This subroutine will determine the index of the item clicked, and set the SelectedIndex to that one:
Sub getItem( s as object, e as DataListCommandEventArgs )
dList.SelectedIndex = e.Item.ItemIndex
doBinding()
End Sub
And now all we need to do is modify the selectedItemTemplate, to provide the additional information:
<SelectedItemStyle BackColor="#CCCCCC">
</SelectedItemStyle>
<SelectedItemTemplate>
Desc: <%# Container.DataItem("description") %>
<br />
Mfg: <%# Container.DataItem("manufacturer") %>
<br />
Color: <%# Container.DataItem("color") %>
<br />
Cost: <%# FormatCurrency( Container.DataItem("price")) %>
<br />
<img src='<%# Container.DataItem("imgPath") %>' /><br />
<asp:LinkButton runat="server" commandName="buy" text="buy" />
<% if isAdmin() then %>
<asp:LinkButton runat="server" commandName="edit" text="edit" />
<% end if %>
</SelectedItemTemplate>
Now when you click the LinkButton for one item, it will display its extended info, as well as have a gray background. Users have a link that says 'buy', which you could configure to send them off to a page to do credit card processing and shipping and whatnot.
Now suppose you're the site administrator. You should be able to edit the items. You might have opted to use the DataGrid for this. However, you like the idea of having full control of your editing abilities, and that's what the DataList provides. (For example, you can very easily toss validation controls into your editing template). I have included the fake checking routine called isAdmin(); you can use whatever device you want. All that matters is that somehow the administrator gets the extra little link that says 'edit'.
If you go back to the actual DataList configuration, you'll notice I placed in there the 'onEditCommand' method handler. It wants to hand things off to a routine called editItem, which will look like this:
Sub editItem( s as object, e as DataListCommandEventArgs )
dList.EditItemIndex = e.Item.ItemIndex
doBinding()
End Sub
And now that we've set the EditItemIndex, we actually have to do something with it by setting the EditItemTemplate. We'll place every attribute in a text box for editing, and provide the buttons to update, delete, and cancel.
<EditItemTemplate>
Desc:
<asp:TextBox runat="server" id="desc" text='<%# Container.DataItem("description") %>' />
<br />
Mfg: <asp:TextBox runat="server" id="mfg" text='<%# Container.DataItem("manufacturer") %>' />
<br />
Color: <asp:TextBox runat="server" id="clr" text='<%# Container.DataItem("color") %>' />
<br />
Cost: <asp:TextBox runat="server" id="cst" text='<%# Container.DataItem("price") %>' />
<br />
Img: <asp:TextBox runat="server" id="img" text='<%# Container.DataItem("imgPath") %>' /><br />
<asp:LinkButton runat="server" commandName="Update" text="upd" /> |
<asp:LinkButton runat="server" commandName="Delete" text="del" /> |
<asp:LinkButton runat="server" commandName="Cancel" text="cancel" />
</EditItemTemplate>
You can see just how easy it was to make an item editable. And of course you could very simply throw into validation controls to make sure the cost field is still numeric and so forth. But you may be a little disappointed when you click on 'upd' and nothing happens. That's because we haven't installed the method handlers. To provide the actual update, delete and cancel methods, you need to implement the onUpdateCommand, onDeleteCommand, and onCancelCommand handlers of the DataList.
I'll show you how to implement the onCancelCommand, but the other two you can refer to my article on editing in a DataGrid (http://www.aspfree.com/c/a/.NET/Return-of-the-DataGrid-Paging-and-Editing-Explained/2/), as there's no need to duplicate all the code!
The dataList will now look like this:
<asp:DataList id="dList" runat="server"
OnItemCommand="getItem"
OnEditCommand="editItem"
OnUpdateCommand="UpdateItem"
OnDeleteCommand="DeleteItem"
OnCancelCommand="doCancel"
RepeatDirection="Horizontal" RepeatColumns="3">
And the doCancel() subroutine looks like this:
Sub doCancel( s as object, e as DataListCommandEventArgs )
dList.SelectedIndex = -1
dList.EditItemIndex = -1
doBinding()
End Sub
So where are we now? I've showed you how to install a DataList, pump it full of data, and configure its output. You can select a specific item to see its extended properties, and then if you're the administrator you have editing capabilities. When you click cancel, it takes you back to the original, non-selected dataList. If you want the ability to actually update or delete data, (which you will) you can use the code from my other article: http://www.aspfree.com/c/a/.NET/Return-of-the-DataGrid-Paging-and-Editing-Explained/2/
Next: Conclusion >>
More ASP.NET Articles
More By Justin Cook
/ 16 
