Angular Data TreeList Context Menu

The TreeList allows you to display a built-in context menu by using the ContextMenu component.

The context menu provides a convenient way to apply data processing features to specific rows or to the TreeList component. The user can add, edit, and delete records, reorder rows, or export the component to a PDF or an Excel file. You can customize the order of the menu items and create custom controls as necessary.

The following example demonstrates how to show a custom ContextMenu when using the kendoTreeListFlatBinding directive.

Setup

To display a custom ContextMenu on the user's right click when binding the data through the kendoTreeListFlatBinding directive, the kendoTreeListHierarchyBinding directive or the data property:

1. Get the ContextMenu instance through a @ViewChild decorator inside the component code.

   Copy Code@ViewChild('contextmenu') public contextMenu: any;

2. To prevent the default browser context menu, handle the built-in cellClick event and use the preventDefault() method.

   Copy Codepublic onCellClick(event: any) {
       if (event.type === 'contextmenu') {
           const originalEvent = event.originalEvent;
           originalEvent.preventDefault();
           ...
       }
   }

3. To display the menu on the exact row the user has clicked on, use the built-in show() method of the ContextMenu and the coordinates that the cellClick event returns.

   Copy Codethis.contextMenu.contextMenu.show({
       left: originalEvent.pageX,
       top: originalEvent.pageY,
   });

4. Handle the select event of the ContextMenu component and determine the data operation that should be executed.

   Copy Codepublic onSelect({ item }): void {
       const menuItem = item.text;
   
       switch(menuItem) {
           case 'Add':
               this.addHandler.emit();
               break;
           case 'Edit':
               this.editHandler.emit();
               break;
           ...
       }
   }

Suggested Links

• API Reference of the ContextMenu
• API Reference of the TreeListComponent
• API Index of the TreeList