Drag and Drop event to update database on hierarchy change

[Stephen Hall]

I'm looking to perform an update when a TreeView item is changed (i.e. parentId is changed). 

I haven't seen anything in the documentation of what event I can use to create this functionality.

Thanks!

[Sowmiya Padmanaban]

Hi Stephen Hall,  

 

Greetings from Syncfusion support. 

 

Query - Drag and Drop event to update database on hierarchy change 

 

Based on your shared details, we suspect that your requirement is to fetch the updated data of TreeView component after performing the drag and drop operations. You can fetch the updated data using getTreeData method of the TreeView component.  

 

Refer to the below screenshot. 

 

Before performing Drag and drop operations. 

 

 

After performing drag and drop operations. 

 

 

Refer to the below code snippet. 

 

    <ejs-button id="element" content="Button"></ejs-button> 

    <ejs-treeview id="listdata" allowDragAndDrop="true"> 

        <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields> 

    </ejs-treeview> 

<script> 

    document.getElementById('element').onclick = function (e) {       

        var treeView_instance = document.getElementById("listdata").ej2_instances[0];  

        console.log(treeView_instance.getTreeData()); 

    } 

</script> 

 

Based on the details from getTreeData() method, you can save the current node details in your database. 

 

Refer to the sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_sample424408578.zip 

 

The below events are triggered during the drag and drop of TreeView node. 

 

NodeDragStart - Triggers when the TreeView node drag (move) starts.   

 

NodeDragStop - Triggers when the TreeView node drag (move) is stopped.   

 

NodeDropped - Triggers when the TreeView node is dropped on target element successfully.   

 

Refer the below links to know more about the events of TreeView component. 

 

https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.TreeView.html 

 

To know more about the TreeView component, refer the below links. 

 

UG documentation-https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started/ 

 

Demo link-https://ej2.syncfusion.com/aspnetcore/TreeView/DefaultFunctionalities#/material 

 

If we have misunderstood your requirement, please share more details regarding your requirement. It will help us to achieve your requirement at the earliest. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Stephen Hall]

I'm looking to save the changes after the drag and drop change back to a database. 

Would I just need to pass the getTreeData results to my method and have it parse the data to update the database?

[Sowmiya Padmanaban]

Hi Stephen Hall,  

 

Yes, you can update the database using getTreeData() method. After drag and drop, nodeDropped event will be triggered for TreeView component. Using that event, you can fetch the entire datasource using getTreeData method and call the serve side function to update the data in your database. 

 

Refer to the below code snippet. 

    <ejs-treeview id="listdata" allowDragAndDrop="true" nodeDropped="nodeDropped"> 

        <e-treeview-fields dataSource="ViewBag.dataSource" id="id" parentId="pid" text="name" hasChildren="hasChild" expanded="expanded"></e-treeview-fields> 

    </ejs-treeview> 

<script> 

    

    function nodeDropped(args) { 

        var treeView_instance = document.getElementById("listdata").ej2_instances[0];  

          var full_data = treeView_instance.getTreeData(); 

            var formData = new FormData(); 

            formData.append("tree-data", JSON.stringify(full_data)); 

                $.ajax({ 

                   url: '/Home/Index1', 

                    type: 'POST',     

                    data: formData, 

                     cache: false, 

                   contentType: false, 

                   processData: false, 

                    success: function (result) { 

                         

                    }, 

                    error: function (xhr, status) { 

                        console.log(status); 

                    }, 

                }) 

    } 

</script> 

[HttpPost] 

        public ActionResult Index1(IFormCollection formCollection) 

        { 

            string json = formCollection["tree-data"]; 

            return Json(""); 

        } 

 

After fetching the data in your server side, parse the data and update the database based on your requirement. 

 

Refer to the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_sample424408578-283129540.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P