Angular Tree View - Selection and Customization

import { AfterViewInit, Component, Pipe, PipeTransform, enableProdMode, ViewChild, provideZoneChangeDetection, ChangeDetectorRef, } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { DxListModule, DxCheckBoxModule } from 'devextreme-angular'; import { DxTreeViewModule, DxTreeViewComponent, DxTreeViewTypes } from 'devextreme-angular/ui/tree-view'; import { DxSelectBoxModule, DxSelectBoxTypes } from 'devextreme-angular/ui/select-box'; import { Service, Employee } from './app.service'; @Pipe({ name: 'title', standalone: true }) export class TitlePipe implements PipeTransform { transform(item: Record<string, unknown>): string { return item.text + (item.price ? ` ($${item.price})` : ''); } } if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, imports: [ DxTreeViewModule, DxListModule, DxCheckBoxModule, DxSelectBoxModule, TitlePipe, ], }) export class AppComponent implements AfterViewInit { @ViewChild(DxTreeViewComponent, { static: false }) treeView: DxTreeViewComponent<Employee>; employees: Employee[]; selectedEmployees: Employee[] = []; checkboxVisibilityOptions: DxTreeViewTypes.TreeViewCheckBoxMode[] = ['normal', 'selectAll', 'none']; checkboxVisibility = this.checkboxVisibilityOptions[0]; selectionModes: DxTreeViewTypes.SingleOrMultiple[] = ['multiple', 'single']; selectionMode = this.selectionModes[0]; disabledNodeSelectionModes: DxTreeViewTypes.DisabledNodeSelectionMode[] = ['never', 'recursiveAndAll']; disabledNodeSelectionMode = this.disabledNodeSelectionModes[0]; recursiveSelection = true; selectOnClick = false; isRecursiveDisabled = false; isSelectionModeDisabled = false; constructor(service: Service, private changeDetectorRef: ChangeDetectorRef) { this.employees = service.getEmployees(); } ngAfterViewInit() { this.syncSelection(this.treeView.instance); this.changeDetectorRef.detectChanges(); } treeViewSelectionChanged(e: DxTreeViewTypes.SelectionChangedEvent<Employee>) { this.syncSelection(e.component); } treeViewContentReady(e: DxTreeViewTypes.ContentReadyEvent<Employee>) { this.syncSelection(e.component); } syncSelection(treeView: DxTreeViewComponent<Employee>['instance']) { const selectedEmployees = treeView.getSelectedNodes() .map((node) => node.itemData); this.selectedEmployees = selectedEmployees; } checkboxVisibilityValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { this.checkboxVisibility = e.value; this.isSelectionModeDisabled = e.value === 'selectAll'; if (e.value === 'selectAll') { this.selectionMode = 'multiple'; this.isRecursiveDisabled = false; } } selectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { this.selectionMode = e.value; this.isRecursiveDisabled = e.value === 'single'; if (e.value === 'single') { this.recursiveSelection = false; this.treeView.instance.unselectAll(); } } disabledNodeSelectionModeValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) { this.disabledNodeSelectionMode = e.value; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .form > h4 { margin-bottom: 20px; } ::ng-deep .form > div, ::ng-deep #treeview { display: inline-block; vertical-align: top; } ::ng-deep .selected-container { padding: 20px; margin-left: 20px; background-color: rgba(191, 191, 191, 0.15); font-size: 115%; font-weight: bold; } ::ng-deep #selected-employees { margin-top: 20px; } ::ng-deep .selected-container .dx-list-item-content { padding-left: 0; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 30%; margin-top: 10px; margin-right: 9px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .options-container { display: flex; flex-direction: column; } .options-section { display: flex; } ::ng-deep .editor-container { height: 100%; display: flex; align-items: center; } ::ng-deep .editor-container > * { width: 100%; } ::ng-deep .option:last-of-type { margin-right: 0; }

import { Injectable } from '@angular/core'; export class Employee { id: number; fullName: string; prefix: string; position: string; expanded?: boolean; selected?: boolean; disabled?: boolean; items?: Employee[]; } const employees: Employee[] = [{ id: 1, fullName: 'John Heart', prefix: 'Dr.', position: 'CEO', expanded: true, items: [{ id: 2, fullName: 'Samantha Bright', prefix: 'Dr.', position: 'COO', expanded: true, disabled: true, items: [{ id: 3, fullName: 'Kevin Carter', prefix: 'Mr.', position: 'Shipping Manager', }, { id: 14, fullName: 'Victor Norris', prefix: 'Mr.', selected: true, position: 'Shipping Assistant', }], }, { id: 4, fullName: 'Brett Wade', prefix: 'Mr.', position: 'IT Manager', expanded: true, items: [{ id: 5, fullName: 'Amelia Harper', prefix: 'Mrs.', position: 'Network Admin', }, { id: 6, fullName: 'Wally Hobbs', prefix: 'Mr.', position: 'Programmer', }, { id: 7, fullName: 'Brad Jameson', prefix: 'Mr.', position: 'Programmer', }, { id: 8, fullName: 'Violet Bailey', prefix: 'Ms.', position: 'Jr Graphic Designer', }], }, { id: 9, fullName: 'Barb Banks', prefix: 'Mrs.', position: 'Support Manager', expanded: true, items: [{ id: 10, fullName: 'Kelly Rodriguez', prefix: 'Ms.', position: 'Support Assistant', }, { id: 11, fullName: 'James Anderson', prefix: 'Mr.', position: 'Support Assistant', }], }], }]; @Injectable() export class Service { getEmployees(): Employee[] { return employees; } }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>