TreeViewProps
Represents the props of the KendoReact TreeView component.
Definition
Package:@progress/kendo-react-treeview
Properties
animate?
boolean
Enables or disables the expand and collapse animations.
true
aria-label?
string
Defines a string value that labels the TreeView (more on accessibility by the TreeView).
Example:
<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:
<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:
<TreeView aria-multiselectable={true} />checkboxes?
boolean
Controls the rendering of checkboxes. By default, the checkboxes are not rendered.
Example:
<TreeView checkboxes={true} />checkField?
string
Specifies the name of the field which will provide a Boolean representation for the checked state of the item.
"checked"
checkIndeterminateField?
string
Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item.
"checkIndeterminate"
childrenField?
string
Specifies the name of the field which will provide an array representation of the item children.
"items"
className?
string
Adds a custom CSS class to the TreeView container element.
Example:
<TreeView className="custom-treeview-class" />data?
null | any[]
Provides the hierarchical data to be displayed in the TreeView.
Example:
<TreeView data={[{ text: 'Item 1', items: [{ text: 'Sub-item 1' }] }]} />dir?
string
Sets the direction of the component.
Example:
<TreeView dir="rtl" />disableField?
string
Specifies the name of the field which will provide a Boolean representation for the disabled state of the item.
"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.
"expanded"
expandIcons?
boolean
Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered (see example).
Example:
<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:
<TreeView focusIdField="id" />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:
<TreeView getFocusHierarchicalIndex={(id) => `custom-index-${id}`} />undefined | string
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).
"hasChildren"
iconField?
string
Specifies the name of the field which will provide an icon for the specific TreeView item.
"svgIcon"
id?
string
Specifies the id attribute of the TreeView container element.
Example:
<TreeView id="treeview-component" />item?
ComponentType<ItemRenderProps>
Defines the component that will be used for rendering each of the TreeView items (see example).
Example:
<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:
<TreeView onCheckChange={(event) => console.log(event.item)} />onContextMenu?
(event: TreeViewContextMenuEvent) => void
The event that is fired when the ContextMenu is activated.
Example:
<TreeView onContextMenu={(event) => console.log(event.item)} />onExpandChange?
(event: TreeViewExpandChangeEvent) => void
Triggered when an item is expanded or collapsed.
Example:
<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:
<TreeView onItemClick={(event) => console.log(event.item)} />onItemDragEnd?
(event: TreeViewItemDragEndEvent) => void
Fires when a dragged item is dropped (see example).
Example:
<TreeView onItemDragEnd={(event) => console.log(event.item)} />onItemDragOver?
(event: TreeViewItemDragOverEvent) => void
Fires when a dragged item changes its position (see example).
Example:
<TreeView onItemDragOver={(event) => console.log(event.item)} />onItemDragStart?
(event: TreeViewItemDragStartEvent) => void
Fires when the dragging of an item has started.
Example:
<TreeView onItemDragStart={(event) => console.log(event.item)} />selectField?
string
Specifies the name of the field which will provide a Boolean representation for the selected state of the item.
"selected"
size?
"small" | "medium" | "large"
Configures the size of the TreeView.
The available options are:
- small
- medium
- large
undefined (theme-controlled)
style?
CSSProperties
Sets the inline styles for the TreeView container element.
Example:
<TreeView style={{ width: '300px', height: '400px' }} />tabIndex?
number
Specifies the tabIndex attribute of the TreeView container element.
Example:
<TreeView tabIndex={0} />textField?
string
Specifies the name of the field which will provide a text representation for the item.
"text"
webMcp?
boolean | WebMcpProps
Enables browser-native AI agent tools via Web MCP (Chrome 146+).
Pass true for defaults or an object for fine-grained control.
AI agents are multilingual — dataName accepts any language.