<kendo:treeList>

A JSP wrapper for Kendo UI TreeList.

Configuration Attributes

autoBind boolean

If set to false the widget will not bind to the data source during initialization. In this case data binding will occur when the change event of the data source is fired. By default the widget will bind to the data source specified in the configuration.

Example

<kendo:treeList autoBind="autoBind">
</kendo:treeList>

columnMenu boolean

If set to true the treelist will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration. Further configuration is available via kendo:treeList-columnMenu.

Example

<kendo:treeList columnMenu="columnMenu">
</kendo:treeList>

editable boolean

If set to true the user would be able to edit the data to which the treelist is bound. By default editing is disabled.Can be set to a string ("inline" or "popup") to specify the editing mode. The default editing mode is "inline".Can be set to a JavaScript object which represents the editing configuration. Further configuration is available via kendo:treeList-editable.

Example

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

filterable boolean

If set to true the user can filter the data source using the treelist filter menu. Filtering is disabled by default.Can be set to a JavaScript object which represents the filter menu configuration. Further configuration is available via kendo:treeList-filterable.

Example

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

height java.lang.Object

The height of the treelist. Numeric values are treated as pixels.

Example

<kendo:treeList height="height">
</kendo:treeList>

reorderable boolean

If set to true the user could reorder the columns by dragging their header cells. By default reordering is disabled.

Example

<kendo:treeList reorderable="reorderable">
</kendo:treeList>

resizable boolean

If set to true allows users to resize columns by dragging their header borders. By default resizing is disabled.

Example

<kendo:treeList resizable="resizable">
</kendo:treeList>

scrollable java.lang.Object

If set to true the TreeList will display a scrollbar when the total row height (or width) exceeds the TreeList height (or width). By default scrolling is enabled.Scrolling renders separate tables for the header and data area. For accessibility-conscious applications, disable scrolling.

Example

<kendo:treeList scrollable="scrollable">
</kendo:treeList>

selectable java.lang.Object

If set to true the user would be able to select treelist rows. By default selection is disabled.Can also be set to the following string values: "row" - the user can select a single row.; "cell" - the user can select a single cell.; "multiple, row" - the user can select multiple rows. or "multiple, cell" - the user can select multiple cells..

Example

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

sortable boolean

If set to true the user could sort the treelist by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration. Further configuration is available via kendo:treeList-sortable.

Example

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

toolbar java.lang.String

If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole treelist Toolbar, and the string value will be passed as an argument to a kendo.template() function.If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the treelist Toolbar contents.If an Array value is assigned, it will be treated as the list of commands displayed in the treelist Toolbar. Commands can be custom or built-in ("create", "excel", "pdf"). The "create" command adds an empty data item to the treelist.; The "excel" command exports the treelist data in MS Excel format. or The "pdf" command exports the treelist data in PDF format.. Further configuration is available via kendo:treeList-toolbar.

Example

<kendo:treeList toolbar="toolbar">
</kendo:treeList>

Configuration JSP Tags

kendo:treeList-columnMenu

If set to true the treelist will display the column menu when the user clicks the chevron icon in the column headers. The column menu allows the user to show and hide columns, filter and sort (if filtering and sorting are enabled). By default the column menu is not enabled.Can be set to a JavaScript object which represents the column menu configuration.

More documentation is available at kendo:treeList-columnMenu.

Example

<kendo:treeList>
    <kendo:treeList-columnMenu></kendo:treeList-columnMenu>
</kendo:treeList>

kendo:treeList-columns

The configuration of the treelist columns. 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 every item of the array.

More documentation is available at kendo:treeList-columns.

Example

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

kendo:treeList-editable

If set to true the user would be able to edit the data to which the treelist is bound. By default editing is disabled.Can be set to a string ("inline" or "popup") to specify the editing mode. The default editing mode is "inline".Can be set to a JavaScript object which represents the editing configuration.

More documentation is available at kendo:treeList-editable.

Example

<kendo:treeList>
    <kendo:treeList-editable></kendo:treeList-editable>
</kendo:treeList>

kendo:treeList-excel

Configures the Kendo UI TreeList Excel export settings.

More documentation is available at kendo:treeList-excel.

Example

<kendo:treeList>
    <kendo:treeList-excel></kendo:treeList-excel>
</kendo:treeList>

kendo:treeList-filterable

If set to true the user can filter the data source using the treelist filter menu. Filtering is disabled by default.Can be set to a JavaScript object which represents the filter menu configuration.

More documentation is available at kendo:treeList-filterable.

Example

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

kendo:treeList-messages

Defines the text of the command buttons that are shown within the TreeList. Used primarily for localization.

More documentation is available at kendo:treeList-messages.

Example

<kendo:treeList>
    <kendo:treeList-messages></kendo:treeList-messages>
</kendo:treeList>

kendo:treeList-pdf

Configures the Kendo UI TreeList PDF export settings.

More documentation is available at kendo:treeList-pdf.

