TreeList - Form Template/User Control Edit Form

Next database reset in 0 hours, 43 minutes, 19 seconds

FormTemplate edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 2FullerAndrewDr.8/14/1992(206) 555-9482 
   1DavolioNancyMs.5/1/1992(206) 555-98572
   3LeverlingJanetMs.4/1/1992(206) 555-34122
   4PeacockMargaretMrs.5/3/1993(206) 555-81222
  5BuchananStevenMr.10/17/1993(71) 555-48482
   8CallahanLauraMs.3/5/1994(206) 555-11892

WebUserControl edit form:

 IDLast NameFirst NameTitleHire DateHome PhoneReportsTo
 2FullerAndrewDr.8/14/1992(206) 555-9482 
   1DavolioNancyMs.5/1/1992(206) 555-98572
   3LeverlingJanetMs.4/1/1992(206) 555-34122
   4PeacockMargaretMrs.5/3/1993(206) 555-81222
  5BuchananStevenMr.10/17/1993(71) 555-48482
   8CallahanLauraMs.3/5/1994(206) 555-11892

Demo Configurator

Change Edit Mode:

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="80px" 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="80px" 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

Help Us Improve

Was this example helpful?