Drag&Drop DataGrid row over Splitter window

[Bernd]

Hi.

I have setup an example app with a Splitter component that devides the screen between a TreeView and a DataGrid component and setup a drag&drop scenario wher I am able to drag grid rows into the tree to add tree branches.

https://stackblitz.com/edit/vitejs-vite-k3wgr5?file=src%2FApp.tsx

If I want to use the drag handles in the Datagrid to drag a grid row onto the TreeView, the row vanishes under the left side of the Splitter window but I want to keep it visible when I drag it over the tree. I already had a similar issue a while ago and tried to use the same solution but it doesn't seem to work.

Can you help me out and show me how to keep the row visible while dragging it over the tree on the left?

Thanks,

Greetings,

Bernd

[Konstantin Dikov]

Hi Bernd,

The issue with the scenario is due to the fact that the TR element is moved by adding "transform" values dynamically and that will not allow displaying it outside of the splitter (nor outside of a scrollable Grid).

The only solution that I can think of is to render the dragged item in a table element rendered within the BODY element and change its position based on the position of the original dragged TR element. The idea is that the dragged row should be able to render over the other elements on the page. I have played around with our example with the Drag&Drop to demonstrate how you can clone the dragged TR element in a TABLE rendered in the BODY of the page:

• https://stackblitz.com/edit/react-2dpdyg-wrnfwk?file=app%2Fdraggable-row.jsx,index.html

You can play around with the styles of the generated TABLE and the cloned TR element, but you will see the main idea.

 

Regards,
Konstantin Dikov
Progress Telerik