TreeView

Directive

kendo-treeview

Child Components

• kendo-treeview-item

Props

animation Boolean | Object

A collection of visual animations that are displayed when TreeView items are expanded or collapsed through user interaction (animation in Kendo UI for jQuery). Setting animation to false disables all animations. The supported composite props are available in AnimationProps.

auto-bind Boolean

If auto-bind is set to false, the TreeView 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 TreeView will bind to the data source that is specified in the configuration.

auto-scroll Boolean

If auto-scroll is set to true, the TreeView will automatically scroll the containing element when the mouse or user finger is close to its top or bottom (autoScroll in Kendo UI for jQuery).

checkboxes Boolean | Object

If checkboxes is set to true or to an object, the TreeView renders checkboxes next to each node (checkboxes in Kendo UI for jQuery). The supported composite props are available in CheckboxesProps.

data-image-url-field String

The field of the data item that provides the image URL of the TreeView nodes (dataImageUrlField in Kendo UI for jQuery).

data-source Object | Array

The data source of the TreeView for rendering the nodes (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.HierarchicalDataSource instance.

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

data-sprite-css-class-field String

The field of the data item that provides the sprite CSS class of the nodes (dataSpriteCssClassField in Kendo UI for jQuery). If data-sprite-css-class-field is set to an array, each level uses either the field which is at the same index in the array or the last item in the array.

data-text-field String | Array

The field of the data item that provides the textual content of the nodes (dataTextField in Kendo UI for jQuery). If data-text-field is set to an array, each level either uses the field which is at the same index in the array or the last item in the array.

data-url-field String

The field of the data item that provides the URL of the node links (dataUrlField in Kendo UI for jQuery).

drag-and-drop Boolean

If drag-and-drop is set to false, the dragging and dropping of the nodes is disabled (dragAndDrop in Kendo UI for jQuery).

load-on-demand Boolean

Indicates whether the child DataSources will be fetched lazily when the parent groups are expanded (loadOnDemand in Kendo UI for jQuery). Setting load-on-demand to false loads all child DataSources at the time of initialization.

messages Object

The text messages that are displayed in the TreeView (messages in Kendo UI for jQuery). Used for customization or localization of messages. The supported composite props are available in MessagesProps.

template String | Function

The template for rendering each node (template in Kendo UI for jQuery).

Events

change: Function

Fires when the selection was changed either by the user or through the select method (change in Kendo UI for jQuery).

check: Function

(Available in internal builds as of 2014.2.828) Fires after the user checked or unchecked a checkbox (check in Kendo UI for jQuery). If checkChildren is set to true, the check event is triggered after all checked states are updated.

collapse: Function

Fires before a subgroup gets collapsed (collapse in Kendo UI for jQuery). Can be cancelled.

databound: Function

Fires after the change event of the data source was processed by adding or removing items (dataBound in Kendo UI for jQuery).

drag: Function

Fires while a node is being dragged (drag in Kendo UI for jQuery).

dragend: Function

Fires after a node was dropped (dragEnd in Kendo UI for jQuery).

dragstart: Function

Fires before the dragging of a node starts (dragStart in Kendo UI for jQuery)

drop: Function

Fires while a node is being dropped (drop in Kendo UI for jQuery).

expand: Function

Fires before a subgroup is expanded (expand in Kendo UI for jQuery).

navigate: Function

Fires when the user moves the focus to another node (navigate in Kendo UI for jQuery).

select: Function

Fires when a node is being selected by the user (select in Kendo UI for jQuery). Can be cancelled.

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 TreeView instance.