Move rows from grid to Treegrid

[César Alejandro Guerrero Nava]

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.

[Vignesh Natarajan]

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" >  

          <columns> 

                <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"/> 

                    .    .     . 

            </columns> 

      </ej:TreeGrid> 

 

<ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="true" AllowRowDragAndDrop="true"> 

      <ClientSideEvents RowDrop="rowDropHandler" /> 

        <Columns> 

            <ej:Column Field="taskID" IsPrimaryKey="true" HeaderText="Order ID" Width="100"/> 

            <ej:Column Field="taskName" HeaderText="Task Name" Width="100"> 

            </ej:Column> 

            <ej:Column Field="startDate" HeaderText="Start Date"  Format="{0:MM/dd/yyyy}" Width="100" > </ej:Column> 

             .   .   . 

             

        </Columns> 

    </ej:Grid> 

    <script> 

        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 

                this.deleteRow()   

       } 

               

               

 

    </script> 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample Link:- http://www.syncfusion.com/downloads/support/directtrac/222328/ze/Sample_(6)1092656742.zip 

 

Refer our help documentation for your reference 

 

https://help.syncfusion.com/api/js/ejtreegrid#methods:addrow 

 

https://help.syncfusion.com/api/js/ejgrid#events:rowdrop 

 

please get back to us if you have any queries.  

 

Regards, 

Vignesh Natarajan