New to Kendo UI for Vue? Start a free 30-day trial

TreeViewProps

Updated over 6 months ago

Represents the props of the Kendo UI for Vue TreeView component.

Name	Type	Default	Description
animate?	`boolean`		Controls the animation. By default, the expand and collapse animations are enabled.
ariaLabel?	`string`		Defines a string value that labels the TreeView (more on accessibility by the TreeView).
ariaLabelledby?	`string`		Identifies the element or elements which will label the TreeView (more on accessibility by the TreeView).
ariaMultiSelectable?	`string \| boolean`		Indicates that the user can select more than one TreeView items. If the TreeView is in a multiple selection mode, set the `aria-multiselectable` prop to `true` (more on accessibility by the TreeView).
checkboxes?	`boolean`		Controls the rendering of checkboxes. By default, the checkboxes are not rendered (see example).
checkField?	`string`		Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
checkIndeterminateField?	`string`		Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. Defaults to `checkIndeterminate`.
childrenField?	`string`		Specifies the name of the field which will provide an array representation of the item children.
dataItems?	`any[]`		Sets the data of the TreeView (more information and examples).
disableField?	`string`		Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
draggable?	`boolean`		Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched (see example).
expandField?	`string`		Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
expandIcons?	`boolean`		Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered (see example).
focusIdField?	`string`		The TreeView has a built-in implementation of focusing and keyboard navigation. By default, the component uses hierarchical indices to uniquely match the focused item. You can use the `focusIdField` prop for specifying the name of the field which will uniquely describe an item as an alternative to its hierarchical index.
getFocusHierarchicalIndex?	`(itemId: any) => string`		When `focusIdField` is set, the TreeView executes a depth-first search on the data to find the currently focused item. The `getFocusHierarchicalIndex` prop specifies the function that will be used as an alternative to the default search algorithm.
hasChildrenField?	`string`		Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature (see example). Defaults to `hasChildren`.
id?	`string`		Controls the unique id of the TreeView component.
item?	`any`		Defines the component that will be used for rendering each of the TreeView items (see example).
onCheckChange?	`(event: TreeViewCheckChangeEvent) => void`		Fires when a checkbox is clicked or when `Space` is pressed on a focused item (see example).
onExpandChange?	`(event: TreeViewExpandChangeEvent) => void`		Fires when the expanding or collapsing of an item is requested (see example).
onItemClick?	`(event: TreeViewItemClickEvent) => void`		Fires when an item is clicked or when `Enter` is pressed on a focused item (see example).
onItemDragEnd?	`(event: TreeViewItemDragEndEvent) => void`		Fires when a dragged item is dropped (see example).
onItemDragOver?	`(event: TreeViewItemDragOverEvent) => void`		Fires when a dragged item changes its position (see example).
onItemDragStart?	`(event: TreeViewItemDragStartEvent) => void`		Fires when the dragging of an item has started.
selectField?	`string`		Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
size?	`string`	`medium`	Configures the `size` of the TreeView. The available options are: small medium large null—Does not set a size `className`.
tabIndex?	`number`		Sets a tabIndex of the TreeView DOM element.
textField?	`string`		Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.