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

Types

RadTreeList provides various types of columns.

  • TreeListBoundColumn

  • TreeListButtonColumn

  • TreeListCalculatedColumn

  • TreeListCheckBoxColumn

  • TreeListDateTimeColumn

  • TreeListDragDropColumn

  • TreeListEditCommandColumn

  • TreeListHyperLinkColumn

  • TreeListImageColumn

  • TreeListNumericColumn

  • TreeListSelectColumn

  • TreeListTemplateColumn

They offer the functionality needed to display and operate on different types of data.

Note that, RadTreeList does not have a separate expand column. The expand/collapse buttons of the control are always rendered in the first column displayed.

There are different ways to create the RadTreeList columns - to auto-generate them, to declare them in mark-up or add them dynamically to the Columns collection.

If you set the AutoGenerateColumns property to true for the RadTreeList control, it will create a column for each field in the data source to which the control is bound. The columns can be accessed through the AutoGeneratedColumns collection. You can customize the auto-generated columns if you wire the AutoGeneratedColumnCreated event of the RadTreeList control:

protected void RadTreeList1_AutoGeneratedColumnCreated(object sender, TreeListAutoGeneratedColumnCreatedEventArgs e)
{
    if (e.Column.HeaderText == "EmployeeID" || e.Column.HeaderText == "ReportsTo")
    {
        e.Column.Visible = false;
    }
    switch (e.Column.HeaderText)
    {
        case "LastName": e.Column.HeaderText = "Last Name";
            break;
        case "FirstName": e.Column.HeaderText = "First Name";
            break;
        case "BirthDate": e.Column.HeaderText = "Birth Date";
            break;
    }
}       
Protected Sub RadTreeList1_AutoGeneratedColumnCreated(ByVal sender As Object, ByVal e As TreeListAutoGeneratedColumnCreatedEventArgs) Handles RadTreeList1.AutoGeneratedColumnCreated
    If e.Column.HeaderText = "EmployeeID" OrElse e.Column.HeaderText = "ReportsTo" Then
        e.Column.Visible = False
    End If
    Select Case e.Column.HeaderText
        Case "LastName"
            e.Column.HeaderText = "Last Name"
            Exit Select
        Case "FirstName"
            e.Column.HeaderText = "First Name"
            Exit Select
        Case "BirthDate"
            e.Column.HeaderText = "Birth Date"
            Exit Select
    End Select
End Sub

If you decide to explicitly create the columns in the PropertyBuilder or at runtime, they should be added in the Columns tag. These columns will appear in the order they are declared and before any auto-generated columns.

Common properties

Each data-type column exposes the following properties:

  • ConvertEmptyStringToNull - decides whether empty string values of the column will be converted to null.

  • DataField - specifies the field in the data source used to populate the column.

  • DataType - the type of data which will be passed to the column.

  • DefaultInsertValue - specifies a default value which will be inserted in case none is provided.

  • Display - gets or sets a boolean value indicating whether the column will be displayed on the client.

  • EditFormColumnIndex - when EditMode is set to EditForms and EditFormSettings-ColumnsCount is set to a number larger than 1 this property specifies in which column of the edit form the edit field for this column will reside.

  • EditFormHeaderTextFormat - enables you to customize the text that labels the column editor.

  • HeaderStyle - used to apply styles to the column header.

  • HeaderText - specifies the text which will appear in the column header.

  • HeaderToolTip - specifies the tooltip of the header cell.

  • MaxWidth - specifies the maximum width allowed for the column.

  • MinWidth - specifies the minimum width allowed for the column.

  • OrderIndex - gets or sets the order index of the column in RadTreeList.

  • Resizable - gets or sets a boolean value indicating whether the column can be resized.

  • Reorderable - gets or sets a boolean value indicating whether the column can be reordered.

  • UniqueName - a property of type string which lets you easily and reliably identify and locate a column in the RadTreeList.

  • Visible - a boolean value defining whether the column will be rendered in the page or not.

