Context Menu

The Context Menu is accessed by right-clicking any cell in the grid.

caution

The context menu options will vary according to what other cells are selected.

Developers can add their own items to the Context Menu through User Interface Predefined Config Additionally, they can choose not to display some (or all) of the shipped Context Menu items through the showAdaptableContextMenu property / function.

tip

If you are using a trackpad you might not be able to access the ag-Grid context menu (which AdapTable uses when ag-Grid is the vendor grid); if that is the case then set allowContextMenuWithControlKey to true in GridOptions.

Context Menu Entries

There are 3 types of menu entries that can appear in the Context Menu:

Vendor Grid Context Menu Entries - shipped by the underlying Vendor Grid
System Context Menu Entries - shipped by AdapTable (which you can choose to hide)
User Context Menu Entries - provided by developers at run-time (with functions available to control where and when they appear)

Items Order

The default order for displaying the 3 sections in the Context Menu is: 'vendor', 'adaptable', 'user'.

However this can easily be changed via the contextMenuOrder property in User Interface Options.

// Set the Context Menu to display in this order
// 1. User items, 2. vendor grid items, 3. Adaptable's shipped items
adaptableOptions.userInterfaceOptions = {
  contextMenuOrder: ['user', 'vendor', 'adaptable'],
};

caution

When setting this property, ensure to include all 3 values, as missing entries will be absent from the menu

System Context Menu Entries

AdapTable, by default, includes a number of entries in the Context Menu.

tip

These entries will vary depending on which column the click occurs, which other cells (if any) are selected and in which column(s).

Each entry is associated with a different AdapTableFunction (to make it easy for devs to exclude those entries they dont want to appear).

The full list (as of Version 7) is:

Menu Entry	AdaptableFunction	When Displayed
Clear Alert	Alert	If any live Alerts
Apply Bulk Update	Bulk Update	Single, editable column selected
See Cell Summary	Cell Summary	Any cells selected
Export Selected Cells	Export	Any cells selected
Filter on Cell Value(s)	Filter	Single, editable column selected
Edit Gradient Column	Gradient Column	Single Gradient Column selected
Show Info - Grid	Grid Info	Always
Show Info - Column	Grid Info	Single column selected
Edit Layout	Layout	Always
Edit Percent Bar	Percent Bar	Single Percent Bar Column selected
Apply Smart Edit	Smart Edit	Single, editable numeric column selected
Show System Status	System Status	Always
Clear Updated Rows	Updated Row	Any live Updated Rows

If running the Chart Plugin the following Context Menu Entries are also available:

Menu Entry	AdaptableFunction	Columns Displayed
View as Pie Chart	Chart	All
View as Sparkline	Chart	Single Numeric Column selected
Edit Sparkline Column	Sparkline Coumn	Single Sparkline Column selected

Hiding System Context Menu Entries

Developers can, at design-time, choose not to display some (or all) of the shipped Context Menu entries.

This can be done in 2 ways - both via the showAdaptableContextMenu property in User Interface Options:

Boolean Value
Simply provide a value of false (the default is true) when setting the property.
// Hide the Context Menu in ALL circumstances
adaptableOptions.userInterfaceOptions = {
showAdaptableContextMenu: false
};
caution
This will hide all AdapTable Context Menu items for all columns
Custom Function Implementation
Provide a custom implementation for the function allowing you to choose for each context and menu item combination whether to show it or not.
The function recieves 2 arguments (Adaptable Menu Item and Menu Info) and returns a boolean.
// Don't show System Context Menu entries for the 'counterparty' column
// Don't show the 'Layout' or 'PieChart' menu entries - for any column
adaptableOptions.userInterfaceOptions = {
showAdaptableContextMenu: (menuItem: AdaptableMenuItem, menuInfo: MenuInfo) => {
if (menuInfo.Column.ColumnId === 'counterparty') {
return false;
}
if (menuItem.FunctionName === 'Layout' || menuItem.FunctionName === 'PieChart') {
return false;
}
return true;
},
};

User Context Menu Entries

Developers can add their own custom entries to the Context Menu at design-time.

Each User Context Menu entry needs also to include the JavaScript function that should be invoked by AdapTable when the menu entry is selected at run-time.

As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

Provide a custom, named implementation of the UserMenuItemClickedFunction in the User Functions section of Adaptable Options.
Reference that function by name in the User Interface section of Predefined Config.

// Create 2 User Menu Items - providing 2 properties:
// a. a Label - that will appear in the Menu Entry
// b. the name of the function to invoke when the entry is clicked
let demoConfig: PredefinedConfig = {
    UserInterface: {
    ContextMenuItems: [
      {
        Label: 'Collapse Dashboard',
        UserMenuItemClickedFunction: 'collapseDashboard'
      },
      {
        Label: 'Clear Column Filters',
        UserMenuItemClickedFunction: 'clearFilters'
      },
    ],
  },
};

// Provide 2 User Menu Item Functions
// a. Collapse the Dashboard - using the Dashboard API
// b. Clear all the Column Filters - using the Column Filter API
// Note that that type of the UserFunction is 'UserMenuItemClickedFunction'
// and that the name matches the one provided in Predefined Config above
adaptableOptions.userFunctions=[
{
    type: 'UserMenuItemClickedFunction',
    name: 'collapseDashboard',
    handler(menuInfo) {
        menuInfo.AdaptableApi.dashboardApi.collapseDashboard();
    },
},
{
    type: 'UserMenuItemClickedFunction',
    name: 'clearFilters',
    handler(menuInfo) {
        menuInfo.AdaptableApi.filterApi.clearAllColumnFilter();
    }
},
]

