Angular TreeList Accessories Context Menu

New to Kendo UI for Angular? Start a free 30-day trial

Updated on May 27, 2026

The Angular TreeList enables you to display a context menu by using the built-in 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 TreeList to PDF or Excel. 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.

Change Theme

Theme

Loading ...

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:

Get the ContextMenu instance through a @ViewChild decorator inside the component code.
ts
```
@ViewChild('contextmenu') public contextMenu: any;
```

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

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

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.
ts
```
this.contextMenu.contextMenu.show({
    left: originalEvent.pageX,
    top: originalEvent.pageY,
});
```

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

public onSelect({ item }): void {
    const menuItem = item.text;

    switch(menuItem) {
        case 'Add':
            this.addHandler.emit();
            break;
        case 'Edit':
            this.editHandler.emit();
            break;
        ...
    }
}

Angular TreeList Context Menu

Setup

Suggested Links