Initial State

By default, the TreeView expands the first node at each level and collapses all others when it is bound to some data.

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 default tree let theTree = new wjNav.TreeView('#theTree', { itemsSource: getData() }); // // create a tree and select an item when it loads let theTreeSelected = new wjNav.TreeView('#theTreeSelected', { itemsSource: getData(), loadedItems: (s) => { s.selectedItem = findItem(s.itemsSource, 'Solar Panel'); } }); // // create a tree and collapse it to a given level when it loads let theTreeCollapsed = new wjNav.TreeView('#theTreeCollapsed', { itemsSource: getData(), loadedItems: (s) => { s.collapseToLevel(0); } }); let theTreeExpanded = new wjNav.TreeView('#theTreeExpanded', { itemsSource: getData(), loadedItems: (s) => { s.collapseToLevel(10); } }); // // finds an item in a hierarchical array function findItem(arr, text) { for (let i = 0; arr && i < arr.length; i++) { if (arr[i].header.indexOf(text) > -1) { return arr[i]; } // let item = findItem(arr[i].items, text); if (item) { return item; } } return null; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Sample</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 id="theTree"></div> <h2> Selecting a default item</h2> <p> If you select an item when the tree loads, it will automatically ensure the selected node is visible, expanding the tree and scrolling as needed. In this case, we selected the 'Solar Panel' item:</p> <div id="theTreeSelected"></div> <h2> Collapsing to a given Level</h2> <p> Use the <b>collapseToLevel</b> method to collapse or expand the tree to a given level when it loads. For example, the trees below start totally collapsed and totally expanded:</p> <div id="theTreeCollapsed"></div> <div id="theTreeExpanded"></div> </div> </body> </html> // get the tree data 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: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } .wj-treeview { display: block; width: 80%; max-height: 300px; font-size: 120%; margin-bottom: 8px; padding: 6px; margin: 12pt; 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 } 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[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } onTreeSelectedLoadedItems(s: WjTreeView) { s.selectedItem = this.findItem(s.itemsSource as TreeItem[], 'Solar Panel'); } onTreeCollapsedLoadedItems(s: WjTreeView) { s.collapseToLevel(0); } onTreeExpandedLoadedItems(s: WjTreeView) { s.collapseToLevel(10); } // finds an item in a hierarchical array findItem(arr: TreeItem[], text: string): TreeItem | null { for (let i = 0; arr && i < arr.length; i++) { if (arr[i].header.indexOf(text) > -1) { return arr[i]; } // let item = this.findItem(arr[i].items, text); if (item) { return item; } } return null; } } // @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 Hosting GCControls</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"> <wj-tree-view [itemsSource]="data"></wj-tree-view> <h2> Selecting a default item</h2> <p> If you select an item when the tree loads, it will automatically ensure the selected node is visible, expanding the tree and scrolling as needed. In this case, we selected the 'Solar Panel' item:</p> <wj-tree-view #theTreeSelected [itemsSource]="data" (loadedItems)="onTreeSelectedLoadedItems(theTreeSelected)"> </wj-tree-view> <h2> Collapsing to a given Level</h2> <p> Use the <b>collapseToLevel</b> method to collapse or expand the tree to a given level when it loads. For example, the trees below start totally collapsed and totally expanded:</p> <wj-tree-view #theTreeCollapsed [itemsSource]="data" (loadedItems)="onTreeCollapsedLoadedItems(theTreeCollapsed)"> </wj-tree-view> <wj-tree-view #theTreeExpanded [itemsSource]="data" (loadedItems)="onTreeExpandedLoadedItems(theTreeExpanded)"> </wj-tree-view> </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: '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: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; } } .wj-treeview { display: block; width: 80%; max-height: 300px; font-size: 120%; margin-bottom: 8px; padding: 6px; margin: 12pt; 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"> <wj-tree-view :itemsSource="data"></wj-tree-view> <h2>Selecting a default item</h2> <p> If you select an item when the tree loads, it will automatically ensure the selected node is visible, expanding the tree and scrolling as needed. In this case, we selected the 'Solar Panel' item: </p> <wj-tree-view :itemsSource="data" :loadedItems="onTreeSelectedLoadedItems"></wj-tree-view> <h2>Collapsing to a given Level</h2> <p> Use the <b>collapseToLevel</b> method to collapse or expand the tree to a given level when it loads. For example, the trees below start totally collapsed and totally expanded: </p> <wj-tree-view :itemsSource="data" :loadedItems="onTreeCollapsedLoadedItems"></wj-tree-view> <wj-tree-view :itemsSource="data" :loadedItems="onTreeExpandedLoadedItems"></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'; let App = Vue.extend({ name: 'app', data: function() { return { data: getData() }; }, methods: { onTreeSelectedLoadedItems: function(s, e) { s.selectedItem = this.findItem(s.itemsSource, 'Solar Panel'); }, onTreeCollapsedLoadedItems: function(s, e) { s.collapseToLevel(0); }, onTreeExpandedLoadedItems: function(s, e) { s.collapseToLevel(10); }, findItem:function(items,str){ for (let i = 0; items && i < items.length; i++) { if (items[i].header.indexOf(str) !== -1) { return items[i]; } let result = this.findItem(items[i].items, str); if (result) { return result; } } return null; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </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 Sample</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: 'Coffeee 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 = getData(); } render() { return (<div className="container-fluid"> <wjNav.TreeView itemsSource={this.state}></wjNav.TreeView> <h2>Selecting a default item</h2> <p> If you select an item when the tree loads, it will automatically ensure the selected node is visible, expanding the tree and scrolling as needed. In this case, we selected the 'Solar Panel' item: </p> <wjNav.TreeView itemsSource={this.state} loadedItems={this.theTreeSelectedLoadedItems.bind(this)}></wjNav.TreeView> <h2>Collapsing to a given Level</h2> <p> Use the <b>collapseToLevel</b> method to collapse or expand the tree to a given level when it loads. For example, the trees below start totally collapsed and totally expanded: </p> <wjNav.TreeView itemsSource={this.state} loadedItems={this.onTreeCollapsedLoadedItems.bind(this)}></wjNav.TreeView> <wjNav.TreeView itemsSource={this.state} loadedItems={this.onTreeExpandedLoadedItems.bind(this)}></wjNav.TreeView> </div>); } theTreeSelectedLoadedItems(s, e) { s.selectedItem = this.findItem(s.itemsSource, "Solar Panel"); } onTreeCollapsedLoadedItems(s, e) { s.collapseToLevel(0); } onTreeExpandedLoadedItems(s, e) { s.collapseToLevel(10); } findItem(items, str) { for (var i = 0; items && i < items.length; i++) { if (items[i].header.indexOf(str) !== -1) { return items[i]; } var result = this.findItem(items[i].items, str); if (result) { return result; } } return null; } } 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> /* default trees on this sample */ .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: 'Coffeee Maker' }, { header: 'Breadmaker', newItem: true }, { header: 'Solar Panel', newItem: true }, { header: 'Work Table' }, { header: 'Propane Grill' } ] } ]; }