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

Move rows from grid to Treegrid

Hi syncfusion workers, in a pleasure contact with us again.

I have a situation and I want to now how to do:

I have a grid with a number of articles and the control has the allowRowDragAndDrop  option activated.

While in another side, I have a treegrid with providers.

I want to drag a row of the articles and drop  in the provider grid, then that articles become the childs of the provider (him wil be the father).

But I don´t understand how I do that, I see the documentation and the demo of drag and drop, and I see that only function with two grids with the same columns.

Is there a form to do that?

Thank you so much, have a nice day.

1 Reply

VN Vignesh Natarajan Syncfusion Team December 6, 2018 07:26 AM UTC

Hi César, 
Thanks for contacting Syncfusion Support. 
Query#:- I want to drag a row of the articles and drop  in the provider grid, 
From your query, we understood that you need to drag a row from ejGrid and drop the record in the ejTreeGrid control when drag and drop feature is enabled. We have achieved your requirement by enabling AllowDragAndDrop property for both Grids. And by using RowDrop clientside event of the Grid, we have get the dragged data from its arguments and dropped the record into the TreeGrid using addRow method. Also if you want to delete the row from the Grid, you can also use deleteRow method to remove it from Grid. 
Refer to the code example:- 
<ej:TreeGrid runat="server" ID="TreeGridControlDragAndDrop" ChildMapping="SubTasks" TreeColumnIndex="1" IsResponsive="true" AllowDragAndDrop="true" >  
                <ej:TreeGridColumn HeaderText="Task Id" Field="taskID" Width="45" EditType="Numeric" AllowFiltering="false"/> 
                <ej:TreeGridColumn HeaderText="Task Name" Field="taskName" EditType="String" FilterEditType="String" ShowCheckbox="true"/> 
                    .    .     . 
<ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="true" AllowRowDragAndDrop="true"> 
      <ClientSideEvents RowDrop="rowDropHandler" /> 
            <ej:Column Field="taskID" IsPrimaryKey="true" HeaderText="Order ID" Width="100"/> 
            <ej:Column Field="taskName" HeaderText="Task Name" Width="100"> 
            <ej:Column Field="startDate" HeaderText="Start Date"  Format="{0:MM/dd/yyyy}" Width="100" > </ej:Column> 
             .   .   . 
        function rowDropHandler(args){ 
              var treeGridObj = $("#MainContent_TreeGridControlDragAndDrop").data("ejTreeGrid"); // take the ejTreeGrid instance 
              treeGridObj.addRow(args.data[0], ej.TreeGrid.RowPosition.Child);    // add the record to treeGrid using addRow() method of ejTreeGrid 
For your convenience we have prepared a sample which can be downloaded from below link 
Refer our help documentation for your reference 
please get back to us if you have any queries.  
Vignesh Natarajan 

Live Chat Icon For mobile
Up arrow icon