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
 24Check out the designJim5 Dr.   1234568985   
 
 27ljlwww12elk Dr.   () -   
 33erterttert     
 34yadavAm3 Kumar     
 35ttttttttttjk golden     
 36xxxxxxxxxxxxxxxx1     
 37BobBilly     
41HHH Mr     
  116TesterJoe Admin   41 
 42sdfgsdfg     
 43wqAAqwqq     
 45aa     
 46bbGbb     
 47weqwewrqewq     
 48eqewqwweqeqw     
 49sdadasdsadasdasdasdswrqewq     
 50DarioHernan     
 51FHJKJHFJFGJ555     
 52DarioHernan     
 53123123     
 54dddd444aaaa     
 55123123     
 56MeTesta     
 57aa     
 58BasPa     
 59dddd     
 60SmithTest     
 62aa     
 63TestTest     
 648555     
 6821e1e2e     
 69134     
 70yoolsofia     
 72GY     
 73ba     
 75aaaaaaaa     
 78testtest     
 79testtest     
 80pjpk     
 8211     
 831pk1     
 84da     
 8511     
 86jj     
 87cccccaaaa     
 88222222     
 89DSFGSDFGSDFGFDFDSG     
 90BobBilly     
 91Testth     
 92hhhggg Dr.   () -   
 9311     
 94sasdasdaasdas     
 95dasdaasdasd     
 96adasddasd     
 97tttt     
 98No nbvCm n en j     
 99ádassf     
 1022323 Mr. 17/07/2024 () -   
 1032323     
 104121523     
 105121212     
 106111miguel     
 107asdasd     
 108 asdaasda     
 109aa     
 110ginanjardani     
 111bbbbbaaaaa     
 112xxxx     
 113edwardjames     
 114NameMy   365   
 118fff13231231   gg   
 119rl     
 120ff   gfhfhg   
 121hkheqjkehjqweqw     
 122SmithEd     

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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.Columns.ColumnTypes.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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" HeaderStyle-Width="80px" DataImageUrlFields="ProductName" DataImageUrlFormatString="Images/{0}.png" ItemStyle-HorizontalAlign="Center" AlternateText="Product picture">
                </telerik:TreeListImageColumn>
                <telerik:TreeListNumericColumn DataField="Price" UniqueName="Price" HeaderText="Numeric Column" NumericType="Currency" HeaderStyle-Width="60">
                    <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" OnItemDataBound="RadTreeList2_ItemDataBound">
            <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