(1/3) ListView events, ItemDataBound, ItemCreated


Below are the screenshots about a user control that is using the .NET ListView control.

Display Record

The ListView control contains many different events. In these examples, the EDIT button, REMOVE button, ADD button, and SAVE button click events are handled respectively.

Of course, there are many ways of implementations to get the job done, as far as I believed, using these ItemDataBound, ItemEditing, ItemDeleting, ItemCanceling, ItemUpdating, and ItemInserting are the easiest way.

Before implementing the code, design the UI first.

<table> <thead> <tr> <th><asp:Literal ID="LitHost" runat="server" /></th> <th><asp:Literal ID="LitPointsTo" runat="server" /></th> <th><asp:Literal ID="LitTtl" runat="server" /></th> <th><asp:Literal ID="LitActions" runat="server" /></th> </tr> </thead> <tbody> <asp:ListView ID="LstItems" runat="server"> <LayoutTemplate> <tr id="itemPlaceHolder" runat="server" /> </LayoutTemplate> <ItemTemplate> <tr> <td><asp:Literal ID="LitHost" runat="server" /></td> <td><asp:Literal ID="LitPointsTo" runat="server" /></td> <td><asp:Literal ID="LitTtl" runat="server" /></td> <td> <asp:LinkButton CommandName="Edit" ID="BtnEdit" runat="server" /> <asp:LinkButton CommandName="Delete" ID="BtnRemove" runat="server" /> </td> </tr> </ItemTemplate> <EditItemTemplate> <tr> <td><asp:TextBox ID="TxtHost" runat="server" /></td> <td><asp:TextBox ID="TxtPointsTo" runat="server" /></td> <td><asp:DropDownList ID="DdlTtl" runat="server" /></td> <td> <asp:LinkButton CommandName="Update" ID="BtnSave" runat="server" /> <asp:LinkButton CommandName="Cancel" ID="BtnCancel" runat="server" /> </td> </tr> </EditItemTemplate> <InsertItemTemplate> <tr> <td><asp:TextBox ID="TxtNewHost" runat="server" /></td> <td><asp:TextBox ID="TxtNewPointsTo" runat="server" /></td> <td><asp:DropDownList ID="DdlNewTtl" runat="server" /></td> <td><asp:LinkButton ID="BtnAdd" CommandName="Insert" runat="server" /></td> </tr> </InsertItemTemplate> </asp:ListView> </tbody> </table>

In the code-behind, we need to hook up the ItemDataBound event, and bind the data source.

LstItems.ItemDataBound += new EventHandler<ListViewItemEventArgs>(LstItems_ItemDataBound); LstItems.DataSource = DnsCollection; LstItems.DataBind();

It is more flexible to handle the ItemDataBound event in the code-behind than binding the data source in the UI.

protected void LstItems_ItemDataBound(object sender, ListViewItemEventArgs e) { var item = e.Item; if (item.ItemType == ListViewItemType.DataItem) { var currentDnsRecord = (DnsRecordItem)(item as ListViewDataItem).DataItem; // When Displaying the items if (item.DataItemIndex != LstItems.EditIndex) { var litHost = item.FindControl<Literal>("LitHost"); var litPointsTo = item.FindControl<Literal>("LitPointsTo"); var litTtl = item.FindControl<Literal>("LitTtl"); litHost.Text = currentDnsRecord.HostName; litPointsTo.Text = currentDnsRecord.PointsTo; litTtl.Text = currentDnsRecord.TimeToLive; } else { // When rendering Edit item. var txtHost = item.FindControl<TextBox>("TxtHost"); var txtPointsTo = item.FindControl<TextBox>("TxtPointsTo"); var ddlTtl = item.FindControl<DropDownList>("DdlTTL"); txtHost.Text = OldDnsRecord.HostName; txtPointsTo.Text = OldDnsRecord.PointsTo; BindDdlTimeToLive(ddlTtl, OldDnsRecord.TimeToLive); } } }

If you are not quite sure the FindControl, please check my previous post, FindControl() Extention methods.

On the other hand, when you want to do something before ItemDataBound event, you can create this ItemCreated event handler.

LstItems.ItemCreated += new EventHandler<ListViewItemEventArgs>(LstItems_ItemCreated);

ItemCreated is happened when the ListView is created, and when the data items are bound to the control.
ItemCreated is raised before the ItemDataBound event.

protected void LstItems_ItemCreated(object sender, ListViewItemEventArgs e) { var item = e.Item; if (item.ItemType == ListViewItemType.DataItem) { } else if (item.ItemType == ListViewItemType.InsertItem) { } }