Showing vs. Selecting Nodes

The TreeNode class has an ensureVisible method that ensures the node is visible by expanding parent nodes as needed and scrolling the node into view if necessary. It also has a select method that shows the node and selects it. This sample demonstrates the difference between selecting and showing nodes.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjNav from '@grapecity/wijmo.nav'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create the tree var tree = new wjNav.TreeView('#theTree', { itemsSource: getData(), displayMemberPath: 'header', childItemsPath: 'items' }); // // find a node to show var theItem = findItem(tree.itemsSource, 'Work Table'); var theNode = tree.getNode(theItem); // // show or select the node when the user clicks the button document.getElementById('btnShow').addEventListener('click', function () { theNode.ensureVisible(); }); document.getElementById('btnSelect').addEventListener('click', function () { theNode.select(); }); // // utilities function findItem(items, text) { var node = null; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.header == text) { return item; } if (item.items) { item = findItem(item.items, text); if (item) { return item; } } } return null; // not found } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Showing and Selection 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"> <button id="btnShow" class="btn btn-primary"> Show 'Work Table' Node </button> <button id="btnSelect" class="btn btn-primary"> Select 'Work Table' Node </button> <div id="theTree"></div> </div> </body> </html> // get the tree data export function getData() { return [ { header: 'Electronics', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', items: [ { header: 'Coffee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } /* default trees on this sample */ .wj-treeview { display:block; height: 350px; font-size: 120%; margin: 8px 0; 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 { 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[]; theItem: any; theNode: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // ngAfterViewInit() { this.theItem = this._findItem(this.theTree.itemsSource, 'Work Table'); this.theNode = this.theTree.getNode(this.theItem); } // onShowNode() { this.theNode.ensureVisible(); } // onSelectNode() { this.theNode.select(); } // _findItem(items: TreeItem[], text: string) { var node = null; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.header == text) { return item; } if (item.items) { item = this._findItem(item.items, text); if (item) { return item; } } } return null; // not found } } // @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 Showing and Selection 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"> <button id="btnShow" class="btn btn-primary" (click)="onShowNode()"> Show 'Work Table' Node </button> <button id="btnSelect" class="btn btn-primary" (click)="onSelectNode()"> Select 'Work Table' Node </button> <wj-tree-view #theTree [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'"></wj-tree-view> </div> import { Injectable } from '@angular/core'; export class TreeItem { header: string; newItem?: boolean; items?: TreeItem[] } @Injectable() export class DataService { getData(): TreeItem[] { return [ { header: 'Electronics', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' }] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' }] }, { header: 'Toys', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' }] }, { header: 'Home', items: [ { header: 'Coffee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' }] } ]; } } /* default trees on this sample */ .wj-treeview { display:block; height: 350px; font-size: 120%; margin: 8px 0; 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"> <button id="btnShow" class="btn btn-primary" v-on:click="onShowNode"> Show 'Work Table' Node </button> <button id="btnSelect" class="btn btn-primary" v-on:click="onSelectNode"> Select 'Work Table' Node </button> <wj-tree-view :items-source="data" display-member-path="header" child-items-path="items" :initialized="initTreeView"></wj-tree-view> </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(), theItem: null, theNode: null } }, methods:{ initTreeView: function(ctl){ this.wjTreeViewControl = ctl; }, onShowNode() { this.theNode.ensureVisible(); }, onSelectNode() { this.theNode.select(); }, _findItem(items, text) { var node = null; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.header == text) { return item; } if (item.items) { item = this._findItem(item.items, text); if (item) { return item; } } } return null; // not found } }, mounted: function(){ this.theItem =this._findItem(this.wjTreeViewControl.itemsSource, 'Work Table'); this.theNode =this.wjTreeViewControl.getNode(this.theItem); } }) </script> <style> .container-fluid .wj-treeview { display:block; 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 Showing and Selection 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: 'Electronics', img: 'resources/electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: 'resources/phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' }] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' }] }, { header: 'Toys', img: 'resources/toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' }] }, { header: 'Home', img: 'resources/home.png', items: [ { header: 'Coffee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' }] } ]; } 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 } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData(), theItem: null, theNode: null }; } render() { return (<div className="container-fluid"> <button id="btnShow" className="btn btn-primary" onClick={this.onShowNode.bind(this)}> Show 'Work Table' Node </button> &nbsp; <button id="btnSelect" className="btn btn-primary" onClick={this.onSelectNode.bind(this)}> Select 'Work Table' Node </button> <wjNav.TreeView itemsSource={this.state.data} displayMemberPath="header" childItemsPath="items" initialized={this.initTreeView.bind(this)}></wjNav.TreeView> </div>); } initTreeView(ctl) { let item = this.findItem(ctl.itemsSource, 'Work Table'); this.setState({ theItem: item, theNode: ctl.getNode(item) }); } onShowNode() { this.state.theNode.ensureVisible(); } onSelectNode() { this.state.theNode.select(); } findItem(items, text) { var node = null; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.header == text) { return item; } if (item.items) { item = this.findItem(item.items, text); if (item) { return item; } } } return null; // not found } } 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; 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: 'Electronics', img: 'resources/electronics.png', items: [ { header: 'Trimmers/Shavers' }, { header: 'Tablets' }, { header: 'Phones', img: 'resources/phones.png', items: [ { header: 'Apple' }, { header: 'Motorola', newItem: true }, { header: 'Nokia' }, { header: 'Samsung' } ] }, { header: 'Speakers', newItem: true }, { header: 'Monitors' } ] }, { header: 'Toys', img: 'resources/toys.png', items: [ { header: 'Shopkins' }, { header: 'Train Sets' }, { header: 'Science Kit', newItem: true }, { header: 'Play-Doh' }, { header: 'Crayola' } ] }, { header: 'Home', img: 'resources/home.png', items: [ { header: 'Coffee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; }