Removing Nodes

This sample demonstrates how to remove nodes from the TreeView. The item needs to be removed from the itemsSource and the TreeView must be refreshed using the loadTree method to reflect the removal.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the tree var theTree = new wjNav.TreeView('#theTree', { itemsSource: getData(), displayMemberPath: 'header', childItemsPath: 'items', // // update button state selectedItemChanged: function (s, e) { var btn = document.getElementById('btnRemove'); wjCore.setAttribute(btn, 'disabled', theTree.selectedItem ? null : 'disabled'); } }); theTree.selectedItem = theTree.itemsSource[0]; // // handle buttons document.getElementById('btnRemove').addEventListener('click', function () { if (theTree.selectedItem) { // // find the array that contains the item to be removed var parent = theTree.selectedNode.parentNode; var arr = parent ? parent.dataItem[theTree.childItemsPath] : theTree.itemsSource; // // remove the item from the parent collection var index = arr.indexOf(theTree.selectedItem); arr.splice(index, 1); // // refresh the tree theTree.loadTree(); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Nodes Removing</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"> <div class="row"> <div class="col-xs-4"> <div id="theTree"> </div> </div> <div class="col-xs-8"> <button id="btnRemove" class="btn btn-default"> Remove Selected Node </button> </div> </div> </div> </body> </html> // create some data export function getData() { return [ { header: 'Parent 1', items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' } ] }, { header: 'Parent 2', items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' } ] }, { header: 'Parent 3', items: [ { header: 'Child 3.1' } ] } ]; } /* default trees on this sample */ .wj-treeview { font-size: 120%; margin-top: 8px; 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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; // import { Component, Inject, enableProdMode, NgModule, ViewChild, AfterViewInit } 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 implements AfterViewInit { @ViewChild('theTree') theTree: WjTreeView; data: TreeItem[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { this.theTree.selectedItem = this.theTree.itemsSource[0]; } // onSelectedItemChanged() { var btn = document.getElementById('btnRemove'); wjCore.setAttribute(btn, 'disabled', this.theTree.selectedItem ? null : 'disabled'); } // onRemoveClick() { var theTree = this.theTree; if (theTree.selectedItem) { // // find the array that contains the item to be removed var parent = theTree.selectedNode.parentNode; var arr = parent ? parent.dataItem[theTree.childItemsPath] : theTree.itemsSource; // // remove the item from the parent collection var index = arr.indexOf(theTree.selectedItem); arr.splice(index, 1); // // refresh the tree theTree.loadTree(); } } } // @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 Nodes Removing</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"> <div class="row"> <div class="col-xs-4"> <wj-tree-view #theTree [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'" (selectedItemChanged)="onSelectedItemChanged()"></wj-tree-view> </div> <div class="col-xs-8"> <button id="btnRemove" class="btn btn-default" (click)="onRemoveClick()"> Remove Selected Node </button> </div> </div> </div> import { Injectable } from '@angular/core'; export class TreeItem { header: string; newItem?: boolean; img?: string; items?: TreeItem[] } @Injectable() export class DataService { getData(): TreeItem[] { return [ { header: 'Parent 1', items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' }] }, { header: 'Parent 2', items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' }] }, { header: 'Parent 3', items: [ { header: 'Child 3.1' }] } ]; } } /* default trees on this sample */ .wj-treeview { font-size: 120%; margin-top: 8px; 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; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <wj-tree-view :itemsSource="data" :displayMemberPath="'header'" :childItemsPath="'items'" :selected-item-changed="onSelectedItemChanged" :initialized="initialized" ></wj-tree-view> </div> <div class="col-xs-8"> <button id="btnRemove" class="btn btn-default" @click="onRemoveClick()" >Remove Selected Node</button> </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 } from "./data"; new Vue({ el: "#app", data: function() { return { data: getData(), msg: "Ready" }; }, methods: { initialized: function(control) { this.control = control; this.control.selectedItem = this.control.itemsSource[0]; }, onSelectedItemChanged: function() { var btn = document.getElementById("btnRemove"); wjCore.setAttribute( btn, "disabled", this.control.selectedItem ? null : "disabled" ); }, // onRemoveClick: function() { var control = this.control; if (control.selectedItem) { // // find the array that contains the item to be removed var parent = control.selectedNode.parentNode; var arr = parent ? parent.dataItem[control.childItemsPath] : control.itemsSource; // // remove the item from the parent collection var index = arr.indexOf(control.selectedItem); arr.splice(index, 1); // // refresh the tree control.loadTree(); } } } }); </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 Nodes Removing</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: 'Parent 1', items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' }] }, { header: 'Parent 2', items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' }] }, { header: 'Parent 3', items: [ { header: 'Child 3.1' }] } ]; } 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 * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = getData(); } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-4"> <wjNav.TreeView itemsSource={this.state} displayMemberPath="header" childItemsPath="items" selectedItemChanged={this.onSelectedItemChanged.bind(this)} initialized={this.initialized.bind(this)}></wjNav.TreeView> </div> <div className="col-xs-8"> <button id="btnRemove" className="btn btn-default" onClick={this.onRemoveClick.bind(this)}>Remove Selected Node</button> </div> </div> </div>); } initialized(control) { this._control = control; this._control.selectedItem = this._control.itemsSource[0]; } onSelectedItemChanged() { var btn = document.getElementById("btnRemove"); wjCore.setAttribute(btn, "disabled", this._control.selectedItem ? null : "disabled"); } onRemoveClick() { var control = this._control; if (control.selectedItem) { // // find the array that contains the item to be removed var parent = control.selectedNode.parentNode; var arr = parent ? parent.dataItem[control.childItemsPath] : control.itemsSource; // // remove the item from the parent collection var index = arr.indexOf(control.selectedItem); arr.splice(index, 1); // // refresh the tree control.loadTree(); } } } 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: 'Parent 1', items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' } ] }, { header: 'Parent 2', items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' } ] }, { header: 'Parent 3', items: [ { header: 'Child 3.1' } ] } ]; }