TreeList

Directive

kendo-treelist

Child Components

• kendo-treelist-column

Props

auto-bind Boolean

If auto-bind is set to false, the TreeList will not bind to the data source during initialization (autoBind in Kendo UI for jQuery). In such scenarios data binding will occur when the change event of the dataSource instance is fired. By default, auto-bind is set to true and the TreeList will bind to the data source that is specified in the configuration.

columns Array

The configuration of the TreeList columns (columns in Kendo UI for jQuery).

The supported values are:

• An array of JavaScript objects—JavaScript objects are interpreted as column configurations.
• Strings—Strings are interpreted as the field to which the column is bound.

The TreeList creates a column for every item of the array.

resizable Boolean

If resizable is set to true, users can resize columns by dragging their header borders (resizable in Kendo UI for jQuery). By default, column-resizing is disabled.

reorderable Boolean

If reorderable is set to true, the user can reorder the columns by dragging their header cells (reorderable in Kendo UI for jQuery). By default, column-reordering is disabled.

column-menu Boolean | Object

If column-menu is set to true, the TreeList displays the column menu when the user clicks the Chevron icon in the column headers (columnMenu in Kendo UI for jQuery). The column menu allows the user to show and hide columns and, if sorting and filtering are enabled, to filter and sort columns. By default, the column menu is disabled. Accepts a JavaScript object which represents the column menu configuration. The supported composite props are available in ColumnMenuProps.

data-source Object | Array

The data source of the TreeList for rendering the table rows (dataSource in Kendo UI for jQuery).

You can set data-source to:

• A JavaScript object which represents any valid data source configuration.
• A JavaScript array.
• An existing kendo.data.DataSource instance.

If the dataSource option is set to a JavaScript object or an array, the TreeList will initialize a new kendo.data.DataSource instance by using that value as a data source configuration. If the dataSource option is an existing kendo.data.DataSource instance, the TreeList will use that instance and will not initialize a new one.

editable Boolean | Object

If editable is set to true, the user will be able to edit the data to which the TreeList is bound (editable in Kendo UI for jQuery). By default, editing is disabled. Accepts a JavaScript object which represents the edit mode.

The supported edit modes are:

• inline
• (Default) incell
• popup

The supported composite props are available in EditableProps.

excel Object

Configures the Excel-export settings of the TreeList (excel in Kendo UI for jQuery). The supported composite props are available in ExcelProps.

filterable Boolean | Object

If filterable is set to true, the user can filter the data source by using the filter menu of the TreeList (filterable in Kendo UI for jQuery). By default, filtering is disabled. Accepts a JavaScript object which represents the filter menu configuration. The supported composite props are available in FilterableProps.

height Number | String

The height of the TreeList (height in Kendo UI for jQuery). Numeric values are treated as pixels.

messages Object

The text of the command buttons that are displayed within the TreeList (messages in Kendo UI for jQuery). Primarily used for localization. The supported composite props are available in MessagesProps.

navigatable Boolean

If navigatable is set to true, the user can navigate the TreeList by using its keyboard navigation (navigatable in Kendo UI for jQuery). By default, the keyboard navigation is disabled.

pageable Boolean | Object

If pageable is set to true, the TreeList will display a pager (pageable in Kendo UI for jQuery). By default, only client-side paging is enabled which means that all data items are expected to be available upon the initialization of the TreeList. Accepts a JavaScript object which represents the pager configuration. The supported composite props are available in PageableProps.

pdf Object

Configures the PDF-export settings of the TreeList (pdf in Kendo UI for jQuery). The supported composite props are available in PdfProps.

scrollable Boolean | Object

If scrollable is set to true, the TreeList will display a scrollbar when the total height or width of the rows exceeds the height or width of the TreeList (scrollable in Kendo UI for jQuery). Scrolling renders separate tables for the header and data area of the TreeList. By default, scrolling is enabled. Disable scrolling for accessibility applications.

selectable Boolean | String

If selectable is set to true, the user can select TreeList rows (selectable in Kendo UI for jQuery). By default, selection is disabled.

The supported values are:

• row—The user can select a single row.
• cell—The user can select a single cell.
• multiple, row—The user can select multiple rows.
• multiple, cell—The user can select multiple cells.

sortable Boolean | Object

