<kendo:treeList-column>

The configuration of the TreeList columns whcih represents an array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as thefield to which the column is bound. The TreeList will create a column for each item of the array.

Example

<kendo:treeList-columns>
    <kendo:treeList-column></kendo:treeList-column>
</kendo:treeList-columns>

Configuration Attributes

attributes java.lang.Object

The HTML attributes of the table cell (

) that is rendered for the column.

Example

<kendo:treeList-column attributes="attributes">
</kendo:treeList-column>

draggable boolean

If set to true a draghandle will be rendered and the user could reorder the rows by dragging the row via the drag handle.

Example

<kendo:treeList-column draggable="draggable">
</kendo:treeList-column>

editable java.lang.String

The JavaScript function that is executed when the cell or row is about to be opened for editing. The returned result will determine whether an editor for the column will be created.

Example

<kendo:treeList-column editable="editable">
</kendo:treeList-column>

editor java.lang.String

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:treeList-column editor="editor">
</kendo:treeList-column>

editorOptions java.lang.Object

Defines the widget configuration when one is initialized as editor for the column (or the widget defined in items.editor). For further info check the Form API: field.

Example

<kendo:treeList-column editorOptions="editorOptions">
</kendo:treeList-column>

encoded boolean

If set to true, the column value will be HTML-encoded before it is displayed. If set to false, the column value will be displayed as is. By default, the column value is HTML-encoded.

Example

<kendo:treeList-column encoded="encoded">
</kendo:treeList-column>

expandable boolean

If set to true, the column will show the icons that are used for expanding and collapsing child rows. By default, the first column of the TreeList is expandable.

Example

<kendo:treeList-column expandable="expandable">
</kendo:treeList-column>

field java.lang.String

The field to which the column is bound. The value of this field is displayed by the column during data binding.

Example

<kendo:treeList-column field="field">
</kendo:treeList-column>

filterable boolean

If set to true and if filtering is enabled, a filter menu will be displayed for this column. If set to false, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration. Further configuration is available via kendo:treeList-column-filterable.

Example

<kendo:treeList-column filterable="filterable">
</kendo:treeList-column>

footerTemplate java.lang.String

The template which renders the footer table cell for the column.The following fields can be used in the template: average - The value of the average aggregate (if specified).; count - The value of the count aggregate (if specified).; max - The value of the max aggregate (if specified).; min - The value of the min aggregate (if specified). or sum - The value of the sum aggregate (if specified)..

Example

<kendo:treeList-column footerTemplate="footerTemplate">
</kendo:treeList-column>

format java.lang.String

The format that is applied to the value before it is displayed. Takes the {0:format} form where format is a standard number format, custom number format, standard date format or a custom date format.

Example

<kendo:treeList-column format="format">
</kendo:treeList-column>

headerAttributes java.lang.Object

The HTML attributes of the table header cell (

) that is rendered for the column.

Example

<kendo:treeList-column headerAttributes="headerAttributes">
</kendo:treeList-column>

headerTemplate java.lang.String

The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.

Example

<kendo:treeList-column headerTemplate="headerTemplate">
</kendo:treeList-column>

hidden boolean

If set to true, the TreeList will not display the column. By default, all columns are displayed.

Example

<kendo:treeList-column hidden="hidden">
</kendo:treeList-column>

includeChildren boolean

If set to true, the TreeList will select all child rows upon parent row selection when checkbox selection is used.

Example

<kendo:treeList-column includeChildren="includeChildren">
</kendo:treeList-column>

lockable boolean

If set to false, the column will remain in that side of the TreeList where its own locked configuration placed it.

Example

<kendo:treeList-column lockable="lockable">
</kendo:treeList-column>

locked boolean

If set to true, the TreeList will display the column as locked (frozen).

Example

<kendo:treeList-column locked="locked">
</kendo:treeList-column>

If set to true, the TreeList will display the column in the column menu. By default, the column menu includes all data-bound columns, that is, the ones with a set field option.

Example

<kendo:treeList-column menu="menu">
</kendo:treeList-column>

minScreenWidth float

The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting and the two cannot not be used at the same time.

Example

<kendo:treeList-column minScreenWidth="minScreenWidth">
</kendo:treeList-column>

selectable boolean

If set to true the treelist will render a select column with checkboxes in each cell, thus enabling multi-row selection. The header checkbox allows users to select/deselect all the rows on the current page.

Example

<kendo:treeList-column selectable="selectable">
</kendo:treeList-column>

sortable boolean

If set to true and sorting is enabled, the user can click the column header and sort the TreeList by the column field. If set to false, sorting will be disabled for this column. By default, all columns are sortable if sorting is enabled though the sortable option. Further configuration is available via kendo:treeList-column-sortable.

Example

<kendo:treeList-column sortable="sortable">
</kendo:treeList-column>

template java.lang.String

The template which renders the column content. The TreeList renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the TreeList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

<kendo:treeList-column template="template">
</kendo:treeList-column>

title java.lang.String

The text that is displayed in the column header cell. If not set, the TreeList uses field.

Example

<kendo:treeList-column title="title">
</kendo:treeList-column>