TreeListBoundColumn

TreeListBoundColumn displays the values of a field in the data source. Binding the column to a field is achieved by setting its DataField property to the data field name. This column is editable and by default uses a TreeListTextBoxColumnEditor. The additional properties available for this column are:

  • DataFormatString - a formatting string that specifies the display format for the value of the field shown by the column.

  • EmptyDataText - specifies the text that will be displayed in the column cell when it has empty/null value retrieved from the data source.

  • HtmlEncode - specifies whether the text in the corresponding cell will be encoded automatically or not when displayed in the browser. More on the nature of html encoding you can find at that address.

<telerik:TreeListBoundColumn DataField="BirthDate" UniqueName="BirthDate" DataType="System.DateTime"
    DataFormatString="{0:dd/MM/yy}" HeaderText="Birth Date">
</telerik:TreeListBoundColumn>

TreeListButtonColumn

TreeListButtonColumn displays a button giving you a choice to choose its type between PushButton, LinkButton and ImageButton.You can specify a CommandName to the buttons displayed, so when clicked they will fire a specific item command in the treelist control. For further information on commands, you can see Command Reference.

The column specific properties of the button column are:

  • ButtonCssClass - specifies a custom CSS class that the buttons in the column should pick up.

  • ButtonType - enables you to choose between three button types to display -ImageButton, LinkButton and PushButton.

  • CommandName - lets you assign a CommandName to the buttons which will be passed to the event arguments in the ItemCommand event.

  • CommandArgument - an argument that will be accessible in the event arguments of the ItemCommand event of the control.

  • ImageUrl - used to provide an URL to the image that will be displayed if the button type is ImageButton.

<telerik:TreeListButtonColumn ButtonType="PushButton" CommandName="Select" UniqueName="SelectColumn"
    Text="Select" HeaderText="Select">
</telerik:TreeListButtonColumn>

TreeListCalculatedColumn

TreeListCalculatedColumn displays a value that is calculated based on one or more fields and an expression that indicates how to calculate the display value.

The properties used in this column type are:

  • DataFields - used to list all the fields that are used to calculate the column value.

  • Expression - specifies how the field values are to be combined, using parameters based on the order of the fields listed in the DataFields property.

The following table lists the operators you can use in the expression of a calculated column:

Operator Meaning
+ Sums up the values in the specified columns' cells
- Subtracts the values in the specified columns' cells
* Multiplies the values in the specified columns' cells
/ Divides the values in the specified columns' cells

TreeListCheckBoxColumn

TreeListCheckBoxColumn is bound to a boolean field in the data source representing its values through checked or unchecked checkboxes which are read-only. When the column is editable, the check box is enabled. TreeListCheckBoxColumn provides a TreeListCheckBoxColumnEditor for editing items. If the column is bound to a non-boolean field, the RadTreeList control will throw an exception.

<telerik:TreeListCheckBoxColumn DataField="InStock" UniqueName="InStock" HeaderText="In stock">
</telerik:TreeListCheckBoxColumn>

TreeListDateTimeColumn

When in browser mode, TreeListDateTimeColumn looks and behaves like a standardTreeListBoundColumn. When in edit mode, however, it displays a RadDatePicker, RadTimePicker, or RadDateTimePicker control. This column type is for date and time values. Its DataField property must identify a field with a valid data type (DateTime).

It is editable and by default provides TreeListDateTimeColumnEditor as its column editor. You can use the PickerTypeproperty to specify the type of data selection control the editor uses. The default editor control is RadDatePicker.

The properties specific to this column are:

  • HtmlEncode - specifies whether the text in the corresponding cell will be encoded automatically or not when displayed in the browser. More on the nature of html encoding you can find at that address.

  • MaxDate - provides a max possible date that could be set as a column value in edit/insert mode.

  • MinDate - provides a min possible date that could be set as a column value in edit/insert mode.

  • PickerType - lets you choose between the different pickers that could be displayed in edit/insert mode.