Example

<kendo:treeList>
    <kendo:treeList-pdf></kendo:treeList-pdf>
</kendo:treeList>

kendo:treeList-sortable

If set to true the user could sort the treelist by clicking the column header cells. By default sorting is disabled.Can be set to a JavaScript object which represents the sorting configuration.

More documentation is available at kendo:treeList-sortable.

Example

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

kendo:treeList-toolbar

If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole treelist Toolbar, and the string value will be passed as an argument to a kendo.template() function.If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the treelist Toolbar contents.If an Array value is assigned, it will be treated as the list of commands displayed in the treelist Toolbar. Commands can be custom or built-in ("create", "excel", "pdf"). The "create" command adds an empty data item to the treelist.; The "excel" command exports the treelist data in MS Excel format. or The "pdf" command exports the treelist data in PDF format..

More documentation is available at kendo:treeList-toolbar.

Example

<kendo:treeList>
    <kendo:treeList-toolbar></kendo:treeList-toolbar>
</kendo:treeList>

Event Attributes

cancel String

Fired when the user clicks the "cancel" button (in inline or popup editing mode) or closes the popup window.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the cancel event documentation.

Example

<kendo:treeList cancel="handle_cancel">
</kendo:treeList>
<script>
    function handle_cancel(e) {
        // Code to handle the cancel event.
    }
</script>

change String

Fired when the user selects a table row or cell in the treelist.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

<kendo:treeList change="handle_change">
</kendo:treeList>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

collapse String

Fired when an item is about to be collapsed.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the collapse event documentation.

Example

<kendo:treeList collapse="handle_collapse">
</kendo:treeList>
<script>
    function handle_collapse(e) {
        // Code to handle the collapse event.
    }
</script>

dataBinding String

Fired before the widget binds to its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBinding event documentation.

Example

<kendo:treeList dataBinding="handle_dataBinding">
</kendo:treeList>
<script>
    function handle_dataBinding(e) {
        // Code to handle the dataBinding event.
    }
</script>

dataBound String

Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

<kendo:treeList dataBound="handle_dataBound">
</kendo:treeList>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

dragstart String

Fired when the user attempts to drag an item. If prevented, the item is not allowed to move.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the dragstart event documentation.

Example

<kendo:treeList dragstart="handle_dragstart">
</kendo:treeList>
<script>
    function handle_dragstart(e) {
        // Code to handle the dragstart event.
    }
</script>

drag String

Fired while the user drags and item. This event is triggered on every mouse move.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the drag event documentation.

Example

<kendo:treeList drag="handle_drag">
</kendo:treeList>
<script>
    function handle_drag(e) {
        // Code to handle the drag event.
    }
</script>

dragend String

Fired when the user has finished dragging an item and the model has been updated.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the dragend event documentation.

Example

<kendo:treeList dragend="handle_dragend">
</kendo:treeList>
<script>
    function handle_dragend(e) {
        // Code to handle the dragend event.
    }
</script>

drop String

Fired when the user drops an item. If prevented, the source row will not be moved.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the drop event documentation.

Example

<kendo:treeList drop="handle_drop">
</kendo:treeList>
<script>
    function handle_drop(e) {
        // Code to handle the drop event.
    }
</script>

edit String

Fired when the user edits or creates a data item.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the edit event documentation.

Example

<kendo:treeList edit="handle_edit">
</kendo:treeList>
<script>
    function handle_edit(e) {
        // Code to handle the edit event.
    }
</script>

excelExport String

Fired when the user clicks the "Export to Excel" toolbar button.

For additional information check the excelExport event documentation.

Example

<kendo:treeList excelExport="handle_excelExport">
</kendo:treeList>
<script>
    function handle_excelExport(e) {
        // Code to handle the excelExport event.
    }
</script>

expand String

Fired when an item is about to be expanded.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the expand event documentation.

Example

<kendo:treeList expand="handle_expand">
</kendo:treeList>
<script>
    function handle_expand(e) {
        // Code to handle the expand event.
    }
</script>

filterMenuInit String

Fired when the treelist filter menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the filterMenuInit event documentation.

Example

<kendo:treeList filterMenuInit="handle_filterMenuInit">
</kendo:treeList>
<script>
    function handle_filterMenuInit(e) {
        // Code to handle the filterMenuInit event.
    }
</script>

pdfExport String

Fired when the user clicks the "Export to PDF" toolbar button.

For additional information check the pdfExport event documentation.

Example

<kendo:treeList pdfExport="handle_pdfExport">
</kendo:treeList>
<script>
    function handle_pdfExport(e) {
        // Code to handle the pdfExport event.
    }
</script>

remove String

Fired when the user clicks the "destroy" command button.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the remove event documentation.

Example

<kendo:treeList remove="handle_remove">
</kendo:treeList>
<script>
    function handle_remove(e) {
        // Code to handle the remove event.
    }
</script>

save String

Fired when a data item is saved.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the save event documentation.

