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, 20 minutes, 22 seconds

FormTemplate edit form:

ID	Last Name	First Name	Title	Hire Date	Home Phone	ReportsTo
24	Check out the design	Jim5	Dr.		1234568985
27	ljlwww12	elk	Dr.		() -
33	erter	ttert
34	yadav	Am3 Kumar
35	tttttttttt	jk golden
36	xxxxxxxxxxxxxxxx	1
37	Bob	Billy
41	H	HH	Mr
116	Tester	Joe	Admin			41
42	sdfg	sdfg
43	wqAA	qwqq
45	a	a
46	bbG	bb
47	weqwe	wrqewq
48	eqewqw	weqeqw
49	sdadasdsadasdasdasds	wrqewq
50	Dario	Hernan
51	FHJKJHF	JFGJ555
52	Dario	Hernan
53	123	123
54	dddd444	aaaa
55	123	123
56	Me	Testa
57	a	a
58	Bas	Pa
59	dd	dd
60	Smith	Test
62	a	a
63	Test	Test
64	85	55
68	21e	1e2e
69	1	34
70	yool	sofia
72	G	Y
73	b	a
75	aa	aaaaaa
78	test	test
79	test	test
80	pj	pk
82	1	1
83	1	pk1
84	d	a
85	1	1
86	j	j
87	ccccc	aaaa
88	222	222
89	DSFGSDFGSDFGFD	FDSG
90	Bob	Billy
91	Test	th
92	hhh	ggg	Dr.		() -
93	1	1
94	sasdasda	asdas
95	dasda	asdasd
96	adasd	dasd
97	tt	tt
98	No nbv	Cm n en j
99	ádas	sf
102	23	23	Mr.	7/17/2024	() -
103	23	23
104	121	523
105	1212	12
106	111	miguel
107	asd	asd
108	asda	asda
109	a	a
110	ginanjar	dani
111	bbbbb	aaaaa
112	xx	xx
113	edward	james
114	Name	My			365
118	fff	13231231			gg
119	r	l
120	f	f			gfhfhg
121	hkheqjkehjqw	eqw
122	Smith	Ed

WebUserControl edit form:

ID	Last Name	First Name	Title	Hire Date	Home Phone	ReportsTo
24	Check out the design	Jim5	Dr.		1234568985
27	ljlwww12	elk	Dr.		() -
33	erter	ttert
34	yadav	Am3 Kumar
35	tttttttttt	jk golden
36	xxxxxxxxxxxxxxxx	1
37	Bob	Billy
41	H	HH	Mr
116	Tester	Joe	Admin			41
42	sdfg	sdfg
43	wqAA	qwqq
45	a	a
46	bbG	bb
47	weqwe	wrqewq
48	eqewqw	weqeqw
49	sdadasdsadasdasdasds	wrqewq
50	Dario	Hernan
51	FHJKJHF	JFGJ555
52	Dario	Hernan
53	123	123
54	dddd444	aaaa
55	123	123
56	Me	Testa
57	a	a
58	Bas	Pa
59	dd	dd
60	Smith	Test
62	a	a
63	Test	Test
64	85	55
68	21e	1e2e
69	1	34
70	yool	sofia
72	G	Y
73	b	a
75	aa	aaaaaa
78	test	test
79	test	test
80	pj	pk
82	1	1
83	1	pk1
84	d	a
85	1	1
86	j	j
87	ccccc	aaaa
88	222	222
89	DSFGSDFGSDFGFD	FDSG
90	Bob	Billy
91	Test	th
92	hhh	ggg	Dr.		() -
93	1	1
94	sasdasda	asdas
95	dasda	asdasd
96	adasd	dasd
97	tt	tt
98	No nbv	Cm n en j
99	ádas	sf
102	23	23	Mr.	7/17/2024	() -
103	23	23
104	121	523
105	1212	12
106	111	miguel
107	asd	asd
108	asda	asda
109	a	a
110	ginanjar	dani
111	bbbbb	aaaaa
112	xx	xx
113	edward	james
114	Name	My			365
118	fff	13231231			gg
119	r	l
120	f	f			gfhfhg
121	hkheqjkehjqw	eqw
122	Smith	Ed

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="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

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