Node Checkboxes

The TreeNodes can be displayed with a Checkbox by setting the TreeView.showCheckboxes property to true. This is and the TreeView will add checkboxes to each node. The checkedItems and checkItemsChanged events are raised when items are checked or unchecked.

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() { let tree = new wjNav.TreeView('#theTree', { itemsSource: getData(), displayMemberPath: 'header', childItemsPath: 'items', showCheckboxes: true, // // show checked items below the tree checkedItemsChanged: (sender) => { let items = sender.checkedItems, msg = ''; // if (items.length) { msg = '<p><b>Checked Items:</b></p><ol>\r\n'; for (let i = 0; i < items.length; i++) { msg += '<li>' + items[i].header + '</li>\r\n'; } msg += '</ol>'; } // document.getElementById('tvChkStatus').innerHTML = msg; } }); // let checkedItems = []; // // handle buttons document.getElementById('btnCheckAll').addEventListener('click', () => { tree.checkAllItems(true); }); // document.getElementById('btnUncheckAll').addEventListener('click', () => { tree.checkAllItems(false); }); // document.getElementById('btnSaveState').addEventListener('click', () => { checkedItems = tree.checkedItems || []; }); // document.getElementById('btnRestoreState').addEventListener('click', () => { tree.checkedItems = checkedItems; }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo TreeView Checkboxes 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"> <div id="theTree"></div> <button id="btnCheckAll" class="btn btn-default"> Check All </button> <button id="btnUncheckAll" class="btn btn-default"> Uncheck All </button> &nbsp;&nbsp;&nbsp;&nbsp; <button id="btnSaveState" class="btn btn-default"> Save State </button> <button id="btnRestoreState" class="btn btn-default"> Restore State </button> <div id="tvChkStatus"></div> </div> </body> </html> 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' } ] } ]; } .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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, Inject, enableProdMode, NgModule, ViewChild } 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, TTreeItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('theTree') theTree: WjTreeView; data: TTreeItem[]; checkedItems: any[]; tvChkStatus: string; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.checkedItems = []; } // onCheckedItemsChanged() { let items = this.theTree.checkedItems, msg = ''; // if (items.length) { msg = '<p><b>Checked Items:</b></p><ol>\r\n'; for (let i = 0; i < items.length; i++) { msg += '<li>' + items[i].header + '</li>\r\n'; } msg += '</ol>'; } // this.tvChkStatus = msg; } // onCheckAllClick() { this.theTree.checkAllItems(true); } // onUncheckAllClick() { this.theTree.checkAllItems(false); } // onSaveStateClick() { this.checkedItems = this.theTree.checkedItems || []; } // onRestoreStateClick() { this.theTree.checkedItems = this.checkedItems; } } // @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 Checkboxes 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"> <wj-tree-view #theTree [itemsSource]="data" [displayMemberPath]="'header'" [childItemsPath]="'items'" [showCheckboxes]=true (checkedItemsChanged)="onCheckedItemsChanged()"></wj-tree-view> <button id="btnCheckAll" class="btn btn-default" (click)="onCheckAllClick()"> Check All </button> <button id="btnUncheckAll" class="btn btn-default" (click)="onUncheckAllClick()"> Uncheck All </button> &nbsp;&nbsp;&nbsp;&nbsp; <button id="btnSaveState" class="btn btn-default" (click)="onSaveStateClick()"> Save State </button> <button id="btnRestoreState" class="btn btn-default" (click)="onRestoreStateClick()"> Restore State </button> <div id="tvChkStatus" [innerHtml]="tvChkStatus"></div> </div> import { Injectable } from '@angular/core'; // export type TTreeItem = { header: string; items?: TTreeItem[] newItem?: boolean; } // @Injectable() export class DataService { getData(): TTreeItem[] { 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' } ] } ]; } } .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; } <template> <div class="container-fluid"> <wj-tree-view :itemsSource="data" displayMemberPath="header" childItemsPath="items" :showCheckboxes=true :checkedItemsChanged="onCheckedItemsChanged" :initialized="initTreeView"></wj-tree-view> <button id="btnCheckAll" class="btn btn-default" @click="onCheckAllClick"> Check All </button> <button id="btnUncheckAll" class="btn btn-default" @click="onUncheckAllClick"> Uncheck All </button> &nbsp;&nbsp;&nbsp;&nbsp; <button id="btnSaveState" class="btn btn-default" @click="onSaveStateClick"> Save State </button> <button id="btnRestoreState" class="btn btn-default" @click="onRestoreStateClick"> Restore State </button> <div id="tvChkStatus" v-html="tvChkStatus"></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(), tvChkStatus: null, checkedItems: [] } }, methods:{ initTreeView(ctl){ this.wjTreeViewControl = ctl; }, onCheckedItemsChanged() { let items = this.wjTreeViewControl.checkedItems, msg = ''; if (items.length) { msg = '<p><b>Checked Items:</b></p><ol>\r\n'; for (let i = 0; i < items.length; i++) { msg += '<li>' + items[i].header + '</li>\r\n'; } msg += '</ol>'; } this.tvChkStatus = msg; }, onCheckAllClick() { this.wjTreeViewControl.checkAllItems(true); }, onUncheckAllClick() { this.wjTreeViewControl.checkAllItems(false); }, onSaveStateClick() { this.checkedItems = this.wjTreeViewControl.checkedItems || []; }, onRestoreStateClick() { this.wjTreeViewControl.checkedItems = this.checkedItems; } } }) </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 Checkboxes 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', 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' } ] } ]; } 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(), tvChkStatus: null, checkedItems: [] }; } render() { return (<div className="container-fluid"> <wjNav.TreeView itemsSource={this.state.data} displayMemberPath="header" childItemsPath="items" showCheckboxes={true} checkedItemsChanged={this.onCheckedItemsChanged.bind(this)} initialized={this.initTreeView.bind(this)}></wjNav.TreeView> <button id="btnCheckAll" className="btn btn-default" onClick={this.onCheckAllClick.bind(this)}> Check All </button> <button id="btnUncheckAll" className="btn btn-default" onClick={this.onUncheckAllClick.bind(this)}> Uncheck All </button> &nbsp;&nbsp;&nbsp;&nbsp; <button id="btnSaveState" className="btn btn-default" onClick={this.onSaveStateClick.bind(this)}> Save State </button> <button id="btnRestoreState" className="btn btn-default" onClick={this.onRestoreStateClick.bind(this)}> Restore State </button> <div id="tvChkStatus">{this.state.tvChkStatus}</div> </div>); } initTreeView(ctl) { this._wjTreeViewControl = ctl; } onCheckedItemsChanged() { let items = this._wjTreeViewControl.checkedItems, msg = [], li = []; if (items.length) { for (let i = 0; i < items.length; i++) { li.push((<li> {items[i].header} </li>)); } msg.push(<p><b>Checked Items:</b></p>); msg.push(<ol>{li}</ol>); } this.setState({ tvChkStatus: msg }); } onCheckAllClick() { this._wjTreeViewControl.checkAllItems(true); } onUncheckAllClick() { this._wjTreeViewControl.checkAllItems(false); } onSaveStateClick() { this.setState({ checkedItems: this._wjTreeViewControl.checkedItems || [] }); } onRestoreStateClick() { this._wjTreeViewControl.checkedItems = this.state.checkedItems; } } 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', 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' } ] } ]; }