Context Menu in Aurelia TreeGrid

22 Sep 20237 minutes to read

The context menu in TreeGrid control is used to manipulate (add, edit and delete) the TreeGrid rows. In TreeGrid, context menu can be enabled with contextMenuSettings property. The contextMenuSettings property contains two inner properties showContextMenu and contextMenuItems.

The showContextMenu property is used to enable or disable the context menu, default value for this property is false.

The contextMenuItems property is used to add the menu items to context menu, this property renders Add and Delete by default when the menu items are not provided.

  • HTML
  • <template>
        <div style="padding:10px;">
            <ej-tree-grid 
                e-widget.bind="TreeGrid"
                id="TreeGrid"
                e-allow-sorting="true"
                e-allow-multi-sorting="true"
                e-edit-settings.bind="editSettings"
                e-context-menu-settings.bind="contextMenuSettings"
                >
            </ej-tree-grid>
        </div>
    </template>
  • JS
  • export class DefaultSample {
        //...
        constructor() {
          this.editSettings = {
            allowEditing: true,
            allowAdding: true,
            rowPosition: ej.TreeGrid.RowPosition.Below,
            allowDeleting: true,
            editMode: 'rowEditing'
          };
          this.contextMenuSettings = {
            showContextMenu: true,
            contextMenuItems: [
              ej.TreeGrid.ContextMenuItems.Add,
              ej.TreeGrid.ContextMenuItems.Edit,
              ej.TreeGrid.ContextMenuItems.Delete
            ]
          };
        }
    }

    The following screenshot displays the Context menu in TreeGrid control.
    Context menu default in Aurelia TreeGrid

    ContextMenu Customization

    The Context menu can be customized by adding a new custom menu item to it. In TreeGrid, context menu can be customized using the ContextMenuOpen client-side event. This event is triggered when the context menu is rendered with mouse right click action. The following properties are available in the event.

    • headerText: Display text for menu item.
    • iconPath: Image location for menu item.
    • eventHandler: Client-side event for menu item click.
    • menuId: Used to bind event and sub menu items
  • HTML
  • <template>
        <div style="padding:10px;">
            <ej-tree-grid 
                e-widget.bind="TreeGrid"
                id="TreeGrid"
                e-allow-sorting="true"
                e-allow-multi-sorting="true"
                e-context-menu-settings.bind="contextMenuSettings"
                e-on-context-menu-open.delegate="contextMenuOpen($event.detail)"
                >
            </ej-tree-grid>
        </div>
    </template>
  • JS
  • export class DefaultSample {
        constructor() {
          this.contextMenuSettings = {
            showContextMenu: true,
            contextMenuItems: [
              ej.TreeGrid.ContextMenuItems.Add,
              ej.TreeGrid.ContextMenuItems.Edit,
              ej.TreeGrid.ContextMenuItems.Delete
            ]
          };
        }
        contextMenuOpen(args) {
          args.contextMenuItems.push({
            headerText: 'Custom Menu',
            iconPath: 'url(https://js.syncfusion.com/demos/web/content/images/treegrid/folder-open.png)',
            eventHandler: this.customMenuClick,
            menuId: 'customMenu'
          });
        }
        customMenuClick(args) {
          //your code goes here
        }
    }

    The following screenshot displays the customization of Context menu in TreeGrid control.
    Context menu customization in Aurelia TreeGrid

    Header Context Menu

    Header context menu can be enabled by setting showContextMenu as true. The default value of the showContextMenu property is false.

    Following options are shown in header context menu.

    • Column Chooser - Display all the column names; you can enable or disable a column by select or deselect the respective column name in the column chooser menu. This option is default option of header context menu.
    • Sort Ascending & Sort Descending - Used to sort the items in the column. These menu options will be displayed only when you enable the allowSorting property. To perform multilevel sorting, the allowMultiSorting property should be enabled.
    • Freeze, Unfreeze & Freeze Preceding Columns - Used to freeze or unfreeze the columns. These set of menu options will be displayed in all the columns when isFrozen property is enabled in any of the columns. However you can control the visibility of these menu options in a particular column by enabling/disabling the allowFreezing property of that specific column.

    The below code snippet explains how to enable header context menu in TreeGrid

  • HTML
  • <template>
        <div style="padding:10px;">
            <ej-tree-grid 
                e-widget.bind="TreeGrid"
                id="TreeGrid"
                e-allow-sorting="true"
                e-allow-multi-sorting="true"
                e-context-menu-settings.bind="contextMenuSettings"
                >
            </ej-tree-grid>
        </div>
    </template>
  • JS
  • export class DefaultSample {
        constructor() {
          this.contextMenuSettings = {
            showContextMenu: true,
            contextMenuItems: [
              ej.TreeGrid.ContextMenuItems.Add,
              ej.TreeGrid.ContextMenuItems.Edit,
              ej.TreeGrid.ContextMenuItems.Delete
            ]
          };
        }
    }

    The following screenshot displays the Header context menu in TreeGrid control.
    Header context menu in Aurelia TreeGrid