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

Form Template/User Control Edit Form

Next database reset in 1 hours, 45 minutes, 10 seconds

FormTemplate edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 15}JayDr.8/9/2024() - 
   1002323Dr.7/25/2024() -15
   101222  15
 17zzzssss new name5671212121244t4   
   117TesterJanMs.  17
  18ttttttttuuuaeric3jj  () - 
 20LeguizamoAA23Daniel1  () - 
   31gr4trtt443tgf434  20
   115hbgjhgjopopooMrs.9/12/2024() -20
  21taglialatelapino    
  22plutrpippozz  72222211 
  24dsadasddwada    
  27ljlwwwelkDr. () - 
  33erterttert    
  34yadavAmit Kumar    
  35jkjk golden    
  36xxxxxxxxxxxxxxxx1    
  37BobBilly    
 41HHHMr   
   116TesterJoeAdmin  41
  42sdfgsdfg    
  43wqAAqwqq    
  45aa    
  46bbGbb    
  47weqwewrqewq    
  48eqewqwweqeqw    
  49sdadasdsadasdasdasdswrqewq    
  50DarioHernan    
  51FHJKJHFJFGJ555    
  52DarioHernan    
  53123123    
  54dddd444aaaa    
  55123123    
  56MeTesta    
  57aa    
  58BasPa    
  59dddd    
  60SmithTest    
  62aa    
  63TestTest    
  648555    
  6821e1e2e    
  69134    
  70yoolsofia    
  72GY    
  73ba    
  75aaaaaaaa    
  78testtest    
  79testtest    
  80pjpk    
  8211    
  831pk1    
  84da    
  8511    
  86jj    
  87cccccaaaa    
  88222222    
  89DSFGSDFGSDFGFDFDSG    
  90BobBilly    
  91Testth    
  92hhhgggDr. () - 
  9311    
  94sasdasdaasdas    
  95dasdaasdasd    
  96adasddasd    
  97tttt    
  98No nbvCm n en j    
  99ádassf    
  1022323Mr.7/17/2024() - 
  1032323    
  104121523    
  105121212    
  106111miguel    
  107asdasd    
  108 asdaasda    
  109aa    
  110ginanjardani    
  111bbbbbaaaaa    
  112xxxx    
  113edwardjames    
  114NameMy  365 
  118fff13231231  gg 
  119rl    
  120ff    

WebUserControl edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 15}JayDr.8/9/2024() - 
   1002323Dr.7/25/2024() -15
   101222  15
 17zzzssss new name5671212121244t4   
   117TesterJanMs.  17
  18ttttttttuuuaeric3jj  () - 
 20LeguizamoAA23Daniel1  () - 
   31gr4trtt443tgf434  20
   115hbgjhgjopopooMrs.9/12/2024() -20
  21taglialatelapino    
  22plutrpippozz  72222211 
  24dsadasddwada    
  27ljlwwwelkDr. () - 
  33erterttert    
  34yadavAmit Kumar    
  35jkjk golden    
  36xxxxxxxxxxxxxxxx1    
  37BobBilly    
 41HHHMr   
   116TesterJoeAdmin  41
  42sdfgsdfg    
  43wqAAqwqq    
  45aa    
  46bbGbb    
  47weqwewrqewq    
  48eqewqwweqeqw    
  49sdadasdsadasdasdasdswrqewq    
  50DarioHernan    
  51FHJKJHFJFGJ555    
  52DarioHernan    
  53123123    
  54dddd444aaaa    
  55123123    
  56MeTesta    
  57aa    
  58BasPa    
  59dddd    
  60SmithTest    
  62aa    
  63TestTest    
  648555    
  6821e1e2e    
  69134    
  70yoolsofia    
  72GY    
  73ba    
  75aaaaaaaa    
  78testtest    
  79testtest    
  80pjpk    
  8211    
  831pk1    
  84da    
  8511    
  86jj    
  87cccccaaaa    
  88222222    
  89DSFGSDFGSDFGFDFDSG    
  90BobBilly    
  91Testth    
  92hhhgggDr. () - 
  9311    
  94sasdasdaasdas    
  95dasdaasdasd    
  96adasddasd    
  97tttt    
  98No nbvCm n en j    
  99ádassf    
  1022323Mr.7/17/2024() - 
  1032323    
  104121523    
  105121212    
  106111miguel    
  107asdasd    
  108 asdaasda    
  109aa    
  110ginanjardani    
  111bbbbbaaaaa    
  112xxxx    
  113edwardjames    
  114NameMy  365 
  118fff13231231  gg 
  119rl    
  120ff    
  • Demo Configurator
