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

Column Types

Column types:

Bound ColumnImage ColumnNumeric ColumnDiscountCalculated ColumnCheckBox ColumnHyperLink ColumnButton ColumnButton Column
123
Page size:
AppetizersProduct picture   Bing 'Appetizers'
  Southwestern Twisted ChipsProduct picture$6.79$1.22$5.57Bing 'Southwestern Twisted Chips'
  Top Shelf Combo AppetizerProduct picture$9.49$2.56$6.93Bing 'Top Shelf Combo Appetizer'
BeveragesProduct picture   Bing 'Beverages'

Column editors:

Bound ColumnBound ColumnBound ColumnTemplate Dropdown ColumnDateTime ColumnTemplate Masked ColumnBound Column
15SmithEEEJim     
 
  74ceeec   15 
17zzzzorroeeee 44t4     
  28yyyyyyZZZZZZ Dr. 19/10/2023 (059) 212-3615 17 
 18emmanueleric   () -   
20LeguizamoDaniel   () -   
  31gr4trtt443t gf434   20 
 21taglialatelapino     
 22plutopippozz     
23MidoriTakana Ms. 29/09/2023 (081) 124-5545   
  26TakagiYamamoto Mr. 02/10/2023 (081) 123-9958 23 
 24dsadasddwada     
 27ljlwwwelk Dr.   () -   
 33erterttert     
 34yadavAmit Kumar     
 35jkjk golden     
 36xxxxxxxxxxxxxxxx1     
 37BobBilly     
 41HHH Mr     
 42sdfgsdfg     
 43wqqwqq     
 45aa     
 46bbbb     
 47weqwewrqewq     
 48eqewqwweqeqw     
 49sdadasdsadasdasdasdswrqewq     
 50DarioHernan     
 51FHJKJHFJFGJ555     
 52DarioHernan     
 53123123     
 54dddd444aaaa     
 55123123     
 56MeTest     
 57aa     
 58BasPa     
 59dddd     
 60SmithTest     
 62aa     
 63TestTest     
 648555     
 6821e1e2e     
 6911     
 70yoolsofia     
 72GY     
 73ba     
 75aaaaaaaa     
 78testtest     
 79testtest     
 80pjpk     
 8121     
 8211     
 831pk1     
 84da     

RadTreeList exposes a number of column types enabling you to display and edit your data in a user friendly way.