Example

<kendo:treeList save="handle_save">
</kendo:treeList>
<script>
    function handle_save(e) {
        // Code to handle the save event.
    }
</script>

columnShow String

Fired when the user shows a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnShow event documentation.

Example

<kendo:treeList columnShow="handle_columnShow">
</kendo:treeList>
<script>
    function handle_columnShow(e) {
        // Code to handle the columnShow event.
    }
</script>

columnHide String

Fired when the user hides a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnHide event documentation.

Example

<kendo:treeList columnHide="handle_columnHide">
</kendo:treeList>
<script>
    function handle_columnHide(e) {
        // Code to handle the columnHide event.
    }
</script>

columnReorder String

Fired when the user changes the order of a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnReorder event documentation.

Example

<kendo:treeList columnReorder="handle_columnReorder">
</kendo:treeList>
<script>
    function handle_columnReorder(e) {
        // Code to handle the columnReorder event.
    }
</script>

columnResize String

Fired when the user resizes a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnResize event documentation.

Example

<kendo:treeList columnResize="handle_columnResize">
</kendo:treeList>
<script>
    function handle_columnResize(e) {
        // Code to handle the columnResize event.
    }
</script>

columnMenuInit String

Fired when the column menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnMenuInit event documentation.

Example

<kendo:treeList columnMenuInit="handle_columnMenuInit">
</kendo:treeList>
<script>
    function handle_columnMenuInit(e) {
        // Code to handle the columnMenuInit event.
    }
</script>

columnLock String

Fired when the user lock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnLock event documentation.

Example

<kendo:treeList columnLock="handle_columnLock">
</kendo:treeList>
<script>
    function handle_columnLock(e) {
        // Code to handle the columnLock event.
    }
</script>

columnUnlock String

Fired when the user unlock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnUnlock event documentation.

Example

<kendo:treeList columnUnlock="handle_columnUnlock">
</kendo:treeList>
<script>
    function handle_columnUnlock(e) {
        // Code to handle the columnUnlock event.
    }
</script>

Event Tags

kendo:treeList-cancel

Fired when the user clicks the "cancel" button (in inline or popup editing mode) or closes the popup window.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the cancel event documentation.

Example

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

kendo:treeList-change

Fired when the user selects a table row or cell in the treelist.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

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

kendo:treeList-collapse

Fired when an item is about to be collapsed.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the collapse event documentation.

Example

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

kendo:treeList-dataBinding

Fired before the widget binds to its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBinding event documentation.

Example

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

kendo:treeList-dataBound

Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

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

kendo:treeList-dragstart

Fired when the user attempts to drag an item. If prevented, the item is not allowed to move.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the dragstart event documentation.

Example

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

kendo:treeList-drag

Fired while the user drags and item. This event is triggered on every mouse move.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the drag event documentation.

Example

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

kendo:treeList-dragend

Fired when the user has finished dragging an item and the model has been updated.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the dragend event documentation.

Example

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

kendo:treeList-drop

Fired when the user drops an item. If prevented, the source row will not be moved.The event handler function context (available via the this keyword) will be set to the widget instance.Available in builds 2015.3.1014 and later.

For additional information check the drop event documentation.

Example

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

kendo:treeList-edit

Fired when the user edits or creates a data item.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the edit event documentation.

Example

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

kendo:treeList-excelExport

Fired when the user clicks the "Export to Excel" toolbar button.

For additional information check the excelExport event documentation.

Example

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

kendo:treeList-expand

Fired when an item is about to be expanded.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the expand event documentation.

Example

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

kendo:treeList-filterMenuInit

Fired when the treelist filter menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the filterMenuInit event documentation.

Example

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

kendo:treeList-pdfExport

Fired when the user clicks the "Export to PDF" toolbar button.

For additional information check the pdfExport event documentation.

Example

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

kendo:treeList-remove

Fired when the user clicks the "destroy" command button.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the remove event documentation.

Example

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

kendo:treeList-save

Fired when a data item is saved.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the save event documentation.

Example

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

kendo:treeList-columnShow

Fired when the user shows a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnShow event documentation.

Example

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

kendo:treeList-columnHide

Fired when the user hides a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnHide event documentation.

Example

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

kendo:treeList-columnReorder

Fired when the user changes the order of a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnReorder event documentation.

Example

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

kendo:treeList-columnResize

Fired when the user resizes a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnResize event documentation.

Example

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

kendo:treeList-columnMenuInit

Fired when the column menu is initialized.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnMenuInit event documentation.

Example

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

kendo:treeList-columnLock

Fired when the user lock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnLock event documentation.

Example

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

kendo:treeList-columnUnlock

Fired when the user unlock a column.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the columnUnlock event documentation.

Example

<kendo:treeList>
    <kendo:treeList-columnUnlock>
        <script>
            function(e) {
                // Code to handle the columnUnlock event.
            }
        </script>
    </kendo:treeList-columnUnlock>
</kendo:treeList>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy