We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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 .

5 Replies

KK Karthick Kuppusamy Syncfusion Team November 24, 2016 02:09 PM UTC

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. 




Regards, 
K.Karthick. 



MI Mike November 30, 2016 04:09 PM UTC

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


KK Karthick Kuppusamy Syncfusion Team December 1, 2016 09:56 AM UTC

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. 



MI Mike December 1, 2016 04:01 PM UTC

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.


SA Saravanan Arunachalam Syncfusion Team December 2, 2016 10:31 AM UTC

Hi Issam,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


Loader.
Live Chat Icon For mobile
Up arrow icon