<telerik:TreeListDateTimeColumn DataField="HireDate" UniqueName="HireDate" HeaderText="Hire Date"
    PickerType="DateTimePicker" MinDate="01/01/1992" MaxDate="31/12/2010" >
</telerik:TreeListDateTimeColumn>

TreeListDragDropColumn

TreeListDragDropColumn is used for utilizing items drag and drop operation in RadTreeList. It renders a drag handle which can be used to get hold of the item and drag it around. When this column is used, an item can be dragged only if the drag handle is clicked. Note that item selection still needs to be enabled in order for the handle to be active.

The properties exposed by this column are:

  • DragImageToolTip - specifies the tooltip text shown when the drag handle is hovered.

  • DragImageUrl - lets you provide a url to an image that should be displayed instead of the default drag handle.

TreeListEditCommandColumn

TreeListEditCommandColumn allows you to fire an InitInsert or Edit command. In browser mode it displays "Add record" and/or "Edit" buttons.You can control what is displayed using the ShowAddButton and ShowEditButton properties. If the EditMode of the control is InPlace, in edit mode the column will display Update and Cancel buttons. In insert modethe buttons displayed will be Insert and Cancel.

The properties exposed by this column are:

  • AddRecord/Cancel/Edit/Insert/UpdateImageUrl - specifies the address of the image that will be displayed if the ButtonType of the respective button is ImageButton.

  • AddRecord/Cancel/Edit/Insert/UpdateText - specifies the Text of the respective button.

  • ButtonType - enables you to choose between three button types to display -ImageButton, LinkButton and PushButton.

  • ShowAddButton - a property of type bool that determines whether an AddRecord button will be displayed in the column.

  • ShowEditButton - a property of type bool that determines whether an Edit button will be displayed in the column.

<telerik:TreeListEditCommandColumn UniqueName="EditColumn" ButtonType="PushButton"
        ShowAddButton="false">
</telerik:TreeListEditCommandColumn>

TreeListHyperLinkColumn

Each cell in a TreeListHyperLinkColumn contains a predefined hyperlink. You can either show one link in the whole column or bind it to fields in the datasource that would provide the text for the links.

The following properties are exposed by the TreeListHyperLinkColumn

  • Text - a property providing the text for every link in the entire column.

  • DataTextField - points to a field that supplies the text for the link.

  • DataTextFormatString - used to format the text that comes from the database.

  • NavigateUrl - specifies the target of the hyperlink, one and the same for all items

  • DataNavigateUrlFields - enables you to specify one or multiple fields if the target of the hyperlink is determined by more than one field in the database.

  • DataNavigateUrlFormatString - lets you combine the navigate URL fields by specifying a format string as the value of the property.

<telerik:TreeListHyperLinkColumn DataTextFormatString="Google '{0}'" DataNavigateUrlFields="ProductName"
        UniqueName="SearchProduct" DataNavigateUrlFormatString="http://www.google.com/search?hl=en&amp;q={0}&amp;btnG=Google+Search"
        HeaderText="HyperLink<br/>Column" DataTextField="ProductName">
</telerik:TreeListHyperLinkColumn>

TreeListImageColumn

TreeListImageColumn is used to display an image in each cell of the column. You can either use a static url to an image or bind the column to a field in the datasource that provides paths to the images that need to be displayed.

The following properties enable you to customize this column type:

  • ImageUrl - specifies an URL to an image that will be displayed in all items in this column

  • DataImageUrlFields - a property that points to a field in the data source that can be used to supply the image path.You can specify multiple fields if the image url is determined by more than one field in the database.

  • DataImageUrlFormatString - lets you format the image path.

  • DataAlternateTextField - specifies by which field in the treelist data source the column will be sorted. Note that if you specify directly sort expression through the SortExpression property of the column, it will have higher priority and will override the sort criteria of the DataAlternateTextField property.

  • DataAlternateTextFormatString - used to apply format to the alternate text.

  • ImageAlign - aligns the image in the table cell.

  • ImageHeight/Width - used to set dimensions for the image displayed.

