Working with DataList EditItemTemplate in ASP.Net

Updated on 08 Aug 2012,
Published on 14 Apr 2009

DataList control of ASP.Net 2.0 includes an EditItemTemplate as we discussed in previous tutorial about DataList Control. You can also design a separate layout and appearance for data items placed inside the EditItemTemplate. DataList control auto performs the task of displaying and hiding the templates according the command passed to it. When "edit" command name is passed to the DataList control it hides the ItemTemplate and renders the EditItemTemplate at the associated ItemIndex. You can place a command button or link button control inside the ItemTemplate control with its CommandName property equal to "edit". To provide the edit functionality you can add textbox controls in EditItemTemplate of DataList control. It depends upon your requirement that which fields you want to display in editable form. DataBinder.Eval method can be used to set the Text property of textbox controls to display the old value initially in edit mode.

HTML Source Code for DataList EditItemTemplate

<asp:DataList ID="DataList1" 
    runat="server" 
    DataKeyField="ProductID">
    <HeaderTemplate>
        <table>
            <tr>
                <th style="width: 250px">
                    Product Name
                </th>
                <th style="width: 100px">
                    Unit Price
                </th>
                <th style="width: 100px">
                     
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "ProductName") %>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "UnitPrice") %>
            </td>
            <td>
                <asp:LinkButton ID="lnkEdit" 
                    runat="server" 
                    CommandName="edit">
                    Edit
                </asp:LinkButton>
            </td>
        </tr>
    </ItemTemplate>
    <EditItemTemplate>
        <tr>
            <td>
                <asp:TextBox ID="txtProductName" 
                    runat="server" 
                    Text='<%# DataBinder.Eval(Container.DataItem, "ProductName") %>'>
                </asp:TextBox>
            </td>
            <td>
                <%# DataBinder.Eval(Container.DataItem, "UnitPrice") %>
            </td>
            <td>
                <asp:LinkButton ID="lnkUpdate" 
                    runat="server" 
                    CommandName="update">
                    Update
                </asp:LinkButton>
                <asp:LinkButton ID="lnkCancel" 
                    runat="server" 
                    CommandName="cancel">
                    Cancel
                </asp:LinkButton>
            </td>
        </tr>
    </EditItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:DataList>

In the above HTML code template, DataList control is used without customizing the RepeatColumns, RepeatDirection and RepeatLayout Properties. Also there is no Style Template to customize the appearance of DataList templates. All this is done to render the DataList items in clear format without any table or span tags. To display the items in proper format HTML table is used. You can see that beginning tag for table is placed inside the HeaderTemplate that is closed in FooterTemplate at the end.

Above code will display the data items ProductName and UnitPrice initially in read only view along with Edit Link button.

Further we will learn ASP.Net DataList Edit Command using C# by using link button controls.

Welite - Responsive Personal WordPress Blog Theme
1 Responses to "Working with DataList EditItemTemplate in ASP.Net"
hi,.. can help me?? i ve an project like that, my project shopping cart,.. i trouble in get value in text for save data,.. please contACT me in my email,... gnkmahendra65@gmail.com
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email