Drag and Drop Between Trees

You can also drag and drop nodes between different TreeView controls. To do this, add an event handler for the dragOver event to configure the behavior.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the trees 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 }); // // handle drag-drop within or between trees function dragOverBetweenTrees(s, e) { var t1 = e.dragSource.treeView; var t2 = e.dropTarget.treeView; // // prevent dragging within trees if (t1 == t2 && !document.getElementById('dragWithin').checked) { e.cancel = true; } // // allow dragging between trees if (t1 != t2 && document.getElementById('dragBetween').checked) { e.cancel = false; } } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Between Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <label> <input id="dragWithin" type="checkbox" checked="checked"> allow dragging within trees </label> <br /> <label> <input id="dragBetween" type="checkbox" checked="checked"> allow dragging between trees </label> <div class="row"> <div class="col-xs-6"> <div id="firstTree" class="short-tree"></div> </div> <div class="col-xs-6"> <div id="secondTree" class="short-tree"></div> </div> </div> </div> </body> </html> /* default trees on this sample */ .wj-treeview { height: 250px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 3px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as WjNav from '@grapecity/wijmo.nav'; import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjNavModule, WjTreeView } from '@grapecity/wijmo.angular2.nav'; import { DataService, TreeItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: TreeItem[]; anotherData: TreeItem[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.anotherData = dataService.getAnotherData(); } // onDragOverBetweenTrees(s: WjTreeView, e: WjNav.TreeNodeDragDropEventArgs) { var t1 = e.dragSource.treeView; var t2 = e.dropTarget.treeView; // // prevent dragging within trees if (t1 == t2 && !(document.getElementById('dragWithin') as HTMLInputElement).checked) { e.cancel = true; } // // allow dragging between trees if (t1 != t2 && (document.getElementById('dragBetween') as HTMLInputElement).checked) { e.cancel = false; } } } // @NgModule({ imports: [WjNavModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Between Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <label> <input id="dragWithin" type="checkbox" checked="checked"> allow dragging within trees </label> <br /> <label> <input id="dragBetween" type="checkbox" checked="checked"> allow dragging between trees </label> <div class="row"> <div class="col-xs-6"> <wj-tree-view #firstTree class="short-tree" [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'" [allowDragging]=true (dragOver)="onDragOverBetweenTrees(firstTree, $event)"></wj-tree-view> </div> <div class="col-xs-6"> <wj-tree-view #secondTree class="short-tree" [itemsSource]="anotherData" [displayMemberPath]="'header'" [childItemsPath]="'items'" [allowDragging]=true (dragOver)="onDragOverBetweenTrees(secondTree, $event)"></wj-tree-view> </div> </div> </div> import { Injectable } from '@angular/core'; export class TreeItem { header: string; items?: TreeItem[] } @Injectable() export class DataService { getData(): TreeItem[] { return [ { header: 'root 1', items: [ { header: 'Item 1.1' }, { header: 'Item 1.2' }, { header: 'Item 1.3' }] } ]; } getAnotherData(): TreeItem[] { return [ { header: 'root 2', items: [ { header: 'Item 2.1' }, { header: 'Item 2.2' }, { header: 'Item 2.3' }] } ] } } /* default trees on this sample */ .wj-treeview { height: 250px; font-size: 120%; margin-top: 8px; margin-bottom: 8px; padding: 3px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <label> <input id="dragWithin" type="checkbox" checked="checked"> allow dragging within trees </label> <br> <label> <input id="dragBetween" type="checkbox" checked="checked"> allow dragging between trees </label> <div class="row"> <div class="col-xs-6"> <wj-tree-view class="short-tree" :itemsSource="data" :displayMemberPath="'header'" :childItemsPath="'items'" :allow-dragging="true" :drag-over="onDragOverBetweenTrees" ></wj-tree-view> </div> <div class="col-xs-6"> <wj-tree-view class="short-tree" :itemsSource="anotherData" :displayMemberPath="'header'" :childItemsPath="'items'" :allowDragging="true" :drag-over="onDragOverBetweenTrees" ></wj-tree-view> </div> </div> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.nav"; import * as wjCore from "@grapecity/wijmo"; import { getData, getAnotherData } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData(), anotherData: getAnotherData() }; }, methods: { onDragOverBetweenTrees: function(s, e) { var t1 = e.dragSource.treeView; var t2 = e.dropTarget.treeView; // // prevent dragging within trees if (t1 == t2 && !document.getElementById("dragWithin").checked) { e.cancel = true; } // // allow dragging between trees if (t1 != t2 && document.getElementById("dragBetween").checked) { e.cancel = false; } } } }); </script> <style> .container-fluid .wj-treeview { display: block; height: 350px; font-size: 120%; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Drag and Drop Between Nodes</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { return [ { header: 'root 1', items: [ { header: 'Item 1.1' }, { header: 'Item 1.2' }, { header: 'Item 1.3' }] } ]; } export function getAnotherData() { return [ { header: 'root 2', items: [ { header: 'Item 2.1' }, { header: 'Item 2.2' }, { header: 'Item 2.3' }] } ] } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjNav from '@grapecity/wijmo.react.nav'; import { getData, getAnotherData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), anotherData: getAnotherData(), allowDrag1: true, allowDrag2: true }; } render() { return (<div className="container-fluid"> <label> <input id="dragWithin" type="checkbox" checked={this.state.allowDrag1} onClick={this.setAllowDrag1.bind(this)}/> allow dragging within trees </label> <br /> <label> <input id="dragBetween" type="checkbox" checked={this.state.allowDrag2} onClick={this.setAllowDrag2.bind(this)}/> allow dragging between trees </label> <div className="row"> <div className="col-xs-6"> <wjNav.TreeView className="short-tree" itemsSource={this.state.data} displayMemberPath="header" childItemsPath="items" allowDragging={true} dragOver={this.onDragOverBetweenTrees.bind(this)}></wjNav.TreeView> </div> <div className="col-xs-6"> <wjNav.TreeView className="short-tree" itemsSource={this.state.anotherData} displayMemberPath="header" childItemsPath="items" allowDragging={true} dragOver={this.onDragOverBetweenTrees.bind(this)}></wjNav.TreeView> </div> </div> </div>); } onDragOverBetweenTrees(s, e) { var t1 = e.dragSource.treeView; var t2 = e.dropTarget.treeView; // // prevent dragging within trees if (t1 == t2 && !document.getElementById("dragWithin").checked) { e.cancel = true; } // // allow dragging between trees if (t1 != t2 && document.getElementById("dragBetween").checked) { e.cancel = false; } } setAllowDrag1() { this.setState({ allowDrag1: !this.state.allowDrag1 }); } setAllowDrag2() { this.setState({ allowDrag2: !this.state.allowDrag2 }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .container-fluid .wj-treeview { display: block; height: 350px; font-size: 120%; margin-bottom: 8px; padding: 6px; background: #f0f0f0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } body { margin-bottom: 24pt; } export function getData() { return [ { header: 'root 1', items: [ { header: 'Item 1.1' }, { header: 'Item 1.2' }, { header: 'Item 1.3' } ] } ]; } export function getAnotherData() { return [ { header: 'root 2', items: [ { header: 'Item 2.1' }, { header: 'Item 2.2' }, { header: 'Item 2.3' } ] } ]; }