If sortable is set to true, the user can sort the TreeList by clicking the column header cells (sortable in Kendo UI for jQuery). By default, sorting is disabled. Accepts a JavaScript object which represents the sorting configuration. The supported composite props are available in SortableProps.

toolbar Array

• 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 (toolbar in Kendo UI for jQuery).
• If a kendo.template() function call or a generic function reference value is assigned, then the return value of the function will be used to render the content of the TreeList toolbar.
• If an array value is assigned, it will be treated as the list of commands that is displayed in the toolbar of the TreeList.

Accepts the following commands:

• cancel—A built-in command that reverts the data changes which were made by the user.
• create—A built-in command that adds an empty data item to the TreeList.
• save—A built-in command that persists the data changes which were made by the user.
• excel—A built-in command that exports the TreeList in the MS Excel format.
• pdf—A built-in command that exports the TreeList to PDF.
• Custom

The supported composite props are available in ToolbarProps.

Events

beforeedit: Function

Fires when the user tries to edit or to create a data item and before the editor is created (beforeEdit in Kendo UI for jQuery). Used for preventing custom editing. The event handler function context (available through the this keyword) will be set to the TreeList instance. The event will be fired only when the TreeList is editable.

cancel: Function

Fires when the user clicks the Cancel button in the inline or popup edit mode, or closes the popup window (cancel in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

cellclose: Function

Fires when the TreeList is in the incell edit mode and the cell is going to be closed (cellClose in Kendo UI for jQuery). The event is triggered after saving or canceling the changes but before the cell is closed. The event handler function context (available through the this keyword) will be set to the TreeList instance.

change: Function

Fires when the user selects a table row or cell in the TreeList (change in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

collapse: Function

Fires when an item is about to be collapsed (collapse in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

databinding: Function

Fires before the TreeList binds to its data source (dataBinding in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

databound: Function

Fires when the TreeList is bound to data from its data source (dataBound in Kendo UI for jQuery).The event handler function context (available through the this keyword) will be set to the TreeList instance.

dragstart: Function

Fires when the user attempts to drag an item (dragStart in Kendo UI for jQuery). If dragstart is prevented, the item is unmovable. The event handler function context (available through the this keyword) will be set to the TreeList instance.Available in builds 2015.3.1014 and later.

drag: Function

Fires while the user is dragging an item (drag in Kendo UI for jQuery). This event is triggered on every mouse move. The event handler function context (available through the this keyword) will be set to the TreeList instance.Available in builds 2015.3.1014 and later.

dragend: Function

(Available as of 2015.3.1014) Fires when the user finished dragging an item and the model was updated (dragEnd in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

drop: Function

Fires when the user drops an item (drop in Kendo UI for jQuery). If drop is prevented, the source row will be unmovable. The event handler function context (available through the this keyword) will be set to the TreeList instance.Available in builds 2015.3.1014 and later.

edit: Function

Fires when the user edits or creates a data item (edit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

excelexport: Function

Fires when the user clicks the Export to Excel toolbar button (excelExport in Kendo UI for jQuery).

expand: Function

Fires when an item is about to be expanded (expand in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

filtermenuinit: Function

Fires when the TreeList filter menu is initialized (filterMenuInit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

filtermenuopen: Function

Fires when the TreeList filter menu is opened (filterMenuOpen in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

pdfexport: Function

Fires when the user clicks the Export to PDF toolbar button (pdfExport in Kendo UI for jQuery).

remove: Function

Fires when the user clicks the Destroy command button (remove in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

save: Function

Fires when a data item is saved (save in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

savechanges: Function

Fires when the user clicks the "save" command button (saveChanges in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnshow: Function

Fires when the user shows a column (columnShow in Kendo UI for jQuery).The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnhide: Function

Fires when the user hides a column (columnHide in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnreorder: Function

Fires when the user changes the order of a column (columnReorder in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnresize: Function

Fires when the user resizes a column (columnResize in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnmenuinit: Function

Fires when the column menu is initialized (columnMenuInit in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnmenuopen: Function

Fires when the column menu is opened (columnMenuOpen in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnlock: Function

Fires when the user locks a column (columnLock in Kendo UI for jQuery).The event handler function context (available through the this keyword) will be set to the TreeList instance.

columnunlock: Function

Fires when the user unlocks a column (columnUnlock in Kendo UI for jQuery). The event handler function context (available through the this keyword) will be set to the TreeList instance.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI TreeList instance.