New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Form Template/User Control Edit Form

Next database reset in 0 hours, 7 minutes, 46 seconds
FormTemplate edit form:

ID	Last Name	First Name	Title	Hire Date	Home Phone	ReportsTo
2	Fuller	Andrew	Dr.	8/14/1992	(206) 555-9482
1	Davolio	Nancy	Ms.	5/1/1992	(206) 555-9857	2
3	Leverling	Janet	Ms.	4/1/1992	(206) 555-3412	2
4	Peacock	Margaret	Mrs.	5/3/1993	(206) 555-8122	2
5	Buchanan	Steven	Mr.	10/17/1993	(71) 555-4848	2
8	Callahan	Laura	Ms.	3/5/1994	(206) 555-1189	2
10	dsa	dsa
WebUserControl edit form:

ID	Last Name	First Name	Title	Hire Date	Home Phone	ReportsTo
2	Fuller	Andrew	Dr.	8/14/1992	(206) 555-9482
1	Davolio	Nancy	Ms.	5/1/1992	(206) 555-9857	2
3	Leverling	Janet	Ms.	4/1/1992	(206) 555-3412	2
4	Peacock	Margaret	Mrs.	5/3/1993	(206) 555-8122	2
5	Buchanan	Steven	Mr.	10/17/1993	(71) 555-4848	2
8	Callahan	Laura	Ms.	3/5/1994	(206) 555-1189	2
10	dsa	dsa
Demo Configurator
Change Edit Mode:
- In-forms editing mode
- Pop-up editing mode
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
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
<%@ 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

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support