Re-loading Lazy-Loaded Nodes

By default, lazy-loaded TreeView nodes load their data only once, when the node is expanded for the first time. This sample shows how you can change that behavior for selected nodes causing them to re-load their data whenever they are expanded.

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', { displayMemberPath: 'header', childItemsPath: 'items', isContentHtml: true, itemsSource: getData(), allowDragging: true, expandOnClick: false, autoCollapse: false, // // load elements with a simulated http delay lazyLoadFunction: (node, callback) => { setTimeout(() => { let result = getLazyData(); callback(result); }, 1000); }, // // when collapsing a node with 'reload' set to true, // clear its contents to reload later isCollapsedChanging: (s, e) => { let node = e.node, tree = node.treeView; // if (!node.isCollapsed && node.dataItem.reload) { // remove previous lazy-loaded items from data source node.dataItem.items = []; // // re-bind the tree to remove the old nodes tree.loadTree(); } } }); // // lazy data (re-loaded when opening nodes) function getLazyData() { let creationTime = wjCore.Globalize.format(new Date(), 'hh:mm:ss'); // return [ { header: 'Empty Node at: ' + creationTime }, { header: 'Node with child nodes at: ' + creationTime, items: [ { header: 'hello' }, { header: 'world' } ] }, { header: 'Lazy node <i>(reload when opening)</i>', items: [], reload: true }, ]; } } <!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> </div> </body> </html> export function getData() { return [ { header: 'Electronics <i>(reload when opening)</i>', items: [], reload: true }, { header: 'Toys <i>(load once)</i>', items: [] }, { header: 'Home <i>(load once)</i>', items: [] } ]; } .wj-treeview { background-color: rgba(0,0,0,.1); padding: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); height: 400px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@grapecity/wijmo'; 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 } from '@grapecity/wijmo.angular2.nav'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // lazyLoadFunction = (node: wjNav.TreeNode, callback: Function) => { setTimeout(() => { let result = this._getLazyData(); callback(result); }, 1000); } // onIsCollapsedChanging(e: wjNav.TreeNodeEventArgs) { let node = e.node, tree = node.treeView; // if (!node.isCollapsed && node.dataItem.reload) { // remove previous lazy-loaded items from data source node.dataItem.items = []; // // re-bind the tree to remove the old nodes tree.loadTree(); } } // // lazy data (re-loaded when opening nodes) private _getLazyData() { let creationTime = wjCore.Globalize.format(new Date(), 'hh:mm:ss'); // return [ { header: 'Empty Node at: ' + creationTime }, { header: 'Node with child nodes at: ' + creationTime, items: [ { header: 'hello' }, { header: 'world' } ] }, { header: 'Lazy node <i>(reload when opening)</i>', items: <any>[], reload: true }, ] } } // @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 #tvLazyLoadOData [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'" [isContentHtml]=true [allowDragging]=true [expandOnClick]=false [autoCollapse]=false [lazyLoadFunction]="lazyLoadFunction" (isCollapsedChanging)="onIsCollapsedChanging($event)"> </wj-tree-view> </div> import { Injectable } from '@angular/core'; // export class TreeItem { header: string; reload?: boolean; items?: TreeItem[] | any[] } // @Injectable() export class DataService { getData(): TreeItem[] { return [ { header: 'Electronics <i>(reload when opening)</i>', items: [], reload: true }, { header: 'Toys <i>(load once)</i>', items: [] }, { header: 'Home <i>(load once)</i>', items: [] } ]; } } .wj-treeview { background-color: rgba(0,0,0,.1); padding: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); height: 400px; } <template> <div class="container-fluid"> <wj-tree-view :itemsSource="data" displayMemberPath="header" childItemsPath="items" :isContentHtml=true :allowDragging=true :expandOnClick=false :autoCollapse=false :lazyLoadFunction="lazyLoadFunction" :isCollapsedChanging="onIsCollapsedChanging"> </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: { lazyLoadFunction: function(node, callback) { let self = this; setTimeout(function() { let result = self.$_getLazyData(); callback(result); }, 1000); }, onIsCollapsedChanging: (s, e) => { let node = e.node, tree = node.treeView; // if (!node.isCollapsed && node.dataItem.reload) { // remove previous lazy-loaded items from data source node.dataItem.items = []; // // re-bind the tree to remove the old nodes tree.loadTree(); } }, $_getLazyData: function() { let creationTime = wjCore.Globalize.format(new Date(), 'hh:mm:ss'); let emptyArray = []; return [ { header: 'Empty Node at: ' + creationTime }, { header: 'Node with child nodes at: ' + creationTime, items: [ { header: 'hello' }, { header: 'world' } ] }, { header: 'Lazy node <i>(reload when opening)</i>', items: emptyArray, reload: true } ]; } } }); new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-treeview { background-color: rgba(0, 0, 0, 0.1); padding: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); height: 400px; } </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 <i>(reload when opening)</i>', items: [], reload: true }, { header: 'Toys <i>(load once)</i>', items: [] }, { header: 'Home <i>(load once)</i>', items: [] } ]; } 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"> <wjNav.TreeView itemsSource={this.state} displayMemberPath="header" childItemsPath="items" isContentHtml={true} allowDragging={true} expandOnClick={false} autoCollapse={false} lazyLoadFunction={this.lazyLoadFunction.bind(this)}></wjNav.TreeView> </div>); } lazyLoadFunction(node, callback) { var self = this; setTimeout(function () { var result = self.getLazyData(); callback(result); }, 1000); } getLazyData() { var creationTime = wjCore.Globalize.format(new Date(), "hh:mm:ss"); var emptyArray = []; return [ { header: "Empty Node at: " + creationTime }, { header: "Node with child nodes at: " + creationTime, items: [{ header: "hello" }, { header: "world" }] }, { header: "Lazy node <i>(reload when opening)</i>", items: emptyArray, reload: true } ]; } } 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 { background-color: rgba(0, 0, 0, 0.1); padding: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); height: 400px; } export function getData() { return [ { header: 'Electronics <i>(reload when opening)</i>', items: [], reload: true }, { header: 'Toys <i>(load once)</i>', items: [] }, { header: 'Home <i>(load once)</i>', items: [] }, ]; }