Hiding User Context Menu Entries

It might not always make sense for a User Context Menu entry to appear (e.g. it might be applicable only to numeric columns).

For this reason, AdapTable provides a function enabling devs to 'hide' Context Menu entries based on the current context.

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

This is done in a similar 2 steps to creating them:

Provide a custom, named implementation of the UserMenuItemShowPredicate in the User Functions section of Adaptable Options.
Reference that predicate by name in the User Interface section of Predefined Config.

// Create a User Menu Item to Sort a column providing 2 User Functions
// a. 'UserMenuItemClickedFunction' - will be invoked when the Menu Entry is clicked
// b. 'UserMenuItemShowPredicate' - will be invoked when the Menu displays
let demoConfig: PredefinedConfig = {
    UserInterface: {
    ContextMenuItems: [
    {
        Label: 'Sort Column',
        Icon: '<img width="15" height="15" src="../../images/sort.png">',
        UserMenuItemClickedFunction: 'sortColumn',
        UserMenuItemShowPredicate: 'isSortable',
      },
    ],
  },
};

// Provide 2 User Functions
// Both rely on the 'MenuInfo' object to retrieve details about the current column
// a. 'UserMenuItemClickedFunction' - to sort the column (using Grid API)
// b. 'UserMenuItemShowPredicate' - to only display the entry for sortable columns
// Note that that both the type of and name of each UserFunction matches
// what is provided in Predefined Config above
adaptableOptions.userFunctions=[
{
    type: 'UserMenuItemClickedFunction',
    name: 'sortColumn',
    handler(menuInfo) {
        const columnSort: ColumnSort = {
            ColumnId: menuInfo.Column.ColumnId,
            SortOrder: 'Asc',
        };
         menuInfo.AdaptableApi.gridApi.setColumnSorts([columnSort])
    },
},
{
    type: 'UserMenuItemShowPredicate',
    name: 'isSortable',
    handler(menuInfo) {
        return menuInfo.Column.Sortable;
    },
},
]

Setting User Context Menu Label

Occasionally you might want the label of the User Menu Entry to vary depending on the state of your grid or other factors.

For this reason, AdapTable provides a function enabling devs to change the label of a Menu Entry based on the current context.

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

This is done in a similar 2 steps to creating them:

Provide a custom, named implementation of the UserMenuItemLabelFunction in the User Functions section of Adaptable Options.
Reference that predicate by name in the User Interface section of Predefined Config.

tip

If the function returns an empty string then AdapTable will revert to using the value of the Label property

// Create the Menu Item referencing the 'setLabel' UserMenuItemLabelFunction
// Note the Label value of 'Sort Column' will be used by AdapTable
// if the UserMenuItemLabelFunction returns an empty string
let demoConfig: PredefinedConfig = {
    UserInterface: {
    ContextMenuItems: [
    {
        Label: 'Sort Column',
        Icon: '<img width="15" height="15" src="../../images/sort.png">',
        UserMenuItemClickedFunction: 'sortColumn',
        UserMenuItemShowPredicate: 'isSortable',
        UserMenuItemLabelFunction: 'setLabel',
      },
    ],
  },
};

// Provide 3 User Functions
// All rely on the 'MenuInfo' object to retrieve details about the current column
// a. 'UserMenuItemClickedFunction' - to sort the column (using Grid API)
// b. 'UserMenuItemShowPredicate' - to only display the entry for sortable columns
// c. 'UserMenuItemLabelFunction' to set label text based on whether column is sorted
// Note that that both the type of and name of each UserFunction matches
// what is provided in Predefined Config above
adaptableOptions.userFunctions=[
{
    type: 'UserMenuItemClickedFunction',
    name: 'sortColumn',
    handler(menuInfo) {
        const columnSorts = menuInfo.AdaptableApi.gridApi.getColumnSorts();
        if (columnSorts.find(cs => cs.ColumnId == menuInfo.Column.ColumnId)) {
            let customSort: ColumnSort = {
              ColumnId: menuInfo.Column.ColumnId,
              SortOrder: 'Asc',
            };
            menuInfo.AdaptableApi.gridApi.setColumnSorts([customSort]);
          } else {
            menuInfo.AdaptableApi.gridApi.setColumnSorts([]);
          }
        },
},
{
    type: 'UserMenuItemShowPredicate',
    name: 'isSortable',
    handler(menuInfo) {
        return menuInfo.Column.Sortable;
    },
},
{
    type: 'UserMenuItemLabelFunction',
    name: 'setSortColumnLabel',
    handler(menuInfo) {
        const columnSorts = menuInfo.AdaptableApi.gridApi.getColumnSorts();
        return columnSorts.find(cs => cs.ColumnId == menuInfo.Column.ColumnId)
            ? 'Unsort column'
            : '';
        },
    },
]

caution

tip

Context Menu Entries#

Items Order#

caution

System Context Menu Entries#

tip

Hiding System Context Menu Entries#

caution

User Context Menu Entries#

note

Hiding User Context Menu Entries#

note

Setting User Context Menu Label#

note

tip

More Information#

Context Menu Entries

Items Order

System Context Menu Entries

Hiding System Context Menu Entries

User Context Menu Entries

Hiding User Context Menu Entries

Setting User Context Menu Label

More Information