Open EkaLinMan opened 4 months ago
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?
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.
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?
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.
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!
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?
Summary
I've already done the research, and it seems Row ordering is the only way to drag the row, but
rowReordering
is not my purpose. I hope to achieve the below descriptions:rowReordering
is disabled, don't execute the reordering when dragging.It seems to be a useful feature. I also appreciate it if someone could provide a simple demo to achieve steps 1, 2, 3, and 5, but I guess the only way now is customizing the grid row to be draggable with native D&D API:
slots
to customize the row component.useGridApiContext
in the row component to retrieve the data of selected rowsExamples
The similar behaviors: https://ag-grid.com/javascript-data-grid/row-dragging-to-grid/ https://ag-grid.com/javascript-data-grid/row-dragging-to-external-dropzone/ https://www.material-react-table.com/docs/guides/row-ordering-dnd#drag-and-drop-rows-to-other-ui-or-tables
Motivation
No response
Search keywords: drag