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 EntryAdaptableFunctionWhen Displayed
Clear AlertAlertIf any live Alerts
Apply Bulk UpdateBulk UpdateSingle, editable column selected
See Cell SummaryCell SummaryAny cells selected
Export Selected CellsExportAny cells selected
Filter on Cell Value(s)FilterSingle, editable column selected
Edit Gradient ColumnGradient ColumnSingle Gradient Column selected
Show Info - GridGrid InfoAlways
Show Info - ColumnGrid InfoSingle column selected
Edit LayoutLayoutAlways
Edit Percent BarPercent BarSingle Percent Bar Column selected
Apply Smart EditSmart EditSingle, editable numeric column selected
Show System StatusSystem StatusAlways
Clear Updated RowsUpdated RowAny live Updated Rows

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

Menu EntryAdaptableFunctionColumns Displayed
View as Pie ChartChartAll
View as SparklineChartSingle Numeric Column selected
Edit Sparkline ColumnSparkline CoumnSingle 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)

  1. Provide a custom, named implementation of the UserMenuItemClickedFunction in the User Functions section of Adaptable Options.

  2. 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:

  1. Provide a custom, named implementation of the UserMenuItemShowPredicate in the User Functions section of Adaptable Options.

  2. 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:

  1. Provide a custom, named implementation of the UserMenuItemLabelFunction in the User Functions section of Adaptable Options.

  2. 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'
: '';
},
},
]

More Information