Angular Tree View - ContextMenu

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, ViewChild, provideZoneChangeDetection } from '@angular/core'; import { DxListModule } from 'devextreme-angular'; import { DxTreeViewComponent, DxTreeViewModule, type DxTreeViewTypes } from 'devextreme-angular/ui/tree-view'; import { DxContextMenuModule, DxContextMenuComponent, type DxContextMenuTypes } from 'devextreme-angular/ui/context-menu'; import { Service, type Product, type MenuItem } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxListModule, DxTreeViewModule, DxContextMenuModule, ], }) export class AppComponent { @ViewChild(DxTreeViewComponent<Product>, { static: false }) treeView: DxTreeViewComponent<Product>; @ViewChild(DxContextMenuComponent<Product>, { static: false }) contextMenu: DxContextMenuComponent<Product>; products: Product[]; selectedTreeItem: Product; logItems: string[] = []; menuItems: MenuItem[]; constructor(service: Service) { this.products = service.getProducts(); this.menuItems = service.getMenuItems(); } treeViewItemContextMenu(e: DxTreeViewTypes.ItemContextMenuEvent<Product>) { this.selectedTreeItem = e.itemData; const isProductItem = !e.itemData.items; const contextMenu = this.contextMenu.instance; contextMenu.option('items[0].visible', !isProductItem); contextMenu.option('items[1].visible', !isProductItem); contextMenu.option('items[2].visible', isProductItem); contextMenu.option('items[3].visible', isProductItem); contextMenu.option('items[0].disabled', e.node.expanded); contextMenu.option('items[1].disabled', !e.node.expanded); } contextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<Product>) { let logEntry = ''; const treeView = this.treeView.instance; switch (e.itemData.id) { case 'expand': { logEntry = `The '${this.selectedTreeItem.text}' group was expanded`; treeView.expandItem(this.selectedTreeItem.id); break; } case 'collapse': { logEntry = `The '${this.selectedTreeItem.text}' group was collapsed`; treeView.collapseItem(this.selectedTreeItem.id); break; } case 'details': { logEntry = `Details about '${this.selectedTreeItem.text}' were displayed`; break; } case 'copy': { logEntry = `Information about '${this.selectedTreeItem.text}' was copied`; break; } } this.logItems.push(logEntry); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

.form { display: flex; } ::ng-deep .form > div, ::ng-deep #treeview { display: inline-block; vertical-align: top; } ::ng-deep .log-container { padding: 20px; margin-left: 20px; font-weight: 600; background-color: rgba(191, 191, 191, 0.15); } ::ng-deep .log-container > div:first-child { display: flex; align-items: center; margin-bottom: 10px; } ::ng-deep .log-container .dx-icon-clock { font-size: var(--dx-font-size-icon); } ::ng-deep #log .dx-empty-message { padding-left: 0; } ::ng-deep .dx-list-item-content { padding-left: 0; }

import { Injectable } from '@angular/core'; export class ProductItem { id: string; text: string; price: number; image: string; } export class Product { id: string; text: string; expanded?: boolean; items: (Product | ProductItem)[]; } export class MenuItem { id: string; text: string; } const menuItems: MenuItem[] = [ { id: 'expand', text: 'Expand category' }, { id: 'collapse', text: 'Collapse category' }, { id: 'details', text: 'Show product details' }, { id: 'copy', text: 'Copy product info' }, ]; const products: Product[] = [{ id: '1', text: 'Stores', expanded: true, items: [{ id: '1_1', text: 'Super Mart of the West', expanded: true, items: [{ id: '1_1_1', text: 'Video Players', items: [{ id: '1_1_1_1', text: 'HD Video Player', price: 220, image: '../../../../images/products/1.png', }, { id: '1_1_1_2', text: 'SuperHD Video Player', image: '../../../../images/products/2.png', price: 270, }], }, { id: '1_1_2', text: 'Televisions', expanded: true, items: [{ id: '1_1_2_1', text: 'SuperLCD 42', image: '../../../../images/products/7.png', price: 1200, }, { id: '1_1_2_2', text: 'SuperLED 42', image: '../../../../images/products/5.png', price: 1450, }, { id: '1_1_2_3', text: 'SuperLED 50', image: '../../../../images/products/4.png', price: 1600, }, { id: '1_1_2_4', text: 'SuperLCD 55', image: '../../../../images/products/6.png', price: 1350, }, { id: '1_1_2_5', text: 'SuperLCD 70', image: '../../../../images/products/9.png', price: 4000, }], }, { id: '1_1_3', text: 'Monitors', expanded: true, items: [{ id: '1_1_3_1', text: '19"', expanded: true, items: [{ id: '1_1_3_1_1', text: 'DesktopLCD 19', image: '../../../../images/products/10.png', price: 160, }], }, { id: '1_1_3_2', text: '21"', items: [{ id: '1_1_3_2_1', text: 'DesktopLCD 21', image: '../../../../images/products/12.png', price: 170, }, { id: '1_1_3_2_2', text: 'DesktopLED 21', image: '../../../../images/products/13.png', price: 175, }], }], }, { id: '1_1_4', text: 'Projectors', items: [{ id: '1_1_4_1', text: 'Projector Plus', image: '../../../../images/products/14.png', price: 550, }, { id: '1_1_4_2', text: 'Projector PlusHD', image: '../../../../images/products/15.png', price: 750, }], }], }, { id: '1_2', text: 'Braeburn', items: [{ id: '1_2_1', text: 'Video Players', items: [{ id: '1_2_1_1', text: 'HD Video Player', image: '../../../../images/products/1.png', price: 240, }, { id: '1_2_1_2', text: 'SuperHD Video Player', image: '../../../../images/products/2.png', price: 300, }], }, { id: '1_2_2', text: 'Televisions', items: [{ id: '1_2_2_1', text: 'SuperPlasma 50', image: '../../../../images/products/3.png', price: 1800, }, { id: '1_2_2_2', text: 'SuperPlasma 65', image: '../../../../images/products/8.png', price: 3500, }], }, { id: '1_2_3', text: 'Monitors', items: [{ id: '1_2_3_1', text: '19"', items: [{ id: '1_2_3_1_1', text: 'DesktopLCD 19', image: '../../../../images/products/10.png', price: 170, }], }, { id: '1_2_3_2', text: '21"', items: [{ id: '1_2_3_2_1', text: 'DesktopLCD 21', image: '../../../../images/products/12.png', price: 180, }, { id: '1_2_3_2_2', text: 'DesktopLED 21', image: '../../../../images/products/13.png', price: 190, }], }], }], }, { id: '1_3', text: 'E-Mart', items: [{ id: '1_3_1', text: 'Video Players', items: [{ id: '1_3_1_1', text: 'HD Video Player', image: '../../../../images/products/1.png', price: 220, }, { id: '1_3_1_2', text: 'SuperHD Video Player', image: '../../../../images/products/2.png', price: 275, }], }, { id: '1_3_3', text: 'Monitors', items: [{ id: '1_3_3_1', text: '19"', items: [{ id: '1_3_3_1_1', text: 'DesktopLCD 19', image: '../../../../images/products/10.png', price: 165, }], }, { id: '1_3_3_2', text: '21"', items: [{ id: '1_3_3_2_1', text: 'DesktopLCD 21', image: '../../../../images/products/12.png', price: 175, }], }], }], }, { id: '1_4', text: 'Walters', items: [{ id: '1_4_1', text: 'Video Players', items: [{ id: '1_4_1_1', text: 'HD Video Player', image: '../../../../images/products/1.png', price: 210, }, { id: '1_4_1_2', text: 'SuperHD Video Player', image: '../../../../images/products/2.png', price: 250, }], }, { id: '1_4_2', text: 'Televisions', items: [{ id: '1_4_2_1', text: 'SuperLCD 42', image: '../../../../images/products/7.png', price: 1100, }, { id: '1_4_2_2', text: 'SuperLED 42', image: '../../../../images/products/5.png', price: 1400, }, { id: '1_4_2_3', text: 'SuperLED 50', image: '../../../../images/products/4.png', price: 1500, }, { id: '1_4_2_4', text: 'SuperLCD 55', image: '../../../../images/products/6.png', price: 1300, }, { id: '1_4_2_5', text: 'SuperLCD 70', image: '../../../../images/products/9.png', price: 4000, }, { id: '1_4_2_6', text: 'SuperPlasma 50', image: '../../../../images/products/3.png', price: 1700, }], }, { id: '1_4_3', text: 'Monitors', items: [{ id: '1_4_3_1', text: '19"', items: [{ id: '1_4_3_1_1', text: 'DesktopLCD 19', image: '../../../../images/products/10.png', price: 160, }], }, { id: '1_4_3_2', text: '21"', items: [{ id: '1_4_3_2_1', text: 'DesktopLCD 21', image: '../../../../images/products/12.png', price: 170, }, { id: '1_4_3_2_2', text: 'DesktopLED 21', image: '../../../../images/products/13.png', price: 180, }], }], }, { id: '1_4_4', text: 'Projectors', items: [{ id: '1_4_4_1', text: 'Projector Plus', image: '../../../../images/products/14.png', price: 550, }, { id: '1_4_4_2', text: 'Projector PlusHD', image: '../../../../images/products/15.png', price: 750, }], }], }], }]; @Injectable() export class Service { getMenuItems(): MenuItem[] { return menuItems; } getProducts(): Product[] { return products; } }

<!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>