Rich Tree View - Ordering

Drag and drop your items to reorder them.

Enable drag & drop re-ordering

You can enable the drag & drop re-ordering of items by setting the itemsReordering prop to true:

Limit the re-ordering

By default, all the items are reorderable. You can prevent the re-ordering of some items using the isItemReorderable prop. The following example shows how to only allow re-ordering of 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 allow re-ordering inside the same parent:

React to an item re-ordering

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 Tree View with the second one whenever you do a re-ordering:

Customization

Only trigger the reordering from a drag handle

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

Common examples

File explorer

The example below is a simplified version of the File Explorer example with drag & drop re-ordering. You can re-order 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 />