New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Edit and insert templates

The actual data editing logic is omitted for brevity.
Employees
Company: Ana Trujillo Emparedados y helados
Name: Ana Trujillo
Title: Owner
City: México D.F.
Country: Mexico
Phone: (5) 555-4729
Company: Antonio Moreno Taquería
Name: Antonio Moreno
Title: Owner
City: México D.F.
Country: Mexico
Phone: (5) 555-3932
Company: Around the Horn
Name: Thomas Hardy
Title: Sales Representative
City: London
Country: UK
Phone: (171) 555-7788
Company: Berglunds snabbköp
Name: Christina Berglund
Title: Order Administrator
City: Luleå
Country: Sweden
Phone: 0921-12 34 65
Company: Blauer See Delikatessen
Name: Hanna Moos
Title: Sales Representative
City: Mannheim
Country: Germany
Phone: 0621-08460
Company: Blondesddsl père et fils
Name: Frédérique Citeaux
Title: Marketing Manager
City: Strasbourg
Country: France
Phone: 88.60.15.31



This example demonstrates the usage of edit and insert templates in RadListView for ASP.NET AJAX. These templates allows you to define the appearance of the edited and inserted listview items as well as the controls-editors for the fields displayed in the ItemTemplate/AlternatingItemTemplate of RadListView.