<telerik:TreeListImageColumn UniqueName="ImageColumn" HeaderText="Product image"
    DataImageUrlFields="ProductName" DataImageUrlFormatString="Images/{0}.png" ImageAlign="Middle">
</telerik:TreeListImageColumn>

TreeListNumericColumn

TreeListNumericColumn is used for numeric values. In browser mode, this column type looks and behaves like a standard TreeListBoundColumn. In edit mode, it displays a RadNumericTextBox control. Its DataField property must point to a field with a valid numeric data type (Number or Decimal).

This column type is editable and by default provides TreeListNumericColumnEditor as its column editor.

The additional properties that the column exposes are:

  • AllowRounding - applies to the RadNumericTextBox that is displayed in edit mode.Specifies whether the value is rounded (true) or truncated (false) when the number of decimal places exceeds the value of DecimalDigits.

  • DecimalDigits - applies to the RadNumericTextBox that is displayed in edit mode.Specifies the number of digits that are displayed after the decimal separator.

  • HtmlEncode - specifies whether the text in the corresponding cell will be encoded automatically or not when displayed in the browser. More on the nature of html encoding you can find at that address.

  • KeepNotRoundedValue - applies to the RadNumericTextBox that is displayed in edit mode. Specifies whether the control will keep its not rounded value (true) and show it when it is focused.Otherwise (false) the old behavior is preserved, where the actual value of the control is the rounded value.By default this property is set to false.

  • NumericType - allows you to choose between Currency,Number and Percent. Applies an appropriate format string to the value in both browser and edit mode.

<telerik:TreeListNumericColumn  DataField="Price" UniqueName="Price" HeaderText="Price"
    NumericType="Currency" AllowRounding="true" DecimalDigits="3">
</telerik:TreeListNumericColumn>

TreeListSelectColumn

TreeListSelectColumn displays a CheckBox control in each cell of the column. Unlike the TreeListCheckBox column it does not represent data - its purpose is to allow row selection in the RadTreeList control. In case the AllowMultiItemSelection property of the control is set to true,a check box will also be rendered in the column header allowing all-item selection.

The TreeListSelectColumn can be used for either client-side or server-side item selection, depending on the currently set mode for the tree list control itself. By default, it is server-side.In order to switch it to client-side you only need to set ClientSettings.Selecting.AllowItemSelection to true.

By providing a boolean value for the ClientSettings.Selecting.UseSelectColumnOnly you can determine if the select column will be the only means of item selection in the RadTreeList.

For further information on the different modes of item selection in RadTreeList, see these articles:

Client-side selection

Server-side selection

TreeListTemplateColumn

TreeListTemplateColumn lets you define an item template and displays each cell of the column in accordance to the template. Thus you can display different controls in the column which enables you to cover a wide range of custom scenarios. You can also specify InsertItemTemplate and EditItemTemplate for this column which are used respectively in insert and edit mode of the treelist. In order to bind the controls from the templates specified, you should use a binding expression like Eval() and Bind(). Here is an example of how a TreeListTemplateColumn is declared in mark-up:

<telerik:TreeListTemplateColumn UniqueName="HomePhone" HeaderText="Template Column"
    DataField="HomePhone" EditFormHeaderTextFormat="Home Phone: ">
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Eval("HomePhone")%>' />
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###) ###-####"
            TextWithLiterals='<%# Bind("HomePhone")%>' AllowEmptyEnumerations="true" />
    </EditItemTemplate>
    <InsertItemTemplate>
        <telerik:RadMaskedTextBox RenderMode="Lightweight" ID="RadMaskedTextBox1" runat="server" Mask="(###) ###-####"
            TextWithLiterals='<%# Bind("HomePhone")%>' AllowEmptyEnumerations="true" />
    </InsertItemTemplate>
</telerik:TreeListTemplateColumn>
In this article