Multiple Selection

import { NgModule, Component, ViewChild, enableProdMode, } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { HttpClient, HttpClientModule } from '@angular/common/http'; import { lastValueFrom } from 'rxjs'; import { DxDropDownBoxModule, DxTreeViewModule, DxDataGridModule, DxTreeViewComponent, } from 'devextreme-angular'; import CustomStore from 'devextreme/data/custom_store'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], }) export class AppComponent { @ViewChild(DxTreeViewComponent, { static: false }) treeView; treeDataSource: any; treeBoxValue: string[]; gridDataSource: any; gridBoxValue: number[] = [3]; constructor(http: HttpClient) { this.treeDataSource = this.makeAsyncDataSource(http, 'treeProducts.json'); this.gridDataSource = this.makeAsyncDataSource(http, 'customers.json'); this.treeBoxValue = ['1_1']; } makeAsyncDataSource(http, jsonFile) { return new CustomStore({ loadMode: 'raw', key: 'ID', load() { return lastValueFrom(http.get(`../../../../data/${jsonFile}`)); }, }); } onDropDownBoxValueChanged(e) { this.updateSelection(this.treeView && this.treeView.instance); } onTreeViewReady(e) { this.updateSelection(e.component); } updateSelection(treeView) { if (!treeView) return; if (!this.treeBoxValue) { treeView.unselectAll(); } if (this.treeBoxValue) { this.treeBoxValue.forEach(((value) => { treeView.selectItem(value); })); } } onTreeViewSelectionChanged(e) { this.treeBoxValue = e.component.getSelectedNodeKeys(); } } @NgModule({ imports: [ BrowserModule, DxTreeViewModule, DxDropDownBoxModule, HttpClientModule, DxDataGridModule, ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

:host .dx-fieldset { height: 500px; }

// In real applications, you should not transpile code in the browser. // You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ window.config = { transpiler: 'ts', typescriptOptions: { module: 'system', emitDecoratorMetadata: true, experimentalDecorators: true, }, meta: { 'typescript': { 'exports': 'ts', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.js', '@angular/core': 'npm:@angular/core@12.2.17', '@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17', '@angular/forms': 'npm:@angular/forms@12.2.17', '@angular/common': 'npm:@angular/common@12.2.17', '@angular/compiler': 'npm:@angular/compiler@12.2.17', 'tslib': 'npm:tslib@2.3.1/tslib.js', 'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js', 'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.2.6/cjs', 'devextreme/bundles/dx.all': 'npm:devextreme@22.2.6/bundles/dx.all.js', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.72', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.43', 'devextreme-angular': 'npm:devextreme-angular@22.2.6', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.4/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js', }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, 'rxjs': { defaultExtension: 'js', }, 'rxjs/operators': { defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', 'npm:@angular/*/package.json', 'npm:@angular/common@12.2.17/*/package.json', 'npm:rxjs@7.5.3/package.json', 'npm:rxjs@7.5.3/operators/package.json', 'npm:devextreme-angular@22.2.6/*/package.json', 'npm:devextreme-angular@22.2.6/ui/*/package.json', 'npm:devextreme-angular@22.2.6/package.json', 'npm:devexpress-diagram@2.1.72/package.json', 'npm:devexpress-gantt@4.1.43/package.json', ], }; System.config(window.config);

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.13.0/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import("app").catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>

[{ "ID": 1, "CompanyName": "Premier Buy", "Address": "7601 Penn Avenue South", "City": "Richfield", "State": "Minnesota", "Zipcode": 55423, "Phone": "(612) 291-1000", "Fax": "(612) 291-2001", "Website": "http://www.nowebsitepremierbuy.com" }, { "ID": 2, "CompanyName": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "(630) 438-7800", "Fax": "(630) 438-7801", "Website": "http://www.nowebsiteelectrixmax.com" }, { "ID": 3, "CompanyName": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "(214) 854-3000", "Fax": "(214) 854-3001", "Website": "http://www.nowebsitevideoemporium.com" }, { "ID": 4, "CompanyName": "Screen Shop", "Address": "1000 Lowes Blvd", "City": "Mooresville", "State": "North Carolina", "Zipcode": 28117, "Phone": "(800) 445-6937", "Fax": "(800) 445-6938", "Website": "http://www.nowebsitescreenshop.com" }, { "ID": 5, "CompanyName": "Braeburn", "Address": "1 Infinite Loop", "City": "Cupertino", "State": "California", "Zipcode": 95014, "Phone": "(408) 996-1010", "Fax": "(408) 996-1012", "Website": "http://www.nowebsitebraeburn.com" }, { "ID": 6, "CompanyName": "PriceCo", "Address": "30 Hunter Lane", "City": "Camp Hill", "State": "Pennsylvania", "Zipcode": 17011, "Phone": "(717) 761-2633", "Fax": "(717) 761-2334", "Website": "http://www.nowebsitepriceco.com" }, { "ID": 7, "CompanyName": "Ultimate Gadget", "Address": "1557 Watson Blvd", "City": "Warner Robbins", "State": "Georgia", "Zipcode": 31093, "Phone": "(995) 623-6785", "Fax": "(995) 623-6786", "Website": "http://www.nowebsiteultimategadget.com" }, { "ID": 8, "CompanyName": "EZ Stop", "Address": "618 Michillinda Ave.", "City": "Arcadia", "State": "California", "Zipcode": 91007, "Phone": "(626) 265-8632", "Fax": "(626) 265-8633", "Website": "http://www.nowebsiteezstop.com" }, { "ID": 9, "CompanyName": "Clicker", "Address": "1100 W. Artesia Blvd.", "City": "Compton", "State": "California", "Zipcode": 90220, "Phone": "(310) 884-9000", "Fax": "(310) 884-9001", "Website": "http://www.nowebsiteclicker.com" }, { "ID": 10, "CompanyName": "Store of America", "Address": "2401 Utah Ave. South", "City": "Seattle", "State": "Washington", "Zipcode": 98134, "Phone": "(206) 447-1575", "Fax": "(206) 447-1576", "Website": "http://www.nowebsiteamerica.com" }, { "ID": 11, "CompanyName": "Zone Toys", "Address": "1945 S Cienega Boulevard", "City": "Los Angeles", "State": "California", "Zipcode": 90034, "Phone": "(310) 237-5642", "Fax": "(310) 237-5643", "Website": "http://www.nowebsitezonetoys.com" }, { "ID": 12, "CompanyName": "ACME", "Address": "2525 E El Segundo Blvd", "City": "El Segundo", "State": "California", "Zipcode": 90245, "Phone": "(310) 536-0611", "Fax": "(310) 536-0612", "Website": "http://www.nowebsiteacme.com" }]

[ { "ID": 1, "name": "Stores", "expanded": true }, { "ID": "1_1", "categoryId": 1, "name": "Super Mart of the West", "expanded": true }, { "ID": "1_1_1", "categoryId": "1_1", "name": "Video Players" }, { "ID": "1_1_1_1", "categoryId": "1_1_1", "name": "HD Video Player", "price": 220 }, { "ID": "1_1_1_2", "categoryId": "1_1_1", "name": "SuperHD Video Player", "price": 270 }, { "ID": "1_1_2", "categoryId": "1_1", "name": "Televisions", "expanded": true }, { "ID": "1_1_2_1", "categoryId": "1_1_2", "name": "SuperLCD 42", "price": 1200 }, { "ID": "1_1_2_2", "categoryId": "1_1_2", "name": "SuperLED 42", "price": 1450 }, { "ID": "1_1_2_3", "categoryId": "1_1_2", "name": "SuperLED 50", "price": 1600 }, { "ID": "1_1_2_4", "categoryId": "1_1_2", "name": "SuperLCD 55", "price": 1750 }, { "ID": "1_1_2_5", "categoryId": "1_1_2", "name": "SuperLCD 70", "price": 4000 }, { "ID": "1_1_3", "categoryId": "1_1", "name": "Monitors" }, { "ID": "1_1_3_1", "categoryId": "1_1_3", "name": "19\"" }, { "ID": "1_1_3_1_1", "categoryId": "1_1_3_1", "name": "DesktopLCD 19", "price": 160 }, { "ID": "1_1_4", "categoryId": "1_1", "name": "Projectors" }, { "ID": "1_1_4_1", "categoryId": "1_1_4", "name": "Projector Plus", "price": 550 }, { "ID": "1_1_4_2", "categoryId": "1_1_4", "name": "Projector PlusHD", "price": 750 } ]