Angular Data Grid Context Menu

The Grid allows 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 Grid component. The user can add, edit, and delete records, select and 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 kendoGridBinding directive.

Setup

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

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

   Copy Code@ViewChild('gridmenu') public gridContextMenu: ContextMenuComponent;

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

   Copy Codepublic onCellClick(e: any): void {
       if (e.type === 'contextmenu') {
           const originalEvent = e.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.gridContextMenu.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 'Up':
               this.moveUp();
               break;
           case 'Down':
               this.moveDown();
               break;
           ...
       }
   }

Suggested Links

• API Reference of the ContextMenu
• API Reference of the GridComponent
• API Index of the Grid