New to KendoReactStart a free 30-day trial

TreeViewProps
Premium

Represents the props of the KendoReact TreeView component.

NameTypeDefaultDescription

animate?

boolean

Enables or disables the expand and collapse animations.

Example:

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

Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to checked.

Example:

jsx
<TreeView checkField="isChecked" />

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.

Example:

jsx
<TreeView checkIndeterminateField="isPartiallyChecked" />

childrenField?

string

Specifies the name of the field which will provide an array representation of the item children.

Example:

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

Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to disabled.

Example:

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

Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to expanded.

Example:

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

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.

Example:

jsx
<TreeView hasChildrenField="hasSubItems" />

iconField?

string

Specifies the name of the field which will provide an icon for the specific TreeView item. Defaults to svgIcon.

Example:

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

Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to selected.

Example:

jsx
<TreeView selectField="isSelected" />

size?

"null" | "small" | "large" | "medium"

medium

Example:

jsx
<TreeView size="large" />


</code>


</td>
<td class="table-cell-comment">


Configures the `size` of the TreeView.

The available options are:
- small
- medium
- large
- null&mdash;Does not set a size `className`.





</td>
</tr>
<tr>
<td class="table-cell-name">


#### style?


</td>
<td type class="table-cell-type">


<code>


React.CSSProperties


</code>


</td>
<td class="table-cell-default">




</td>
<td class="table-cell-comment">


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

Specifies the name of the field which will provide a text representation for the item. Defaults to text.

Example:

jsx
<TreeView textField="label" />
Not finding the help you need?
Contact Support