TreeViewProps

Premium

Represents the props of the KendoReact TreeView component.

Name	Type	Default	Description
animate?	boolean		Controls the animation. By default, the expand and collapse animations are enabled.
aria-label?	string		Defines a string value that labels the TreeView (more on accessibility by the TreeView).
aria-labelledby?	string		Identifies the element or elements which will label the TreeView (more on accessibility by the TreeView).
aria-multiselectable?	boolean | "false" | "true"		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.
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.
className?	string		Sets a class of the TreeView DOM element.
data?	"null" | any[]		Sets the data of the TreeView (more information and examples).
dir?	string		Sets the direction of the component.
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 (see example).
getFocusHierarchicalIndex?	(itemId: any) => undefined | 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.
iconField?	string		Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to svgIcon.
id?	string		Sets an id of the TreeView DOM element.
item?	React.ComponentType<ItemRenderProps>		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.
onContextMenu?	(event: TreeViewContextMenuEvent) => void		The event that is fired when the ContextMenu is activated.
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?	"null" | "small" | "large" | "medium"	medium	Configures the size of the TreeView. The available options are: small medium large null—Does not set a size className.
style?	React.CSSProperties		Sets the styleattribute of the TreeView DOM element.
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.