Drag Node from TreeView and Drop into DataGrid then invoke and Add Row with field set to field from dropped node


I have the following layout which consists on left side a nest treeview within a datagrid and I would like to drag a Treenode from TreeView to a DataGrid on the leftside.  Prior to accepting the node I would check node for a specific identifier. On Drop I would like to add a new row to the DataGrid with the PropertyName equal to the name of from a property of the dropped node. 

In the example below, I am showing dragging the GeneratedDate node from the right to the inner data grid on the left...



5 Replies 1 reply marked as answer

IL Indhumathy Loganathan Syncfusion Team April 23, 2021 12:08 PM UTC

Hi John, 
 
Greetings from Syncfusion support. 
 
We have validated your requirement and understand that you want to drag and drop the selected node from TreeView to detail template Grid. We would like to inform you that we do not have support to achieve your requirement. But as a workaround we have achieved your requirement using JSInterop and OnNodeDragStop event of the TreeView.   
  
In the OnNodeDragStop event, we have called JavaScript method in _Host.cshtml file to find the Id of the Grid when the record is dropped and sent the ID to server side to add the record. We have defined the value on GridColumn based on DraggedNode data. 
 
Please find the sample demonstrating the solution from below link 
 
 
In the shared sample we have just shown how to drop the dragged node from TreeView into Grid. You can customize the sample as per your requirement. 
 
Note: Since it is a workaround, it has some limitations, ID property of DetailGrid must be specified uniquely and same to insert the record at particular Grid.    
 
Please let us know, if you need any further assistance. 
 
Regards, 
Indhumathy L

Marked as answer

JO John April 23, 2021 02:45 PM UTC

Once again, truly amazing support!  Thank you for your support.


KR Keerthana Rajendran Syncfusion Team April 26, 2021 05:10 AM UTC

Hi John, 
 
Most Welcome. We are glad to know that the provided solution helped you. Please get back to us if you need further assistance. 
 
Regards, 
Keerthana.  



GB Geraud Bertrand January 18, 2022 01:38 PM UTC

Do you know how I could get Left and Top if I do it from a ListBox and not a TreeView ? 

I use the Dropped Event and give a DropEventArgs but it doesn't have a Left and Top param



GK Gayathri KarunaiAnandam Syncfusion Team January 20, 2022 04:09 AM UTC

Hi Geraud, 
  
Before proceeding further, please share the below details, 
 
·        Confirm whether your requirement is to know the list item is moving top/left. 
·        We suggest that we get the Event Name like “MoveTo, MoveUp” in ActionCompleteEvent args. Please confirm whether this suggestion fulfill your requirement. If not, please share more information. 
 
Please share the above-requested details, based on that we will update promptly. 
 
Regards,  
Gayathri K 


Loader.
Up arrow icon