Change Edit Mode:

This demo will introduce you to the options for using custom edit forms in the RadTreeList control. You can choose between specifying a FormTemplate in the RadGrid declaration or using a WebUserControl to provide the edit controls. Both scenarios support manual as well as automatic insert/update operations.

When you want to perform manual data editing, first you should cancel out the default insert/update action. Afterwards, you just need a reference to the edit form object and you can use the FindControl(controlId) method to access the edit controls and extract their values.

Automatic data source operations are enabled by default as long as you have configured the data source control to allow inserts and updates.

Note: If you want to use automatic data source operations with EditFormType="WebUserControl" the UserControl should implement the IBindableControl interface, as demonstrated in this demo's code-behind.

Related Resources

Inserting values using FormTemplate/UserControl
Updating values using FormTemplate/UserControl

  • DefaultCS.aspx
  • EmployeeDetailsCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • EmployeeDetailsCS.ascx.cs
  • Styles.css
<%@ Page Language="C#" Inherits="Telerik.Web.Examples.TreeList.DataEditing.FormTemplateUserControl.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadioButtonList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadioButtonList1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container no-bg">
        <h2 class="qsfSubtitle">FormTemplate edit form:</h2>
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
            OnUpdateCommand="RadTreeList1_UpdateCommand" OnInsertCommand="RadTreeList1_InsertCommand"
            ParentDataKeyNames="ReportsTo" DataKeyNames="EmployeeID" AutoGenerateColumns="false"
            OnDeleteCommand="RadTreeList1_DeleteCommand">
            <Columns>
                <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="FontIconButton"
                    HeaderStyle-Width="120px" ItemStyle-HorizontalAlign="Center">
                </telerik:TreeListEditCommandColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete"
                    ButtonType="FontIconButton" HeaderStyle-Width="40px">
                </telerik:TreeListButtonColumn>
                <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="ID" ReadOnly="true"
                    UniqueName="EmployeeID" HeaderStyle-Width="60px" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName"
                    HeaderStyle-Width="75px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName"
                    HeaderStyle-Width="75px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="TitleOfCourtesy" HeaderText="Title" UniqueName="Title"
                    HeaderStyle-Width="60px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HireDate" HeaderText="Hire Date" UniqueName="HireDate"
                    DataFormatString="{0:d}">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HomePhone" HeaderText="Home Phone" UniqueName="HomePhone">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Notes" HeaderText="Notes" UniqueName="Notes"
                    Visible="false">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" HeaderStyle-Width="80px"
                    UniqueName="ReportsTo" ReadOnly="true" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
            </Columns>
            <EditFormSettings EditFormType="Template" PopUpSettings-Width="700px">
                <FormTemplate>
                    <div class="editTemplate">
                        <table>
                            <tr class="EditFormHeader">
                                <td colspan="2" style="font-size: small">
                                    <b>Employee Details:</b>
                                </td>
                            </tr>
                            <tr>
                                <td style="vertical-align: top">
                                    <table class="module">
                                        <tr>
                                            <td>First Name:
                                            </td>
                                            <td>
                                                <asp:TextBox ID="TextBox1" Text='<%# Bind("LastName") %>' runat="server">
                                                </asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
                                                    ErrorMessage="Should enter value"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Last Name:
                                            </td>
                                            <td>
                                                <asp:TextBox ID="TextBox2" Text='<%# Bind("FirstName") %>' runat="server">
                                                </asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
                                                    ErrorMessage="Should enter value"></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Title of Courtesy:
                                            </td>
                                            <td>
                                                <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" SelectedValue='<%# Bind("TitleOfCourtesy") %>'
                                                    DataSource='<%# (new string[] { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' AppendDataBoundItems="True">
                                                    <Items>
                                                        <telerik:RadComboBoxItem Selected="True" Text="Select" Value=""></telerik:RadComboBoxItem>
                                                    </Items>
                                                </telerik:RadComboBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Home Phone:
                                            </td>
                                            <td>
                                                <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" SelectionOnFocus="SelectAll"
                                                    TextWithLiterals='<%# Bind("HomePhone") %>' Mask="(###) ###-####" Width="145px">
                                                </telerik:RadMaskedTextBox>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="vertical-align: top">
                                    <table class="module">
                                        <tr>
                                            <td>Hire Date:
                                            </td>
                                            <td>
                                                <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" DbSelectedDate='<%# Bind("HireDate") %>'
                                                    runat="server">
                                                </telerik:RadDatePicker>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Notes:
                                            </td>
                                            <td>
                                                <asp:TextBox ID="TextBox3" Text='<%# Bind("Notes") %>' runat="server" TextMode="MultiLine"
                                                    Rows="5" Columns="40">
                                                </asp:TextBox>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadButton RenderMode="Lightweight" ID="btnUpdate" Text='<%# (Container is TreeListEditFormInsertItem) ? "Insert" : "Update" %>'
                                        runat="server" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        Icon-PrimaryIconCssClass="rbOk">
                                    </telerik:RadButton>
                                    &nbsp;
                            <telerik:RadButton RenderMode="Lightweight" ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
                                CommandName="Cancel" Icon-PrimaryIconCssClass="rbCancel">
                            </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </div>
                </FormTemplate>
            </EditFormSettings>
        </telerik:RadTreeList>
        <br />
        <h2 class="qsfSubtitle">WebUserControl edit form:</h2>
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList2" runat="server" ParentDataKeyNames="ReportsTo"
            DataKeyNames="EmployeeID" AutoGenerateColumns="false" DataSourceID="SqlDataSource1"
            AllowRecursiveDelete="true">
            <Columns>
                <telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="FontIconButton"
                    HeaderStyle-Width="120px" ItemStyle-HorizontalAlign="Center">
                </telerik:TreeListEditCommandColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete"
                    ButtonType="FontIconButton" HeaderStyle-Width="40px">
                </telerik:TreeListButtonColumn>
                <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="ID" ReadOnly="true"
                    UniqueName="EmployeeID" HeaderStyle-Width="60px" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName"
                    HeaderStyle-Width="75px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName"
                    HeaderStyle-Width="75px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="TitleOfCourtesy" HeaderText="Title" UniqueName="Title"
                    HeaderStyle-Width="60px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HireDate" HeaderText="Hire Date" UniqueName="HireDate"
                    DataFormatString="{0:d}">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HomePhone" HeaderText="Home Phone" UniqueName="HomePhone">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Notes" HeaderText="Notes" UniqueName="Notes"
                    Visible="false">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" HeaderStyle-Width="80px"
                    UniqueName="ReportsTo" ReadOnly="true" ForceExtractValue="Always">
                </telerik:TreeListBoundColumn>
            </Columns>
            <EditFormSettings EditFormType="WebUserControl" UserControlPath="EmployeeDetailsCS.ascx"
                PopUpSettings-Width="700px">
            </EditFormSettings>
        </telerik:RadTreeList>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [TitleOfCourtesy], [HireDate], [HomePhone], [Notes], [ReportsTo]) VALUES (@LastName, @FirstName, @TitleOfCourtesy, @HireDate, @HomePhone, @Notes, @ReportsTo)"
        SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [TitleOfCourtesy], [HireDate], [HomePhone], [Notes], [ReportsTo] FROM [Employees]"
        UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [TitleOfCourtesy] = @TitleOfCourtesy, [HireDate] = @HireDate, [HomePhone] = @HomePhone, [Notes] = @Notes, [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="LastName" Type="String"></asp:Parameter>
            <asp:Parameter Name="FirstName" Type="String"></asp:Parameter>
            <asp:Parameter Name="TitleOfCourtesy" Type="String"></asp:Parameter>
            <asp:Parameter Name="HireDate" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="HomePhone" Type="String"></asp:Parameter>
            <asp:Parameter Name="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Medium" runat="server" Title="Change Edit Mode:">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList AutoPostBack="true" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="In-forms editing mode" Value="EditForms" Selected="True" />
                                <asp:ListItem Text="Pop-up editing mode" Value="PopUp" />
                            </qsf:RadioButtonList>

                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance