Move rows from grid to Treegrid

Thread ID:	Created:	Updated:	Platform:	Replies:
141320	Dec 5,2018 07:05 PM UTC	Dec 6,2018 07:26 AM UTC	ASP.NET Web Forms	1

Subscribe to this post

Tags: Grid

César Alejandro Guerrero Nava

Asked On December 5, 2018 07:05 PM UTC

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.

Reply | Reply with quote

Vignesh Natarajan [Syncfusion]

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

. . .

</columns>

</ej:TreeGrid>

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

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

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

Reply | Reply with quote

Move rows from grid to Treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US