These are the different column types supported by the RadTreeList control which you can use in order to display your data:

  • TreeListBoundColumn - this is a column bound to a field in the data source.
  • TreeListButtonColumn - displays a button for each entry in the column
  • TreeListCalculatedColumn - displays a value that is calculated based on one or more fields and an expression that indicates how to calculate the display value.
  • TreeListCheckBoxColumn - it displays a checkbox used to represent a boolean value from the data source.
  • TreeListDateTimeColumn - a column type used for displaying and editing DateTime values.
  • TreeListEditCommandColumn - enables you to fire an Edit or InitInsert command.
  • TreeListHyperLinkColumn - used to display a hyperlink in each cell.
  • TreeListImageColumn - displays an image in each column cell.
  • TreeListNumericColumn - this column is used for displaying and editing numeric values.
  • TreeListSelectColumn - allows client-side or server-side row selection depending on the selecting settings of the RadTreeList control
  • TreeListTemplateColumn - lets you specify an item template which determines how will each cell of the column be displayed.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesVBNET.Columns.ColumnTypes.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" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container no-bg">
        <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>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <h2>Column types:</h2>
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource" AutoGenerateColumns="false" ParentDataKeyNames="ParentID" AllowMultiItemSelection="true" AllowPaging="true" PageSize="4" DataKeyNames="ID" AllowSorting="true">
            <Columns>
                <telerik:TreeListSelectColumn HeaderStyle-Width="40px">
                </telerik:TreeListSelectColumn>
                <telerik:TreeListBoundColumn DataField="ProductName" UniqueName="ProductName" HeaderText="Bound Column" HeaderStyle-Width="100px"></telerik:TreeListBoundColumn>
                <telerik:TreeListImageColumn UniqueName="ImagesColumn" HeaderText="Image Column" DataImageUrlFields="ProductName" DataImageUrlFormatString="Images/{0}.png" ItemStyle-HorizontalAlign="Center" AlternateText="Product picture" HeaderStyle-Width="80px">
                </telerik:TreeListImageColumn>
                <telerik:TreeListNumericColumn DataField="Price" UniqueName="Price" HeaderText="Numeric Column" NumericType="Currency" HeaderStyle-Width="60px">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </telerik:TreeListNumericColumn>
                <telerik:TreeListNumericColumn DataField="Discount" UniqueName="Discount" HeaderText="Discount" NumericType="Currency" HeaderStyle-Width="60px">
                    <ItemStyle HorizontalAlign="Right"></ItemStyle>
                </telerik:TreeListNumericColumn>
                <telerik:TreeListCalculatedColumn UniqueName="CalculatedColumn" HeaderText="Calculated Column" DataFields="Price, Discount" DataType="System.Double" Expression='{0}-{1}' DataFormatString="{0:C}" HeaderStyle-Width="60px">
                </telerik:TreeListCalculatedColumn>
                <telerik:TreeListCheckBoxColumn DataField="InStock" UniqueName="InStock" HeaderText="CheckBox Column">
                    <HeaderStyle Width="60px"></HeaderStyle>
                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                </telerik:TreeListCheckBoxColumn>
                <telerik:TreeListHyperLinkColumn DataTextFormatString="Bing '{0}'" DataNavigateUrlFields="ProductName" UniqueName="SearchProduct" DataNavigateUrlFormatString="http://www.bing.com/search?q={0}&amp;go=&amp;form=QBLH&amp;qs=n&amp;sk=&amp;sc=8-9" HeaderText="HyperLink Column" DataTextField="ProductName" HeaderStyle-Width="120px">
                </telerik:TreeListHyperLinkColumn>
                <telerik:TreeListButtonColumn UniqueName="SelectColumn" HeaderText="Button Column" ButtonType="ImageButton" CommandName="Select" ImageUrl="~/TreeList/Examples/Columns/ColumnTypes/Images/Select.gif" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">
                </telerik:TreeListButtonColumn>
                <telerik:TreeListButtonColumn UniqueName="DeselectColumn" HeaderText="Button Column" ButtonType="ImageButton" CommandName="Deselect" ImageUrl="~/TreeList/Examples/Columns/ColumnTypes/Images/Deselect.gif" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">
                </telerik:TreeListButtonColumn>
            </Columns>
        </telerik:RadTreeList>
        <br />
        <h2>Column editors:</h2>
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList2" runat="server" DataSourceID="SqlDataSource1" ParentDataKeyNames="ReportsTo" DataKeyNames="EmployeeID" AutoGenerateColumns="false">
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="Bound Column" ReadOnly="true">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="Bound Column" EditFormHeaderTextFormat="Last Name: ">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="Bound Column" EditFormHeaderTextFormat="First Name: ">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListTemplateColumn DataField="TitleOfCourtesy" UniqueName="TitleOfCourtesy" HeaderText="Template Dropdown Column" EditFormHeaderTextFormat="Title of Courtesy: ">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("TitleOfCourtesy")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" DataSource='<%# (new string() { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' SelectedValue='<%# Bind("TitleOfCourtesy") %>'></telerik:RadComboBox>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" DataSource='<%# (new string() { "Dr.", "Mr.", "Mrs.", "Ms." }) %>' SelectedValue='<%# Bind("TitleOfCourtesy") %>'></telerik:RadComboBox>
                    </InsertItemTemplate>
                </telerik:TreeListTemplateColumn>
                <telerik:TreeListDateTimeColumn DataField="HireDate" UniqueName="HireDate" HeaderText="DateTime Column" DataFormatString="{0:dd/MM/yyyy}" EditFormHeaderTextFormat="Hire Date: ">
                </telerik:TreeListDateTimeColumn>
                <telerik:TreeListTemplateColumn UniqueName="HomePhone" HeaderText="Template Masked Column" DataField="HomePhone" EditFormHeaderTextFormat="Home Phone">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("HomePhone")%>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###) ###-####" TextWithLiterals='<%# Bind("HomePhone")%>' AllowEmptyEnumerations="true"></telerik:RadMaskedTextBox>
                    </EditItemTemplate>
                    <InsertItemTemplate>
                        <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###) ###-####" TextWithLiterals='<%# Bind("HomePhone")%>' AllowEmptyEnumerations="true"></telerik:RadMaskedTextBox>
                    </InsertItemTemplate>
                </telerik:TreeListTemplateColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" UniqueName="ReportsTo" HeaderText="Bound Column" ForceExtractValue="Always" EditFormHeaderTextFormat="Reports to: " ReadOnly="true">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListEditCommandColumn UniqueName="EditColumn" HeaderText="EditCommand Column">
                </telerik:TreeListEditCommandColumn>
            </Columns>
        </telerik:RadTreeList>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>" InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [TitleOfCourtesy], [HireDate], [HomePhone], [ReportsTo]) VALUES (@LastName, @FirstName, @TitleOfCourtesy, @HireDate, @HomePhone, @ReportsTo)" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [TitleOfCourtesy], [HireDate], [HomePhone], [ReportsTo] FROM [Employees]" UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [TitleOfCourtesy] = @TitleOfCourtesy, [HireDate] = @HireDate, [HomePhone] = @HomePhone, [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID">
        <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="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="ReportsTo" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="EmployeeID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance