Drag and Drop from Data Grid to Treeview

[Chris]

Hello,

Is it possible to drag and item from a Data Grid and drop it onto a TreeView node?

The data from the grid should not appear on the TreeView, it should just get the id of the node and the id of the dragged element from the Data Grid and send a ajax request to the server.

If it's not possible might it be possible the other way around, even if it's a weird experience?!?

Thanks

[Thavasianand Sankaranarayanan]

Hi Chris, 

We suggest you to add a node to treeView within the ajax success event. Please refer the following code snippet, 

<template> 

    <div id="app"> 

        <ejs-grid id='Grid' :dataSource="data" :allowPaging="true" :allowRowDragAndDrop="true" :rowDrop="rowDrop" :rowDropSettings="srcDropOptions" width="49%"> 

 

       </ejs-grid> 

        <ejs-treeview id='treeview' :fields='fields'></ejs-treeview> 

    </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { GridPlugin, Toolbar, Page, Edit, RowDD } from "@syncfusion/ej2-vue-grids"; 

import { data } from './datasource.js'; 

import { TreeViewPlugin } from "@syncfusion/ej2-vue-navigations"; 

import { DataManager, ODataAdaptor, Query } from "@syncfusion/ej2-data"; 

 

Vue.use(GridPlugin); 

Vue.use(TreeViewPlugin); 

 

export default { 

  data() { 

    return { 

 

    }; 

  }, 

  provide: { 

      grid: [Page, RowDD] 

  }, 

  methods: { 

     rowDrop: function(args){ 

        var currLi = args.target.closest('li'); 

            var gridData = args.data; 

            if(currLi !=null && currLi.closest('.e-control').classList.contains('e-treeview')) 

            { 

                if(gridData != null){ 

                    var grid = (document.getElementById('Grid')).ej2_instances[0]; 

                    var tree = (document.getElementById('treeview')).ej2_instances[0]; 

                    let SERVICE_URI = 

      "https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7"; 

                    var val = new DataManager({ 

                        url: SERVICE_URI, 

                        adaptor: new ODataAdaptor() 

                    }).executeQuery(new Query().where("OrderID", "equal", gridData[0].OrderID)).then(function(e){ 

                      for(var i = 0, len = e.result.length; i < len; i++){ 

                        var obj = [{ nodeId:e.result[i].OrderID,nodeText:e.result[i].CustomerID }]; 

                        tree.addNodes(obj,currLi); 

                    } 

                    }); 

                    args.cancel=true; 

                } 

            } 

      } 

  } 

} 

</script> 

In this code we have created a new node to treeView based on the DataManager result. We have used Grid rowDrop event to achieve this requirement. Also, we have prepared the sample with this code and you can find that sample in the below link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid15018269.zip 

If we misunderstood your query, please share your more details about your requirement for further assistance. 

Regards, 

Thavasianand S. 

[Chris]

Hello Thavasianand,

I need to get the item of the treeview before the ajax request is send and i don't want to add a new node. I want to move the entry from the grid to a new folder.

I used your code and added comments to clarify it.

rowDrop: function(args){
    var currLi = args.target.closest('li');
    var gridData = args.data;
    if(currLi != null && currLi.closest('.e-control').classList.contains('e-treeview'))
    {
          if(gridData != null){
              var grid = (document.getElementById('Grid')).ej2_instances[0];
              var tree = (document.getElementById('treeview')).ej2_instances[0];
              // Get the treeitem where the griditem is dropped on
              // Then sent a ajax request to /endpoint/gridData[0].OrderId/moveTo/treeItem.nodeId
              // Reload grid
          }
    }
}

Regards

[Thavasianand Sankaranarayanan]

Hi Chris, 

As per your suggestion, we have modified the sample. In the below sample, we have added the data from the grid as new folder to the treeview . You have to add the hasChildren attribute in the fields and also need not specify the target in the addNodes method. Please refer the following code snippet.  

rowDrop: function(args){  

        var currLi = args.target.closest('li');  

            var gridData = args.data;                    

            if(currLi !=null && currLi.closest('.e-control').classList.contains('e-treeview'))  

            {  

                if(gridData != null){  

                    var grid = (document.getElementById('Grid')).ej2_instances[0];  

                    var tree = (document.getElementById('treeview')).ej2_instances[0];  

                      let treeItem  = [{ nodeId: args.data[0].OrderID, nodeText: args.data[0].CustomerID, hasChildren: true }];    

                       tree.addNodes(treeItem);  

                       args.cancel=true;  

                }  

            }  

      }  

  

Sample: http://www.syncfusion.com/downloads/support/forum/143643/ze/Treeview735268453   

If the above does not meet your requirement then share more details it will helpful for us to provide a better solution as soon as possible. 

Regards, 

Thavasianand S. 

[Chris]

Hello Thavasianand,

thanks for the response, but thats not what i needed, but i could solve it myself. I don't know if it's a good approach or not, but it works.

My solution based on your initial approach:

rowDrop: function(args){
    var currLi = args.target.closest('li');
    var gridData = args.data;
    if(currLi != null && currLi.closest('.e-control').classList.contains('e-treeview'))
    {
          if(gridData != null){
              var grid = (document.getElementById('Grid')).ej2_instances[0];
              var tree = (document.getElementById('treeview')).ej2_instances[0];

              // Get the fileId and the folderId 
              var fileId   = gridData[0].OrderID;
              var folderId = currLi.dataset.uid;
              console.log(fileId, folderId);

          }
    }
}

[Christopher Issac Sunder K]

Hi Christopher, 

Your approach for getting the dropped node Id for treeview is correct . However you can alternatively get this treeview node id by using the following approach.  

rowDrop: function(args) { 

    var currLi = args.target.closest('li'); 

    var gridData = args.data; 

    if (currLi != null && currLi.closest('.e-control').classList.contains('e-treeview')) { 

        if (gridData != null) { 

            var grid = (document.getElementById('Grid')).ej2_instances[0]; 

            var tree = (document.getElementById('treeview')).ej2_instances[0]; 

            var fileId = gridData[0].OrderID; 

            var folderId = currLi.getAttribute("data-uid"); 

            console.log(fileId, folderId); 

            args.cancel = true; 

        } 

    } 

} 

  

Please let us know if you have any concerns and if you need any further assistance.  

Thanks, 

Christo