Drag and Drop
Premium

Updated on Jun 24, 2026

The TreeList component allows you to move its data items in the data tree by Drag and Drop the TreeList rows.

Getting Started

To enable drag and drop for TreeList rows:

Import TreeListDraggableRow and moveTreeItem from the TreeList package.

tsx

import { TreeList, TreeListDraggableRow, moveTreeItem, TreeListRowDragEvent } from '@progress/kendo-react-treelist';

Set the row prop to TreeListDraggableRow — this replaces the default row component with one that supports drag handles.
tsx
```
<TreeList row={TreeListDraggableRow} ... />
```

Handle the onRowDrop event and use the moveTreeItem utility to reposition the dragged item in the data tree.

tsx

const onRowDrop = (event: TreeListRowDragEvent) => {
    setData(moveTreeItem(data, event.dragged, event.draggedOver, subItemsField));
};

The following example demonstrates how to use the Drag and Drop feature to reorder rows within the TreeList hierarchy.

Change Theme

Theme

Loading ...