[data grid] Advanced drag and drop behaviors: Row reordering in Row Grouping and Tree Data

[DanailH]

Summary 💡

Follow up to #206

Currently, when Row Grouping or Tree Data is used, the row reordering feature is disabled. This was intentionally made so in order to ship the feature quicker. Also, at the time, there were a few unanswered questions regarding how the reordering will work when you try to move a child row out of the parent as well as moving a parent to become a child of another parent.

This issue is to track the demand for a feature like that and ultimately start working on the implementation.
Last but not least, it has to be decided if a feature add-on like this should be part of the Pro or the Premium plan

Advanced Drag and Drop Behaviors

"Row Reordering" doesn't properly include all the behaviors expected from dragging and dropping rows. It is one of the possible outcomes of dragging a row to drop it into a different position.

When a row is dragged to a different position, users expect:

Plain data

• Change a row's displayed order.
  The internal order of the rows is updated, with the possibility to make the order persistent through the callback onRowOrderChange
• [data grid] Reorder multiple row at the same time by dragging #4380
  Support multiple rows reordering via row selection

Tree data

• [data grid] Change a row's hierarchy in Tree Data by dragging a leaf to a different parent node #7774
  The treeDataPath value needs to be updated; following getTreeDataPath, we need a setTreeDataPath that receives the row and the new path array, based on where the row was dropped.
  Because getTreeDataPath is optional, and by default, we use the path field, we may additionally need an optional callback onTreeDataPathUpdate.

• [data grid] Tree data: Change a row's displayed order inside its parent group. #8352
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex are based only on the indexes inside the given group.

Both behaviors in Tree Data should work combined or independently

Row Grouping

• [data grid] Change a row's group in Row Grouping with drag and drop #7775
  The field value referenced by the grouped column needs to be updated; The new value is based on the sibling's rows where the row was dropped. We may need onRowGroupChange to pass this new value and the row that is getting updated.

• [data grid] Row grouping: Change a row's displayed order inside its parent group. #8353
  The internal order of the rows in a given group is updated, with the possibility to make the order persistent through the callback onRowOrderChange. In this case, oldIndex and targetIndex are based only on the indexes inside the given group.

• [data grid] Grouping using drag and drop #5235
  Group rows on the fly by dragging rows into others

• [data grid] Add row reordering support for server side grouped data #18947
  Add row reordering to the server-side row grouping

Both behaviors of Row Grouping should work combined or independently

glad this was brought up as we are definitely waiting on this feature for we need it for our tree data.
pretty basic stab at it but I imagine it's mostly about updating the row hierarchies upon drag and drop.

[tvvignesh]

Was looking for this feature today for our product. Using MUI Pro license. Eagerly awaiting its release. Thanks

[flaviendelangle]

@tvvignesh what would be the wanted behavior for you ?

Do you want to be able to move a row inside it's parent ?
Do you want to be able to move a row inside another parent and update your row accordingly ?

[edwinvrgs]

In my team we had the same situation as @tvvignesh, we ended up adding react-dnd on top Data Grid Pro to implement to those features @flaviendelangle mentions:

1. Moving rows between the parent.
2. Moving rows inside different parents depending on the nesting level.

Looking forward to this release too. Thanks in advance.

[tvvignesh]

@flaviendelangle We were trying to use the tree hierarchy in the MUI data grid. While the tree worked well, this is what we wanted to do:

1. Move rows within a group in the tree during which we update the sequence against the group in the backend
2. Move rows in between groups in the tree during which we want to update the group name in the backend
3. Reorder groups during which the sequence of groups changes in the backend

We are trying to build chatbot dialog flows using the data grid for our product which is why we are looking for this. Thanks in advance.

[DanailH]

Maybe it's time to prioritize this one. It will most likely be only available for v6 because it will utilize the new row structure but maybe there is a way to also have it in v5 with minimal effort. It's probably worth investigating a bit to know what is possible.

[horaciosystem]

Any updates on this?

[horaciosystem]

@edwinvrgs

Currently when row grouping or Tree Data is used the row reordering feature is disabled.

It would be awesome if you create and share a code sandbox with your solution ✨

[coladaag]

Hey guys. Would be pretty awesome to get this done ASAP as we moved our lists to your lib but as we're using tree-data this is an essential feature. Any timeline on that?

[aludin]

We are also dependent on this feature, which is quite essential for us.