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

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.

View Source
Change Theme:


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.

    @ViewChild('contextmenu') public contextMenu: any;
  2. 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;
  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.{
        left: originalEvent.pageX,
        top: originalEvent.pageY,
  4. 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':
            case 'Edit':

In this article

Not finding the help you need?