Edit this page

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

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 declarethem 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 thedata source to which the control is bound. The columns can be accessed through the AutoGeneratedColumns collection. You can customize the auto-generatedcolumns 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 willappear 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 willbe 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 noneis provided.

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

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

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

  • 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 reliablyidentify and locate a column in the RadTreeList.

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

TreeListBoundColumn

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

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

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

  • HtmlEncode - specifies whether the text in the corresponding cell will be encodedautomatically 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 inthe 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 shouldpick 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 passedto the event arguments in the ItemCommand event.

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

  • ImageUrl - used to provide an URL to the image that will be displayed if thebutton 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 fieldsand 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 columnvalue.

  • Expression - specifies how the field values are to be combined, using parametersbased 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 sourcerepresenting its values through checked or unchecked checkboxes which are read-only. When the column iseditable, the check box is enabled. TreeListCheckBoxColumn provides a TreeListCheckBoxColumnEditor for editing items. If the column is bound to a non-booleanfield, 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 RadDateTimePickercontrol. This column type is for date and time values. Its DataField property must identify a field with a validdata 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 encodedautomatically 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 inedit/insert mode.

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

  • PickerType - lets you choose between the different pickers that could bedisplayed 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 thedefault 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 theimage that will be displayed if the ButtonType of the respective button is ImageButton.

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

  • 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 AddRecordbutton will be displayed in the column.

  • ShowEditButton - a property of type bool that determines whether an Editbutton 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 eithershow 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 allitems

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

  • DataNavigateUrlFormatString - lets you combine the navigate URL fields byspecifying 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. Youcan either use a static url to an image or bind the column to a field in the datasource that provides paths to the imagesthat 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 inthis column

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

  • DataImageUrlFormatString - lets you format the image path.

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

  • 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 looksand behaves like a standard TreeListBoundColumn. In edit mode, it displays a RadNumericTextBox control. Its DataFieldproperty 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 thevalue 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 encodedautomatically 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 inedit 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 theactual 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 valuein 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. Unlikethe TreeListCheckBox column it does not represent data - its purpose is to allow rowselection 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-sideitem 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 youcan 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, seethese articles:

Client-side selection

Server-side selection

TreeListTemplateColumn

TreeListTemplateColumn lets you define an item template and displays eachcell of the column in accordance to the template. Thus you can display different controls in the columnwhich enables you to cover a wide range of custom scenarios. You can also specify InsertItemTemplate and EditItemTemplate for this columnwhich are used respectively in insert and edit mode of the treelist. In order to bind the controls from thetemplates specified, you should use a binding expression like Eval() and Bind(). Here is an example of howa 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>