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, 43 minutes, 16 seconds

FormTemplate edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 15SmithEEEJim    
   74ceeec   15
 17zzzzorroeeee44t4   
   28yyyyyyZZZZZZDr.10/19/2023(059) 212-361517
  18emmanueleric  () - 
 20LeguizamoDaniel  () - 
   31gr4trtt443tgf434  20
  21taglialatelapino    
  22plutopippozz    
 23MidoriTakanaMs.9/29/2023(081) 124-5545 
   26TakagiYamamotoMr.10/2/2023(081) 123-995823
  24dsadasddwada    
  27ljlwwwelkDr. () - 
  33erterttert    
  34yadavAmit Kumar    
  35jkjk golden    
  36xxxxxxxxxxxxxxxx1    
  37BobBilly    
  41HHHMr   
  42sdfgsdfg    
  43wqqwqq    
  45aa    
  46bbbb    
  47weqwewrqewq    
  48eqewqwweqeqw    
  49sdadasdsadasdasdasdswrqewq    
  50DarioHernan    
  51FHJKJHFJFGJ555    
  52DarioHernan    
  53123123    
  54dddd444aaaa    
  55123123    
  56MeTest    
  57aa    
  58BasPa    
  59dddd    
  60SmithTest    
  62aa    
  63TestTest    
  648555    
  6821e1e2e    
  6911    
  70yoolsofia    
  72GY    
  73ba    
  75aaaaaaaa    
  78testtest    
  79testtest    
  80pjpk    
  8121    
  8211    
  831pk1    
  84da    
  8511    

WebUserControl edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 15SmithEEEJim    
   74ceeec   15
 17zzzzorroeeee44t4   
   28yyyyyyZZZZZZDr.10/19/2023(059) 212-361517
  18emmanueleric  () - 
 20LeguizamoDaniel  () - 
   31gr4trtt443tgf434  20
  21taglialatelapino    
  22plutopippozz    
 23MidoriTakanaMs.9/29/2023(081) 124-5545 
   26TakagiYamamotoMr.10/2/2023(081) 123-995823
  24dsadasddwada    
  27ljlwwwelkDr. () - 
  33erterttert    
  34yadavAmit Kumar    
  35jkjk golden    
  36xxxxxxxxxxxxxxxx1    
  37BobBilly    
  41HHHMr   
  42sdfgsdfg    
  43wqqwqq    
  45aa    
  46bbbb    
  47weqwewrqewq    
  48eqewqwweqeqw    
  49sdadasdsadasdasdasdswrqewq    
  50DarioHernan    
  51FHJKJHFJFGJ555    
  52DarioHernan    
  53123123    
  54dddd444aaaa    
  55123123    
  56MeTest    
  57aa    
  58BasPa    
  59dddd    
  60SmithTest    
  62aa    
  63TestTest    
  648555    
  6821e1e2e    
  6911    
  70yoolsofia    
  72GY    
  73ba    
  75aaaaaaaa    
  78testtest    
  79testtest    
  80pjpk    
  8121    
  8211    
  831pk1    
  84da    
  8511    
  • 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

  • DefaultVB.aspx
  • EmployeeDetailsVB.ascx
  • DefaultVB.aspx.vb
    • DefaultVB.aspx.vb
    • EmployeeDetailsVB.ascx.vb
  • Styles.css
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.Web.Examples.TreeList.DataEditing.FormTemplateUserControl.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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='<%# IIf((TypeOf(Container) is TreeListEditFormInsertItem), "Insert", "Update") %>'
                                        runat="server" CommandName='<%# IIf((TypeOf(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="EmployeeDetailsVB.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