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
2FullerAndrew Dr. 14/08/1992 (206) 555-9482   
 
  1DavolioNancy Ms. 01/05/1992 (206) 555-9857 2 
  3LeverlingJanet Ms. 01/04/1992 (206) 555-3412 2 
  4PeacockMargaret Mrs. 03/05/1993 (206) 555-8122 2 
 5BuchananSteven Mr. 17/10/1993 (71) 555-4848 2 
  8CallahanLaura Ms. 05/03/1994 (206) 555-1189 2 
 10dsadsa     

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