We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Drag and Drop from Data Grid to Treeview

Thread ID:

Created:

Updated:

Platform:

Replies:

143643 Mar 29,2019 03:18 PM UTC Apr 5,2019 10:31 AM UTC Vue 5
loading
Tags: Treeview
Chris
Asked On March 29, 2019 03:18 PM UTC

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 [Syncfusion]
Replied On April 1, 2019 10:19 AM UTC

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


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

Regards, 
Thavasianand S. 


Chris
Replied On April 1, 2019 02:45 PM UTC

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 [Syncfusion]
Replied On April 2, 2019 12:56 PM UTC

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


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
Replied On April 3, 2019 04:31 PM UTC

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 [Syncfusion]
Replied On April 5, 2019 10:31 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon