TreeList / API / TreeListProps
material theme

TreeListProps

Represents the props of the KendoReact TreeList component.

cellRender? (defaultRendering: ReactElement<HTMLTableCellElement> | null, props: TreeListCellProps) => ReactElement<HTMLTableCellElement> | null

Fires when a cell is about to be rendered. Useful for overriding the default rendering of the cell.

className? string

Sets custom CSS classes to the TreeList DOM element.

columnVirtualization? boolean

Enables the virtualization of the columns (see example). If enabled, the columns outside the viewport are not rendered.

columns? TreeListColumnProps[]

A collection of TreeListColumnProps for creating columns.

data? any[]

Sets the data of the TreeList.

editField? string

Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples).

editRow? React.ComponentType<TreeListRowProps>

If set and when the data item is in edit mode, the editRow value will be rendered.

expandField? string

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

filter? FilterDescriptor[]

The descriptors by which the data is filtered (more information and examples). This affects the values and buttons in the FilterRow of the TreeList.

filterRow? React.ComponentType<FilterRowProps>

If set, it will be rendered instead of the default FilterRow TreeList component.

headerCellRender? (defaultRendering: React.ReactNode | null, props: TreeListHeaderCellProps) => React.ReactNode

Fires when a header cell is about to be rendered. Useful for overriding the default rendering of the header cell.

noRecords? ReactElement<TreeListNoRecordsProps>

Represents the component that will be rendered when the data property of the TreeList is empty or undefined.

onColumnReorder? (event: TreeListColumnReorderEvent) => void

Fires when the columns are reordered.

onColumnResize? (event: TreeListColumnResizeEvent) => void

Fires when a column is resized.

onDataStateChange? (event: TreeListDataStateChangeEvent) => void

Fires when the data state of the TreeList is changed.

onExpandChange? (event: TreeListExpandChangeEvent) => void

Fires when the user clicks on the expand or collapse icon of a row.

onFilterChange? (event: TreeListFilterChangeEvent) => void

Fires when the TreeList filter is modified through the UI (more information and examples). You have to handle the event yourself and filter the data.

onHeaderSelectionChange? (event: TreeListHeaderSelectionChangeEvent) => void

Fires when the user clicks the checkbox of a column header whose field matches selectedField (more information and example).

onItemChange? (event: TreeListItemChangeEvent) => void

Fires when the user changes the values of the item. The event is not debounced and fires on every onChange event of the input in the current EditCell (more information and examples).

onPageChange? (event: TreeListPageChangeEvent) => void

Fires when the page of the TreeList is changed.

onRowClick? (event: TreeListRowClickEvent) => void

Fires when the user clicks a row.

onSelectionChange? (event: TreeListSelectionChangeEvent) => void

Fires when the user tries to select or deselect a row (more information and example).

onSortChange? (event: TreeListSortChangeEvent) => void

Fires when the sorting of the TreeList is changed (see example). You have to handle the event yourself and sort the data.

pager? React.ComponentType<any>

The pager component that the TreeList will render.

reorderable? boolean

If set to true, the user can reorder columns by dragging their header cells.

resizable? boolean

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells.

rowHeight? number

Defines the row height and implements equal heights for all rows.

rowRender? (row: ReactElement<HTMLTableRowElement>, props: TreeListRowProps) => React.ReactNode

Fires when a row is about to be rendered. Useful for overriding the default rendering of the row.

scrollable? ScrollMode

Defines the scroll mode of the TreeList.

The available options are:

  • none—Renders no scrollbar.
  • scrollable—Represents the default scroll mode of the TreeList. Requires you to set the overflow and height (for vertical scrolling), or width (for horizontal scrolling) styles.
  • virtual—Enables the vertical virtual scrolling of the TreeList. Requires you to set the overflow and height styles and rowHeight prop of the TreeList.

selectedField? string

Specifies the name of the field which will provide a Boolean representation of the selected state of the item (see example).

skip? number

The number of records that will be skipped.

sort? SortDescriptor[]

The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns.

sortable? TreeListSortSettings

Enables sorting (see example).

style? CSSProperties

Represents the style HTML attribute.

subItemsField? string

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

tableProps? React.DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>>

A props object that will be passed to the underlying HTML table.

take? number

The number of records that will be taken.

toolbar? ReactElement<TreeListToolbarProps>

Represents the TreeList toolbar component.