Keep in mind that you need to specify ItemPlaceholderID property value for RadListView which matches the id of an ASP.NET server control (with id and runat=server properties set) which will be used as a holder of the actual listview data content. The RadListView instance on the example has asp PlaceHolder defined inside its LayoutTemplates for this purpose.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.Templates.EditInsertTemplates.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InfoMessageBox" Type="Info" Icon="Info" runat="server">
        The actual data editing logic is omitted for brevity.
    </qsf:MessageBox>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ListViewPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ListViewPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator" runat="server" DecoratedControls="Fieldset" Skin="Silk" EnableRoundedCorners="false" DecorationZoneID="demo-container" />
    <div class="demo-container" id="demo-container">
        <asp:Panel ID="ListViewPanel1" runat="server" CssClass="ListViewPanel">
            <telerik:RadListView Skin="Vista" ID="RadListView1" RenderMode="Lightweight" OnNeedDataSource="RadListView1_NeedDataSource"
                runat="server" ItemPlaceholderID="EmployeesContainer" OnItemCommand="RadListView1_ItemCommand"
                DataKeyNames="CustomerID">
                <LayoutTemplate>
                    <fieldset id="FieldSet1">
                        <legend>Employees</legend>
                        <asp:PlaceHolder ID="EmployeesContainer" runat="server"></asp:PlaceHolder>
                        <br />
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="btnInitInsert" runat="server" Text="Insert Employee" OnClick="btnInitInsert_Click">
                        </telerik:RadButton>
                    </fieldset>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset>
                        <legend>Company:
                            <%#Eval("CompanyName")%>
                        </legend>
                        <table cellpadding="0" cellspacing="0" width="95%">
                            <tr>
                                <td style="width: 75%;">
                                    <table cellpadding="6" cellspacing="0">
                                        <tr>
                                            <td style="width: 25%;">
                                                Name:
                                            </td>
                                            <td style="width: 75%">
                                                <%#Eval("ContactName")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Title:
                                            </td>
                                            <td>
                                                <%#Eval("ContactTitle")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                City:
                                            </td>
                                            <td>
                                                <%# Eval("City")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Country:
                                            </td>
                                            <td>
                                                <%# Eval("Country")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Phone:
                                            </td>
                                            <td>
                                                <%#Eval("Phone")%>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="editButton">
                                    <telerik:RadButton RenderMode="Lightweight" ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" Skin="Silk"></telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </ItemTemplate>
                <AlternatingItemTemplate>
                    <fieldset>
                        <legend>Company:
                            <%#Eval("CompanyName")%>
                        </legend>
                        <table cellpadding="0" cellspacing="0" width="95%">
                            <tr>
                                <td style="width: 75%">
                                    <table cellpadding="6" cellspacing="0">
                                        <tr>
                                            <td style="width: 25%">
                                                Name:
                                            </td>
                                            <td style="width: 75%;">
                                                <%#Eval("ContactName")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Title:
                                            </td>
                                            <td>
                                                <%#Eval("ContactTitle")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                City:
                                            </td>
                                            <td>
                                                <%# Eval("City")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Country:
                                            </td>
                                            <td>
                                                <%# Eval("Country")%>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                Phone:
                                            </td>
                                            <td>
                                                <%#Eval("Phone")%>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="editButton">
                                    <telerik:RadButton RenderMode="Lightweight" ID="btnEdit" runat="server" Text="Edit" CommandName="Edit" Skin="Silk"></telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                    <div style="clear: both">
                    </div>
                </AlternatingItemTemplate>
                 <EditItemTemplate>
                    <fieldset>
                        <legend>Company:
                            <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCompany" runat="server" Text='<%#Bind("CompanyName")%>' Skin="Silk"></telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="rvCompany" runat="server" ControlToValidate="txtBoxCompany"
                                ErrorMessage="Please enter company" Display="Dynamic"></asp:RequiredFieldValidator>
                        </legend>
                        <table cellpadding="0" cellspacing="0" width="95%">
                            <tr>
                                <td style="width: 75%">
                                    <table cellpadding="1" cellspacing="0">
                                        <tr>
                                            <td style="width: 25%">Name:
                                            </td>
                                            <td style="width: 75%">
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxName" runat="server" Text='<%#Bind("ContactName")%>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                                    ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Title:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxTitle" runat="server" Text='<%#Bind("ContactTitle")%>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                                    ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>City:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCity" runat="server" Text='<%#Bind("City")%>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                                    ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Country:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCountry" runat="server" Text='<%#Bind("Country")%>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                                    ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Phone:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxPhone" runat="server" Text='<%#Bind("Phone")%>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                                    ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="insertCancelButtons">
                                    <telerik:RadButton RenderMode="Lightweight" ID="btnUpdate" runat="server" Text="Update" CommandName="Update" Width="70px" Skin="Silk">
                                    </telerik:RadButton>
                                    <telerik:RadButton RenderMode="Lightweight" ID="BtnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" Skin="Silk"
                                        Width="70px">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset>
                        <legend>Company:
                            <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCompany" runat="server" Text='<%# Bind("CompanyName") %>' Skin="Silk"></telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="rvCompany" runat="server" ControlToValidate="txtBoxCompany"
                                ErrorMessage="Please enter company" Display="Dynamic"></asp:RequiredFieldValidator>
                        </legend>
                        <table cellpadding="0" cellspacing="0" width="95%">
                            <tr>
                                <td style="width: 75%">
                                    <table cellpadding="1" cellspacing="0">
                                        <tr>
                                            <td style="width: 25%">Name:
                                            </td>
                                            <td style="width: 75%">
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxName" runat="server" Text='<%# Bind("ContactName") %>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvName" runat="server" ControlToValidate="txtBoxName"
                                                    ErrorMessage="Please enter name" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Title:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxTitle" runat="server" Text='<%# Bind("ContactTitle") %>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvTitle" runat="server" ControlToValidate="txtBoxTitle"
                                                    ErrorMessage="Please enter title" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>City:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCity" runat="server" Text='<%# Bind("City") %>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvCity" runat="server" ControlToValidate="txtBoxCity"
                                                    ErrorMessage="Please enter city" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Country:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxCountry" runat="server" Text='<%# Bind("Country") %>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvCountry" runat="server" ControlToValidate="txtBoxCountry"
                                                    ErrorMessage="Please enter country" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Phone:
                                            </td>
                                            <td>
                                                <telerik:RadTextBox RenderMode="Lightweight" ID="txtBoxPhone" runat="server" Text='<%# Bind("Phone") %>' Skin="Silk"></telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="rvPhone" runat="server" ControlToValidate="txtBoxPhone"
                                                    ErrorMessage="Please enter phone" Display="Dynamic"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td class="insertCancelButtons">
                                    <telerik:RadButton RenderMode="Lightweight" ID="btnPerformInsert" runat="server" Text="Insert" CommandName="PerformInsert" Skin="Silk"
                                        Width="70px">
                                    </telerik:RadButton>
                                    <telerik:RadButton RenderMode="Lightweight" ID="BtnCancel" runat="server" Text="Cancel" CommandName="Cancel" CausesValidation="false" Skin="Silk"
                                        Width="70px">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </InsertItemTemplate>
            </telerik:RadListView>
            <br />
            <asp:Label runat="server" CssClass="infoText" ID="Label1" EnableViewState="false" />
        </asp:Panel>
        <div style="clear: both">
        </div>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT TOP 6 [CustomerID], [CompanyName], [ContactName], [ContactTitle], [City], [Country], [Phone] FROM [CustomerPhotos]">
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance