Moving Data Between TreeViews with Drag-and-Drop from Wijmo

When you have multiple TreeView controls displaying, there may be times where you would like to give users the ability to drag-and-drop data between the different TreeViews. With Wijmo’s TreeView control, this is both simple and straightforward to accomplish.

In this blog, we will outline the steps to create two TreeView controls, allow drag-and-drop data between the controls, and then toggle the drag-and-drop feature of the TreeView control.

Wijmo offers the fastest, most flexible JavaScript DataGrid with features including sorting, grouping, searching, Excel-like filtering, DataMaps, custom CellTemplates, sparklines, rich editing, Excel/PDF export, validation, DetailsRows, and more. You can download the entire Wijmo component library here.

How to Import Required Modules

Before we can create our TreeView controls, we’ll need to import the required Wijmo files into our JavaScript file:

import ‘@grapecity/wijmo.styles/wijmo.css’;  
import * as wjNav from ‘@grapecity/wijmo.nav’;

This code will import both the Wijmo's Nav module, which includes the code for creating a TreeView and Wijmo's CSS file so that our controls are correctly styled.

Creating the TreeView Controls

Now that we’ve imported the required files, we’ll now go on to create our TreeView controls. To allow users to move data between grids, we’ll need to set the controls’ allowDragging property to true. We'll also create a method for when users drag elements either within a single TreeView (or between TreeViews) to show how you can disable drag-and-drop functionality.

var firstTree= new wjNav.TreeView(‘#firstTree’, {  
  itemsSource: [  
    { header: ‘root 1’, items: [  
      { header: ‘Item 1.1’ },  
      { header: ‘Item 1.2’ },  
      { header: ‘Item 1.3’ }  
    ]}  
  ],  
  displayMemberPath: ‘header’,  
  childItemsPath: ‘items’,  
  allowDragging: true,  
  dragOver: dragOverBetweenTrees  
});

var secondTree = new wjNav.TreeView(‘#secondTree’, {  
  itemsSource: [  
    { header: ‘root 2’, items: [  
      { header: ‘Item 2.1’ },  
      { header: ‘Item 2.2’ },  
      { header: ‘Item 2.3’ }  
    ]}  
  ],  
  displayMemberPath: ‘header’,  
  childItemsPath: ‘items’,  
  allowDragging: true,  
  dragOver: dragOverBetweenTrees  
});

Now that our TreeViews have been created, we’ll need to create the method that gets called when a list element is dragged over to another TreeView:

function dragOverBetweenTrees(s,e) {  
  var t1 = e.dragSource.treeView;  
  var t2 = e.dropTarget.treeView;

  if(t1 == t2 && !document.getElementById(‘dragWithin’).checked) {  
    e.cancel = true;  
  }  
  if(t1 != t2 && document.getElementById(‘dragBetween’).checked) {  
    e.cancel = true;  
  }  
}

Check to see which ID (either dragWithin or dragBetween) is selected. This selection will determine how users can drag data around and between the TreeView controls.

The checkboxes are used to drag items both between the TreeViews and within the controls, as seen in the picture above. We've also moved the items from the first TreeView to the second and vice versa.

You can check this sample out live here.