drag and drop between a grid and a treegridlkm';l.

[issam]

hi,

i am using a treegrid and a grid in a master detail .

the left treegrid is the master and the right grid is the detail .

what i want is to change the parent of the details items by selecting and draging them to some particular node  .

the detailsgrid has allowRowDragAndDrop set to true and rowDropSettings : { dropTargetID: "#TreeGridContainer" }

my main concerns are :

- how to highlight or select the node on the left when the mouse is drag over it ?

- how to get all the data on both controls when the drop event occure (selected rows/ drop target node ... etc) in order to send them to the server and persist the data ?

thanks for your help .

[Karthick Kuppusamy]

Hi Issam, 

Thanks for contacting Syncfusion Supports. 

We glad to achieved your requirement by workaround.  Please find the code example. 

We have created <div> element for Grid and TreeGrid. 

<div id="Grid" style="float:left;width:49%"></div> 

<div id="DestGrid" style="float:right;width:49%"></div> 

Grid drag - drop support: 

            $("#Grid").ejGrid({ 

                dataSource: window.gridData, 

                editSettings: { allowAdding: true, allowDeleting: true }, 

                allowPaging: true, 

                allowRowDragAndDrop: true, 

                rowDrop: function (args) { 

                    var trobj = $("#DestGrid").ejTreeGrid("instance"); 

                    trobj.addRow(this.getSelectedRecords()[0], ej.TreeGrid.RowPosition.Top); 

                    this.deleteRow() 

                }, 

                rowDropSettings: { dropTargetID: "#DestGrid" }, 

                columns: [ 

                              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 80 }, 

                              { field: "CustomerID", headerText: "Customer ID", width: 90 }, 

                              { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 75, format: "{0:C}" }, 

                              { field: "ShipCountry", headerText: "Ship Country", width: 110 } 

                ], 

            }); 

We have achieved drag and drop in ejGrid though ‘rowDropSettings’  property of Grid.  We have added the drop rows to ejGrid through ‘rowDrop’ event of ejGrd. 

TreeGrid drag-drop support : 

 

 

<script type="text/javascript"> 

        var cloneData = []; 

        $(function () { 

            $("#DestGrid").ejDraggable({ 

                clone: true, 

                helper: function () { 

                    return $(".e-rowcell.e-selectionbackground").parent(); 

                }, 

                dragStop: function (args) { 

                    var obj = $("#Grid").ejGrid("instance"); 

                    var trobj = $("#DestGrid").ejTreeGrid("instance"); 

                    cloneData = trobj.getSelectedRecords(); 

                    if (cloneData.length > 0) 

                        obj.addRecord(cloneData); 

                    else 

                        args.cancel = true; 

                    cloneData = []; 

                    trobj.deleteRow(); 

                }, 

            } 

                                                ); 

 

           $("#DestGrid").ejTreeGrid({ 

                dataSource: [], 

                editSettings: { allowAdding: true, allowDeleting: true }, 

                columns: [ 

                              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true }, 

                              { field: "CustomerID", headerText: "Customer ID" }, 

                              { field: "Freight", headerText: "Freight" }, 

                              { field: "ShipCountry", headerText: "Ship Country" } 

                ], 

            }); 

        }); 

 

We have added the support for row drag-drop through ‘ejDraggable’ widgets  of syncfusion.  We have sent the target element through ‘helper’ event of ejDraggable and added drag row to grid through “dragStop” event of ejDraggable of widgets. 

Please find the sample and UG for your reference. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebSite5_(2)26937310.zip 

ejDraggable : https://help.syncfusion.com/api/js/ejdraggable 

Regards, 

K.Karthick. 

[Mike]

Hello? i'm trying to achieve the same feature.

But drag&drop from treegrid is not working. There is no any reaction on my attempts to drag from treegrid. I'm also try to apply ejDraggable to treegrid rows but it's not working too.

P.S. : sorry for my English

[Karthick Kuppusamy]

Hi Issam, 

We have analyzed your scenario and we suggest you to ensure the following cases for your requirement. 

1.Please ensure that you have instantiated ejDraggable widget in treegrid. 

2.Inspect the treegrid div and ensure that the e-draggable class is added or not? 

If you still faced the issue please get back to us with the following information and it would be helpful for us to find the solution at earliest? 

1.Please share the grid and treegrid code? 

2.Share the sample or modify the previous attached sample and revert back to us. 

3.Share more details to reproduce the issue at our end. 

Regards, 

K.Karthick. 

[Mike]

widget applying successfully, but after update data in treegrid, drag stop working, coz it's removes all events from it's container.

I fix it, destroying draggable widget and create it again after all updates of treegrid data.

[Saravanan Arunachalam]

Hi Issam,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.