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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

drag and drop between a grid and a treegrid

Thread ID:





127557 Nov 23,2016 06:28 AM UTC Dec 2,2016 10:31 AM UTC JavaScript 5
Tags: ejGrid
Asked On November 23, 2016 06:28 AM UTC

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 [Syncfusion]
Replied On 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: 

                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); 
                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 () { 
                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) 
                        args.cancel = true; 
                    cloneData = []; 
                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. 


Replied On 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

Karthick Kuppusamy [Syncfusion]
Replied On 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. 


Replied On 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.

Saravanan Arunachalam [Syncfusion]
Replied On December 2, 2016 10:31 AM UTC

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon