Creating Custom Context Menu Items

Summary

Bespoke Menu Items can be added to the Context Menu by developers

Developers can provide bespoke menu items in the Context Menu.

This is done using the customContextMenu callback in Context Menu Options.

Each item is a UserContextMenuItem with properties such as label, icon, hidden, disabled, onClick, and subMenuItems.

Deep Dive

Anatomy of a Custom Context Menu Item

The key object is UserContextMenuItem:

Property	Type	Description
disabled	`boolean`	Whether menu item is disabled
frameworkComponent	`MenuItemFrameworkComponent<ContextMenuContext>`	Optional Framework Component (React, Angular or Vue) used to render the content of this menu item.
hidden	`boolean`	Whether menu item is hidden
icon	`AdaptableIcon`	Optional icon to display
label	`string`	Text to appear in the Menu Item
menuItemParams	`Record<string, unknown>`	Extra parameters passed through to the Framework Component (alongside `adaptableApi` and `menuContext`).
menuType	`'User'`	Type of Menu - always 'User'
onClick	`(menuContext:ContextMenuContext) => void`	Function invoked when the Menu Item is clicked
subMenuItems	`CustomContextMenuItem[]`	Array of Menu Items, enabling limitless levels of menus

The onClick handler receives ContextMenuContext:

Property	Type	Description
adaptableColumn	`AdaptableColumn<TData>`	Current AdapTable Column
agGridColumn	`Column`	Current AG Grid Column
gridCell	`GridCell<TData>`	Cell that has been clicked; contains cell value
isGroupedNode	`boolean`	Whether current AG Grid row node is grouped
isRowGroupColumn	`boolean`	Whether current Column is Row Grouped
isSelectedCell	`boolean`	Whether cell that was clicked is also currently selected
isSelectedRow	`boolean`	Whether cell that was clicked is in a Row that is currently selected
isSingleSelectedCell	`boolean`	Whether the clicked cell is the only selected cell
isSingleSelectedColumn	`boolean`	Whether Column that was clicked is only column with selected cells
primaryKeyValue	`any`	Value of Primary Key column in current row
rowNode	`IRowNode<TData>`	Current AG Grid row node
selectedCellInfo	`SelectedCellInfo<TData>`	Currently selected cells in the grid
selectedRowInfo	`SelectedRowInfo<TData>`	Currently selected rows in the grid
adaptableContext	`any`	Custom application Context provided in `AdaptableOptions.adaptableContext`

Developer Guide

Providing a Standard Custom Context Menu Item

A few steps are required to define a standard Context Menu item (no frameworkComponent):

menuType: 'User',
label: (menuContext: ContextMenuContext) => {
  return menuContext.adaptableApi.dashboardApi.isDashboardCollapsed()
    ? 'Expand Dashboard'
    : 'Collapse Dashboard';
},

Provide a Label and Menu Type

The menuType is always 'User'.

The label property provides the menu item text. It can be a string or a function that receives ContextMenuContext and returns a string.

onClick: (menuContext: ContextMenuContext) => {
  menuContext.adaptableApi.dashboardApi.isDashboardCollapsed()
    ? menuContext.adaptableApi.dashboardApi.expandDashboard()
    : menuContext.adaptableApi.dashboardApi.collapseDashboard();
},

Supply an onClick function

The onClick function runs when the user selects the item. It receives ContextMenuContext and returns void.

hidden: menuContext.isRowGroupColumn,
disabled: menuContext.adaptableColumn?.dataType == 'date',

Specify whether the Menu Item should be Hidden or Disabled

Use hidden and disabled to control visibility and whether the item can be selected.

icon: {
  name: 'theme',
},

Provide an Icon

Supply an AdaptableIcon on the icon property.

Find Out More

See Guide to Adaptable Icons for full details on icons