width java.lang.Object

The width of the column. Numeric values are treated as pixels.

Example

<kendo:treeList-column width="width">
</kendo:treeList-column>

Configuration JSP Tags

kendo:treeList-column-command

The configuration of the column commands. If set, the column will display a button for every command. Commands can be custom or built-inThe built-in commands are: edit - Switches the current table row to edit mode. Supports the inline and popup edit modes.; createChild- Adds a new child item to the current table row and switches to edit mode. or destroy - Removes the data item to which the current table row is bound.. Custom commands are supported by specifying the click option.

More documentation is available at kendo:treeList-column-command.

Example

<kendo:treeList-column>
    <kendo:treeList-column-command></kendo:treeList-column-command>
</kendo:treeList-column>

kendo:treeList-column-filterable

If set to true and if filtering is enabled, a filter menu will be displayed for this column. If set to false, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration.

More documentation is available at kendo:treeList-column-filterable.

Example

<kendo:treeList-column>
    <kendo:treeList-column-filterable></kendo:treeList-column-filterable>
</kendo:treeList-column>

kendo:treeList-column-sortable

If set to true and sorting is enabled, the user can click the column header and sort the TreeList by the column field. If set to false, sorting will be disabled for this column. By default, all columns are sortable if sorting is enabled though the sortable option.

More documentation is available at kendo:treeList-column-sortable.

Example

<kendo:treeList-column>
    <kendo:treeList-column-sortable></kendo:treeList-column-sortable>
</kendo:treeList-column>

Event Attributes

editable String

The JavaScript function that is executed when the cell or row is about to be opened for editing. The returned result will determine whether an editor for the column will be created.

Example

<kendo:treeList-column editable="handle_editable">
</kendo:treeList-column>
<script>
    function handle_editable(e) {
        // Code to handle the editable event.
    }
</script>

editor String

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:treeList-column editor="handle_editor">
</kendo:treeList-column>
<script>
    function handle_editor(e) {
        // Code to handle the editor event.
    }
</script>

footerTemplate String

The template which renders the footer table cell for the column.The following fields can be used in the template: average - The value of the average aggregate (if specified).; count - The value of the count aggregate (if specified).; max - The value of the max aggregate (if specified).; min - The value of the min aggregate (if specified). or sum - The value of the sum aggregate (if specified)..

Example

<kendo:treeList-column footerTemplate="handle_footerTemplate">
</kendo:treeList-column>
<script>
    function handle_footerTemplate(e) {
        // Code to handle the footerTemplate event.
    }
</script>

headerTemplate String

The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.

Example

<kendo:treeList-column headerTemplate="handle_headerTemplate">
</kendo:treeList-column>
<script>
    function handle_headerTemplate(e) {
        // Code to handle the headerTemplate event.
    }
</script>

template String

The template which renders the column content. The TreeList renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the TreeList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

<kendo:treeList-column template="handle_template">
</kendo:treeList-column>
<script>
    function handle_template(e) {
        // Code to handle the template event.
    }
</script>

Event Tags

kendo:treeList-column-editable

The JavaScript function that is executed when the cell or row is about to be opened for editing. The returned result will determine whether an editor for the column will be created.

Example

<kendo:treeList-column>
    <kendo:treeList-column-editable>
        <script>
            function(e) {
                // Code to handle the editable event.
            }
        </script>
    </kendo:treeList-column-editable>
</kendo:treeList-column>

kendo:treeList-column-editor

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.When used as String, defines the editor widget type. For further info check the Form API: field

Example

<kendo:treeList-column>
    <kendo:treeList-column-editor>
        <script>
            function(e) {
                // Code to handle the editor event.
            }
        </script>
    </kendo:treeList-column-editor>
</kendo:treeList-column>

kendo:treeList-column-footerTemplate

The template which renders the footer table cell for the column.The following fields can be used in the template: average - The value of the average aggregate (if specified).; count - The value of the count aggregate (if specified).; max - The value of the max aggregate (if specified).; min - The value of the min aggregate (if specified). or sum - The value of the sum aggregate (if specified)..

Example

<kendo:treeList-column>
    <kendo:treeList-column-footerTemplate>
        <script>
            function(e) {
                // Code to handle the footerTemplate event.
            }
        </script>
    </kendo:treeList-column-footerTemplate>
</kendo:treeList-column>

kendo:treeList-column-headerTemplate

The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.

Example

<kendo:treeList-column>
    <kendo:treeList-column-headerTemplate>
        <script>
            function(e) {
                // Code to handle the headerTemplate event.
            }
        </script>
    </kendo:treeList-column-headerTemplate>
</kendo:treeList-column>

kendo:treeList-column-template

The template which renders the column content. The TreeList renders table rows (

) which represent the data source items. Each table row consists of table cells () which represent the TreeList columns. By default, the HTML-encoded value of the field is displayed in the column.

Example

<kendo:treeList-column>
    <kendo:treeList-column-template>
        <script>
            function(e) {
                // Code to handle the template event.
            }
        </script>
    </kendo:treeList-column-template>
</kendo:treeList-column>
In this article
Not finding the help you need?