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

Automatic Operations

Next database reset in 0 hours, 23 minutes, 4 seconds

SqlDataSource:

LocationIDNamePopulationAreaParentID 
No records to display.

ObjectDataSource:

EmployeeIDLast NameFirst NameTitleReportsTo 
2FullerAndrewVice President, Sales  
  1DavolioNancySales Representative2 
  3LeverlingJanetSales Representative2 
  4PeacockMargaretSales Representative2 
 5BuchananStevenSales Manager2 
  8CallahanLauraInside Sales Coordinator2 

  • Demo Configurator
  • Change Edit Mode

This example demonstrates Automatic Datasource operations with the RadTreeList control. Here the treelist controls are bound to a SqlDataSource and an ObjectDataSource correspondingly.
In order to enable the execution of the automatic CRUD operations with RadTreeList, one needs to properly define the Insert/Update/Delete parameters of the datasource controls. Other than this, the functionality is automatically handled, without the need to write any custom code or set additional properties.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" CodeFile="~/TreeList/Examples/DataEditing/NET2AutomaticDataEditing/DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.TreeList.DataEditing.NET2AutomaticDataEditing.DefaultCS"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container no-bg">
    <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" ID="RadFormDecorator1" EnableRoundedCorners="false" DecoratedControls="Textbox" DecorationZoneID="decoratedContainer" />
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadTreeList2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <h2>SqlDataSource:</h2>
    <div id="decoratedContainer">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="LocationID" ParentDataKeyNames="ParentLocationID" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" AllowRecursiveDelete="true" OnItemDeleted="RadTreeList1_ItemDeleted" OnItemInserted="RadTreeList1_ItemInserted" OnItemUpdated="RadTreeList1_ItemUpdated">
            <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
            <Columns>
                <telerik:TreeListBoundColumn DataField="LocationID" UniqueName="LocationID" HeaderText="LocationID" ForceExtractValue="Always" ReadOnly="true" ></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LocationName" UniqueName="LocationName" HeaderText="Name" ItemStyle-HorizontalAlign="Center"></telerik:TreeListBoundColumn>
                <telerik:TreeListNumericColumn DataField="Population" UniqueName="Population" HeaderText="Population" DataFormatString="{0:#,#0}" ItemStyle-HorizontalAlign="Right"></telerik:TreeListNumericColumn>
                <telerik:TreeListNumericColumn DataField="Area" UniqueName="Area" HeaderText="Area" DataFormatString="{0:#,# km<sup>2</sup>}" ItemStyle-HorizontalAlign="Right"></telerik:TreeListNumericColumn>
                <telerik:TreeListBoundColumn DataField="ParentLocationID" UniqueName="ParentLocationID" HeaderText="ParentID" ReadOnly="true" ForceExtractValue="Always"></telerik:TreeListBoundColumn>
                <telerik:TreeListEditCommandColumn UniqueName="EditCommandColumn" ButtonType="FontIconButton"></telerik:TreeListEditCommandColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete" ButtonType="FontIconButton"></telerik:TreeListButtonColumn>
            </Columns>
        </telerik:RadTreeList>
        <asp:Label ID="Label1" EnableViewState="false" runat="server"></asp:Label>
        <br />
        <h2>ObjectDataSource:</h2>
        <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList2" DataSourceID="ObjectDataSource1" AutoGenerateColumns="False" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" AllowMultiItemEdit="False" IsItemInserted="False" AllowRecursiveDelete="true">
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" ReadOnly="true" HeaderText="EmployeeID" UniqueName="EmployeeID">
                    <HeaderStyle Width="60px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" ReadOnly="true" HeaderText="ReportsTo" ForceExtractValue="Always" UniqueName="ReportsTo">
                    <HeaderStyle Width="70px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListEditCommandColumn UniqueName="EditCommandColumn">
                </telerik:TreeListEditCommandColumn>
                <telerik:TreeListButtonColumn UniqueName="DeleteCommandColumn" Text="Delete" CommandName="Delete">
                </telerik:TreeListButtonColumn>
            </Columns>
        </telerik:RadTreeList>
    </div>
    <br />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>" SelectCommand="SELECT [LocationID], [LocationName], [Population], [Area], [ParentLocationID] FROM [WorldLocations]" DeleteCommand="DELETE FROM [WorldLocations] WHERE [LocationID] = @LocationID" InsertCommand="INSERT INTO [WorldLocations] ([LocationName], [Population], [Area], [ParentLocationID]) VALUES (@LocationName, @Population, @Area, @ParentLocationID)" UpdateCommand="UPDATE [WorldLocations] SET [LocationName] = @LocationName, [Population] = @Population, [Area] = @Area, [ParentLocationID] = @ParentLocationID WHERE [LocationID] = @LocationID">
        <DeleteParameters>
            <asp:Parameter Name="LocationID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="LocationName" Type="String"></asp:Parameter>
            <asp:Parameter Name="Population" Type="Int64"></asp:Parameter>
            <asp:Parameter Name="Area" Type="Int64"></asp:Parameter>
            <asp:Parameter Name="ParentLocationID" Type="Int32"></asp:Parameter>
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="LocationName" Type="String"></asp:Parameter>
            <asp:Parameter Name="Population" Type="Int64"></asp:Parameter>
            <asp:Parameter Name="Area" Type="Int64"></asp:Parameter>
            <asp:Parameter Name="ParentLocationID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="LocationID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" InsertMethod="InsertEmployee" SelectMethod="GetEmployees" TypeName="Telerik.Web.Examples.TreeList.DataEditing.Net2AutomaticDataEditing.EmployeeCollection" UpdateMethod="UpdateEmployee" DeleteMethod="DeleteEmployee">
        <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="title" 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="title" Type="String"></asp:Parameter>
            <asp:Parameter Name="reportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:ObjectDataSource>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Change Edit Mode">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" Orientation="Vertical"
                                OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" RepeatDirection="Vertical">
                                <asp:ListItem Text="In-forms editing mode" Value="EditForms" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="In-line editing mode" Value="InPlace"></asp:ListItem>
                                <asp:ListItem Text="Pop-up editing mode" Value="PopUp"></asp:ListItem>
                            </qsf:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" runat="server" Checked="false" Enabled="false" Text="Modal PopUp edit form"
                                    AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                            </span>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox2" Text="Allow recursive delete (first treelist only)" runat="server" Checked="true" AutoPostBack="true"
                                    OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance