Configuring the Context Menu

AdapTable Version:

Framework:

Summary

Developers have full control over the Context Menu including the ability to:
- reorder Menu Items
- restructure Menu Items
- remove Menu Items

The Context Menu can be fully configured at design-time to meet users' requirements.

This is done via the customContextMenu function property in Context Menu Options.

The property is a function that receives in its context all the information about the AG Grid and AdapTable Context Menu items and structure, to facilitate full menu manipulation.

Deep Dive

Configuring the Context Menu using the customContextMenu property

The customContextMenu property is a function which:

receives a CustomContextMenuContext object
returns a collection of CustomContextMenuItem objects:

customContextMenu?: (menuContext: CustomContextMenuContext<TData>) => CustomContextMenuItem[];

CustomContextMenuContext

The CustomContextMenuContext which the function receives, contains 4 collections of default menu items & structures:

Property	Description
defaultAdaptableMenuItems	Flat list of all available AdapTable Menu Items
defaultAdaptableMenuStructure	Default structure of Adaptable Menu Items
defaultAgGridMenuItems	Flat list of all available AG Grid Menu Items
defaultAgGridMenuStructure	Default structure of AG Grid Menu Items
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

And it extends the ContextMenuContext object which contains a number of useful properties:

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

CustomContextMenuItem

The CustomContextMenuItem which the function returns is slightly more complicated as it can be formed of many different objects, to enable a rich menu experience:

export type CustomContextMenuItem =
  | AgGridMenuItem<AgGridContextMenuItemType>
  | AdaptableSystemMenuItem<AdaptableContextMenuItemName>
  | UserContextMenuItem
  | '-'
  | {
      menuType: 'Group';
      label: string;
      subMenuItems: CustomContextMenuItem[];
      disabled?: boolean;
      icon?: AdaptableIcon;
    };

As can be seen it can include 3 types of Menu Items (as well as a separator):

AG Grid Menu Item
AdapTable System Context Menu Item
User Context Menu Item

AG Grid Menu Item

The AG Grid Menu Item contains a couple of properties

Property	Description
menuType	Type of Menu - always 'AgGrid'
name	Name of the Menu Type

AdapTable System Context Menu Item

The AdapTable System Context Menu Item has a single MenuType property...

Property	Description
menuType	Type of Menu - always 'Adaptable'

...but also extends the more verbose AdapTable Menu Item object which contains these properties:

Property	Description
category	Category of Adaptable Menu Item: Module, General, Group or CustomSettingsPanel
icon	Icon to display in Menu Item
isVisible	Whether menu item is visible
label	Text that appears in the menu
name	Unique name for the Menu Item
onClick	Function to invoke when (custom) menu item is clicked
subItems	Sub Menu Items to display

User Context Menu Item

The User Context Menu Item - used for providing bespoke Menu Items - is defined as follows:

Property	Description
disabled	Whether menu item is disabled
hidden	Whether menu item is hidden
icon	Optional icon to display
label	Text to appear in the Menu Item
menuType	Type of Menu - always 'User'
onClick	Function invoked when the Menu Item is clicked
subMenuItems	Array of Menu Items, enabling limitless levels of menus

The default order of the Items in the Context Menu is AG Grid Menu items first, then AdapTable Menu items.

But this can be changed by providing a custom implementation of customContextMenu.

This example shows how to reorder the Menu Items in the Context Menu
When opening the Context Menu in the Name column, the order is: AG Grid Menu Items, Open Settings Panel, other AdapTable Menu Items
When opening the Context Menu in all other columns, the order is: Open Settings Panel, AG Grid Menu Items, other AdapTable Menu Items

Expand to see the Menu Options configuration

contextMenuOptions: {
  customContextMenu: (context: CustomContextMenuContext) => {
    const {
      defaultAgGridMenuStructure,
      defaultAdaptableMenuStructure,
      adaptableColumn,
    } = context;
    const openSettingsPanelMenuItem = defaultAdaptableMenuStructure.find(
      (item) => item !== '-' && item.name === 'settings-panel-open'
    );
    const otherAdaptableMenuItems = defaultAdaptableMenuStructure.filter(
      (item) => item === '-' || item.name !== 'settings-panel-open'
    );
    if (adaptableColumn.columnId === 'name') {
      return [
        openSettingsPanelMenuItem,
        '-',
        ...defaultAgGridMenuStructure,
        '-',
        ...otherAdaptableMenuItems,
      ];
    }
    return [
      ...defaultAgGridMenuStructure,
      '-',
      openSettingsPanelMenuItem,
      '-',
      ...otherAdaptableMenuItems,
    ];
  },
},

Try It Out

Open the Context Menu for a cell in the Name Column and see how it differs to opening the Context Menu in other Columns

The customContextMenu property can also be used restructure the Menu Items.

Hint

This is most typically done to meet particular business requirements

For instance, menus can be grouped or nested differently to the default structure provided by AdapTable.

This example shows how to restructure the Menu Items in the Context Menu
In each Context Menu, all the AG Grid items have been grouped together into one Menu Item (and placed first)
Additionally, some of the AdapTable items have been grouped together in 'Info' and 'Actions' sub menus

Expand to see the Menu Options configuration

contextMenuOptions: {
  customContextMenu: (context: CustomContextMenuContext) => {
    const {defaultAgGridMenuItems, defaultAdaptableMenuItems} = context;

    const infoItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
      [];
    const actionsItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
      [];
    const otherItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
      [];
    defaultAdaptableMenuItems.forEach(item => {
      if (item.category === 'ColumnInfo' || item.category === 'GridInfo') {
        infoItems.push(item);
      } else if (
        item.label === 'Show System Status' ||
        item.label === 'See Cell Summary'
      ) {
        actionsItems.push(item);
      } else {
        otherItems.push(item);
      }
    });

    return [
      {
        menuType: 'Group',
        label: 'AG Grid Actions',
        subMenuItems: defaultAgGridMenuItems,
      },
      '-',
      {
        menuType: 'Group',
        label: 'Info',
        subMenuItems: infoItems,
      },
      {
        menuType: 'Group',
        label: 'Actions',
        subMenuItems: actionsItems,
      },
      '-',
      ...otherItems,
    ];
  },
},

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Context Menu - Restructuring',
  contextMenuOptions: {
    customContextMenu: (context: CustomContextMenuContext) => {
      const {defaultAgGridMenuItems, defaultAdaptableMenuItems} = context;

      const infoItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
        [];
      const actionsItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
        [];
      const otherItems: AdaptableSystemContextMenuItem<AdaptableContextMenuItemName>[] =
        [];
      defaultAdaptableMenuItems.forEach(item => {
        if (item.category === 'ColumnInfo' || item.category === 'GridInfo') {
          infoItems.push(item);
        } else if (
          item.label === 'Show System Status' ||
          item.label === 'See Cell Summary'
        ) {
          actionsItems.push(item);
        } else {
          otherItems.push(item);
        }
      });

      return [
        {
          menuType: 'Group',
          label: 'AG Grid Actions',
          subMenuItems: defaultAgGridMenuItems,
        },
        '-',
        {
          menuType: 'Group',
          label: 'Info',
          subMenuItems: infoItems,
        },
        {
          menuType: 'Group',
          label: 'Actions',
          subMenuItems: actionsItems,
        },
        '-',
        ...otherItems,
      ];
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [{Name: 'Demo', Toolbars: ['SystemStatus']}],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

The customContextMenu property can also be used to remove some Menu Items from the Context Menu.

Removing Menu Items can be done in 2 ways:

Hiding an entire section of the Context Menu (either AdapTable or AG Grid)
Hiding some Context Menu Items

This example hides specific Menu items from some Context Menus:
- Name column displays only the Settings Panel & Layout related items
- Github Stars displays only the AdapTable items
- Github Watchers displays only the AG Grid items
- For all other columns, the default Context Menu items are displayed

Expand to see the Menu Options configuration

contextMenuOptions: {
  customContextMenu: (context: CustomContextMenuContext) => {
    const {
      defaultAgGridMenuItems,
      defaultAdaptableMenuItems,
      adaptableColumn,
    } = context;
    if (adaptableColumn.columnId === 'name') {
      return defaultAdaptableMenuItems.filter(
        item => item.category === 'SettingsPanel' || item.category === 'Layout'
      );
    }
    if (adaptableColumn.columnId === 'github_stars') {
      return defaultAdaptableMenuItems;
    }
    if (adaptableColumn.columnId === 'github_watchers') {
      return defaultAgGridMenuItems;
    }
    return [...defaultAgGridMenuItems, '-', ...defaultAdaptableMenuItems];
  },
},

Row-Grouped Columns

The ContextMenuObject used in the Context Menu includes an isGroupedNode property.

This can be used to provide specific Column Menu Items for Row-Grouped Columns.

This example hides all AG Grid Menu items in Row Grouped Column's Context Menu other than 2: Expand All Row Groups and Collapse All Row Groups

Expand to see the Menu Options configuration

contextMenuOptions: {
  customContextMenu: (context: CustomContextMenuContext) => {
    const {defaultAgGridMenuStructure} = context;
    if (context.isRowGroupColumn) {
      const expandAllMenuItem = defaultAgGridMenuStructure.find(
        item => item.menuType === 'AgGrid' && item.name === 'expandAll'
      );
      const contractAllMenuItem = defaultAgGridMenuStructure.find(
        item => item.menuType === 'AgGrid' && item.name === 'contractAll'
      );
      return [
        expandAllMenuItem,
        contractAllMenuItem,
      ] as any;
    } else {
      return [
        ...context.defaultAgGridMenuStructure,
        '-',
        ...context.defaultAdaptableMenuStructure,
      ];
    }
  },
},

PreviousContext Menu NextCustom Context Menu Items

Framework:

Configuring the Context Menu

Summary

Deep Dive

Configuring the Context Menu using the customContextMenu property

Reordering Menu Items

Expand to see the Menu Options configuration

Restructuring Menu Items

Hint

Expand to see the Menu Options configuration

Removing Menu Items

Expand to see the Menu Options configuration

Row-Grouped Columns

Expand to see the Menu Options configuration