subMenuItems: [
  {
    menuType: 'User',
    label: 'Hide Dashboard',
    onClick: (menuContext: ContextMenuContext) => {
      menuContext.adaptableApi.dashboardApi.hideDashboard();
    },
  },
  {
    menuType: 'User',
    label: 'Float Dashboard',
    onClick: (menuContext: ContextMenuContext) => {
      menuContext.adaptableApi.dashboardApi.floatDashboard();
    },
  },
],

Add Sub Menu Items (if required)

Each menu item can include subMenuItems for nested menus. Each sub-item is another UserContextMenuItem.

When the Dashboard is visible, use a Dashboard parent with Hide and Float sub items. When it is hidden (dashboardApi.isDashboardHidden()), the demo uses a single Show Dashboard item that calls showDashboard().

contextMenuOptions: {
  customContextMenu: (context: CustomContextMenuContext) => {
    return [
      changeThemeMenuItem,
      dashboardMenuItem,
      '-',
      ...context.defaultAgGridMenuStructure,
      '-',
      ...context.defaultAdaptableMenuStructure,
    ];
  },
},

Return the items from customContextMenu

The customContextMenu callback receives AG Grid and AdapTable menu structures on context. Build items such as changeThemeMenuItem and dashboardMenuItem, then place them where you want in the Context Menu (often before the default blocks).

Show Dark Theme / Show Light Theme — single action at the top of the Context Menu; hidden on row-group columns; disabled for date columns
Dashboard — Show Dashboard when the Dashboard is hidden; otherwise a sub menu with Hide and Float
Default AG Grid and AdapTable menu items remain below

import {
  AdaptableOptions,
  CustomContextMenuContext,
  UserContextMenuItem,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Context Menu Items',
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {
        defaultAgGridMenuStructure,
        defaultAdaptableMenuStructure,
        isRowGroupColumn,
        adaptableColumn,
        adaptableApi,
      } = context;

      const changeThemeMenuItem: UserContextMenuItem = {
        menuType: 'User',
        label:
          adaptableApi.themeApi.getCurrentTheme() == 'light'
            ? 'Show Dark Theme'
            : 'Show Light Theme',
        icon: {
          name: 'theme',
        },
        hidden: isRowGroupColumn,
        disabled: adaptableColumn?.dataType == 'date',
        onClick: () =>
          adaptableApi.themeApi.getCurrentTheme() == 'light'
            ? adaptableApi.themeApi.loadDarkTheme()
            : adaptableApi.themeApi.loadLightTheme(),
      };

      const dashboardMenuItem: UserContextMenuItem =
        adaptableApi.dashboardApi.isDashboardHidden()
          ? {
              menuType: 'User',
              label: 'Show Dashboard',
              onClick: () => adaptableApi.dashboardApi.showDashboard(),
            }
          : {
              menuType: 'User',
              label: 'Dashboard',
              subMenuItems: [
                {
                  menuType: 'User',
                  label: 'Hide Dashboard',
                  onClick: menuContext =>
                    menuContext.adaptableApi.dashboardApi.hideDashboard(),
                },
                {
                  menuType: 'User',
                  label: 'Float Dashboard',
                  onClick: menuContext =>
                    menuContext.adaptableApi.dashboardApi.floatDashboard(),
                },
              ],
            };

      return [
        changeThemeMenuItem,
        dashboardMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...defaultAdaptableMenuStructure,
      ];
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['SystemStatus', 'Export']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Grouped Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'open_issues_count',
            'week_issue_change',
            'updated_at',
            'license',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'description',
          ],
          AutoSizeColumns: true,
          Name: 'Grouped Layout',
          RowGroupValues: {
            RowGroupDefaultBehavior: 'collapsed',
            GroupKeys: [
              {
                RowGroupedColumns: ['language'],
                ExceptionGroupKeys: [['JavaScript']],
              },
            ],
          },
          RowGroupedColumns: ['language'],
        },
      ],
    },
  },
};

PreviousConfiguring Context Menu NextDefault Menu Structure