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

Custom Editors

Next database reset in 0 hours, 14 minutes, 47 seconds
EmployeeIDLast NameFirst NameTitle of courtesyNotesReportsTo
27asfsfsdfsSERGIODr.fff  
 125uhuhoitgiuhMr. 27 
37BobfpfdfdfffffffffffBilly0000f    
41HHHMrHH  
84da    
 95dasdaasdasd    
134sad happydsa    

RadTreeList provides a straightforward way to specify a non-default editor for an editable column. The RadTreeList.CreateColumnEditor event fires whenever a column editor needs to be initialized. The event argument object of type TreeListCreateColumnEditorEventArgs provides the following properties:

  • Column - the TreeListEditableColumn instance for which a column editor will be initialized.
  • DefaultEditor - the default ITreeListColumnEditor instance that the column provides.
  • CustomEditorInitializer - a delegate that does not accept parameters and returns an instance of type ITreeListColumnEditor.

You should provide a delegate function to e.CustomEditorInitializer that instantiates and returns an ITreeListColumnEditor object. A column editor instance usually accepts the target editable column in its constructor.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" Inherits="Telerik.Web.Examples.TreeList.DataEditing.CustomEditors.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0"></telerik:RadAjaxLoadingPanel>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="QsfFromDecorator" runat="server" DecorationZoneID="rfd-demo-zone" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
        <div id="rfd-demo-zone">
            <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" OnCreateColumnEditor="RadTreeList1_CreateColumnEditor" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" DataKeyNames="EmployeeID" AllowMultiItemEdit="true" ParentDataKeyNames="ReportsTo" OnUpdateCommand="RadTreeList1_InsertUpdateCommand" OnInsertCommand="RadTreeList1_InsertUpdateCommand">
                <Columns>
                    <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderStyle-Width="60px" HeaderText="EmployeeID" UniqueName="EmployeeID" ReadOnly="true">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" HeaderStyle-Width="150px" UniqueName="LastName">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" HeaderStyle-Width="150px" UniqueName="FirstName">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="TitleOfCourtesy" HeaderText="Title of courtesy" HeaderStyle-Width="100px" UniqueName="Title">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="Notes" HeaderText="Notes" UniqueName="Notes">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" HeaderStyle-Width="100px" UniqueName="ReportsTo" ReadOnly="true" ForceExtractValue="Always">
                    </telerik:TreeListBoundColumn>
                    <telerik:TreeListEditCommandColumn UniqueName="EditColumn" HeaderStyle-Width="80px" ButtonType="FontIconButton">
                    </telerik:TreeListEditCommandColumn>
                </Columns>
            </telerik:RadTreeList>
        </div>
    </telerik:RadAjaxPanel>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>" DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = @EmployeeID" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [TitleOfCourtesy], [Notes], [ReportsTo]) VALUES (@LastName, @FirstName, @TitleOfCourtesy, @Notes, @ReportsTo)" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [TitleOfCourtesy], [Notes], [ReportsTo] FROM [Employees]" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [TitleOfCourtesy] = @TitleOfCourtesy, [Notes] = @Notes, [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID">
        <DeleteParameters>
            <asp:Parameter Name="original_EmployeeID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <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="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
        <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="Notes" Type="String"></asp:Parameter>
            <asp:Parameter Name="ReportsTo" Type="String"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>" SelectCommand="SELECT DISTINCT [TitleOfCourtesy] FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance