Rich Tree View - Ordering

Let users drag and drop items in the Tree View to reorder them.

Enable drag-and-drop reordering

You can enable the drag-and-drop reordering of items by setting the itemsReordering prop to true:

Limit reordering

By default, all items are reorderable. You can prevent reordering of specifc items using the isItemReorderable prop. The following example shows how to only let users reorder the leaves using the getItemOrderedChildrenIds() API method.

You can also limit the items in which an item can be dropped using the canMoveItemToNewPosition prop. The following example shows how to only let users reorder inside the same parent:

React to an item reordering

You can use the onItemPositionChange to send the new position of an item to your backend:

If you want to send the entire dataset to your backend, you can use the getItemTree() API method. The following demo demonstrates it by synchronizing the first RichTreeView with the second one whenever you perform a reordering:

Customization

Only trigger reordering from a drag handle

You can create a custom TreeItem component to render a drag handle icon and only trigger reordering when dragging from it:

Common examples

File explorer

The example below is a simplified version of the file explorer example with drag-and-drop reordering. You can reorder items but only inside folders (or inside the trash).

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <RichTreeViewPro />
• <TreeItem />
• <TreeItemDragAndDropOverlay />