TreeViewProps

Premium

Represents the props of the KendoReact TreeView component.

Name	Type	Default	Description
animate?	boolean	true	Enables or disables the expand and collapse animations. jsx <TreeView animate={false} />
aria-label?	string		Defines a string value that labels the TreeView (more on accessibility by the TreeView). Example: jsx <TreeView aria-label="TreeView Label" />
aria-labelledby?	string		Identifies the element or elements which will label the TreeView (more on accessibility by the TreeView). Example: jsx <TreeView aria-labelledby="treeview-label" />
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). Example: jsx <TreeView aria-multiselectable={true} />
checkboxes?	boolean		Controls the rendering of checkboxes. By default, the checkboxes are not rendered. Example: jsx <TreeView checkboxes={true} />
checkField?	string	"checked"	Specifies the name of the field which will provide a Boolean representation for the checked state of the item. jsx <TreeView checkField="isChecked" />
checkIndeterminateField?	string	"checkIndeterminate"	Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. jsx <TreeView checkIndeterminateField="isPartiallyChecked" />
childrenField?	string	"items"	Specifies the name of the field which will provide an array representation of the item children. jsx <TreeView childrenField="subItems" />
className?	string		Adds a custom CSS class to the TreeView container element. Example: jsx <TreeView className="custom-treeview-class" />
data?	"null" | any[]		Provides the hierarchical data to be displayed in the TreeView. Example: jsx <TreeView data={[{ text: 'Item 1', items: [{ text: 'Sub-item 1' }] }]} />
dir?	string		Sets the direction of the component. Example: jsx <TreeView dir="rtl" />
disableField?	string	"disabled"	Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. jsx <TreeView disableField="isDisabled" />
draggable?	boolean		Controls the dispatching of the drag events. By default, the drag events are not dispatched (see example).
expandField?	string	"expanded"	Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. jsx <TreeView expandField="isExpanded" />
expandIcons?	boolean		Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered (see example). Example: jsx <TreeView expandIcons={true} />
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). Example: jsx <TreeView focusIdField="id" />
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. Example: jsx <TreeView getFocusHierarchicalIndex={(id) => `custom-index-${id}`} />
hasChildrenField?	string	"hasChildren"	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). jsx <TreeView hasChildrenField="hasSubItems" />
iconField?	string	"svgIcon"	Specifies the name of the field which will provide an icon for the specific TreeView item. jsx <TreeView iconField="icon" />
id?	string		Specifies the id attribute of the TreeView container element. Example: jsx <TreeView id="treeview-component" />
item?	React.ComponentType<ItemRenderProps>		Defines the component that will be used for rendering each of the TreeView items (see example). Example: jsx <TreeView item={(props) => <CustomTreeViewItem {...props} />} />
onCheckChange?	(event: TreeViewCheckChangeEvent) => void		Fires when a checkbox is clicked or when Space is pressed on a focused item. Example: jsx <TreeView onCheckChange={(event) => console.log(event.item)} />
onContextMenu?	(event: TreeViewContextMenuEvent) => void		The event that is fired when the ContextMenu is activated. Example: jsx <TreeView onContextMenu={(event) => console.log(event.item)} />
onExpandChange?	(event: TreeViewExpandChangeEvent) => void		Triggered when an item is expanded or collapsed. Example: jsx <TreeView onExpandChange={(event) => console.log(event.item)} />
onItemClick?	(event: TreeViewItemClickEvent) => void		Fires when an item is clicked or when Enter is pressed on a focused item (see example). Example: jsx <TreeView onItemClick={(event) => console.log(event.item)} />
onItemDragEnd?	(event: TreeViewItemDragEndEvent) => void		Fires when a dragged item is dropped (see example). Example: jsx <TreeView onItemDragEnd={(event) => console.log(event.item)} />
onItemDragOver?	(event: TreeViewItemDragOverEvent) => void		Fires when a dragged item changes its position (see example). Example: jsx <TreeView onItemDragOver={(event) => console.log(event.item)} />
onItemDragStart?	(event: TreeViewItemDragStartEvent) => void		Fires when the dragging of an item has started. Example: jsx <TreeView onItemDragStart={(event) => console.log(event.item)} />
selectField?	string	"selected"	Specifies the name of the field which will provide a Boolean representation for the selected state of the item. jsx <TreeView selectField="isSelected" />
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. jsx <TreeView size="large" />
style?	React.CSSProperties		Sets the inline styles for the TreeView container element. Example: jsx <TreeView style={{ width: '300px', height: '400px' }} />
tabIndex?	number		Specifies the tabIndex attribute of the TreeView container element. Example: jsx <TreeView tabIndex={0} />
textField?	string	"text"	Specifies the name of the field which will provide a text representation for the item. jsx <TreeView textField="label" />