[data grid] Drag the rows within to another data grid or DOM element about mui-x

[michelengelen]

Hey @EkaLinMan
This would be a new feature request, since we currently only handle internal dragging for row reordering.

IMHO exposing the onDragEnd in some way could already be beneficial. With this exposed you could easily build the desired behavior. From what I can see it is exactly what MRT does in their example. All of the state management is custom and gets triggered by the call to onDragEnd.

I will add this to our board for the team to discuss it.

WDYT @mui/xgrid ... would that be a feasible approach for us?

[cherniavskii]

IMHO exposing the onDragEnd in some way could already be beneficial.

This is already possible via rowDragEnd event – see https://stackblitz.com/edit/react-pojshk?file=Demo.tsx
Not sure it would be enough to drag the row to a different Data Grid though.

[cherniavskii]

I gave it a try – it looks like it's possible to intercept the rows dropped to a DOM element – see this demo: https://stackblitz.com/edit/react-pojshk-kxfjdx?file=Demo.tsx

@EkaLinMan Is this what you're looking for?

[EkaLinMan]

Hi @michelengelen , @cherniavskii , thanks for your reply. I choose not to use rowReordering because I don't want to reorder the rows, also from my point of view, it's not so intuitive to trigger rowReordering to implement other drag-and-drop feature, especially since my target is an external grid/ container (which is very distant) instead of the internal dragging.

We also need to achieve the below goals, I think it's better to centralize the logic in one component.

1. I need to drag the multiple selected rows.
2. I need to initiate dragging when the client starts dragging within the row, not just when interacting with a specific icon.
3. I need to customize the draggable box text.

In the end, I implemented my DraggableGridRow to replace the default row component.
The demo is here: https://codesandbox.io/p/sandbox/jovial-jerry-p8yzh5

Thanks!

[michelengelen]

Looks like a viable solution to me.

@cherniavskii do you think we should add a recipe for this? Or should we explore adding a custom approach for dragging rows?