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 at design time through Menu Options or at run time via User Interface API.

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 Menu Options.

// Set the Context Menu to display in this order
// 1. User items, 2. vendor grid items, 3. Adaptable's shipped items
adaptableOptions.menuOptions = {
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 Module (to make it easy for devs to exclude those entries they don't want to appear).

Adaptable 'Core'

The full list of Context Menu entries available in AdapTable is:

Menu EntryModuleWhen Displayed
Dashboard -> ConfigureDashboardAlways
Dashboard -> Expand / CollapseDashboardAlways
Dashboard -> Dock / FloatDashboardAlways
Dashboard -> Hide / ShowDashboardAlways
Clear AlertAlertIf any live Alerts
Clear Flashing AlertsAlertAny live Flashing 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
Show Info -> GridGrid InfoAlways
Show Info -> ColumnGrid InfoSingle column selected
Edit LayoutLayoutAlways
Clear Selected CellsLayoutAny cells selected
Grid -> Auto SizeLayoutAlways
Grid -> SelectLayoutAlways
Apply Smart EditSmart EditSingle, editable numeric column selected
Show System StatusSystem StatusAlways

Chart Plugin

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

Menu EntryModuleColumns Displayed
View as Pie ChartChartAll
View as SparklineChartSingle Numeric Column selected
Edit Sparkline ColumnSparkline CoumnSingle Sparkline Column selected

Finance Plugin

If using the Finance Plugin the following Context Menu Entry is also available:

Menu EntryDescriptionColumns Displayed
Broadcast [Instrument Name]Sends FDC3 message wrapping the InstrumentInstrument Columns

Hiding System 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 Menu 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.menuOptions = {
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 column and menu item combination whether to show it or not.

The function receives 2 arguments (Adaptable Menu Item and Menu Context) and returns a boolean:

(menuItem: AdaptableMenuItem, menuContext: MenuContext) => boolean;

And is used as follows:

// Don't show System Context Menu entries for the 'counterparty' column
// Don't show the 'Layout' or 'PieChart' menu entries - for any column
adaptableOptions.menuOptions = {
showAdaptableContextMenu: (menuItem: AdaptableMenuItem, menuContext: MenuContext) => {
if (menuContext.adaptableColumn.ColumnId === 'counterparty') {
return false;
}
if (menuItem.module === 'Layout' || menuItem.module === '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 is of type User Menu Item defined as follows:

PropertyDescription
disabledFunction to evaluate whether Menu Item is enabled
hiddenFunction to evaluate whether Menu Item is visible
iconOptional icon to show in the Menu Item
labelThe text that will appear in the Menu Item
onClickFunction to invoke when the Menu Item is clicked
subMenuItemsArray of Menu Items, enabling creation of (limitless levels of) sub menus

OnClick Function

The onClick function property is invoked by Adaptable when the menu item is selected by the user.

It takes a Menu Context object and returns void:

onClick?: (menuContext: MenuContext) => void;

Hidden Predicate

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, the User Menu Item includes a hidden function enabling devs to 'hide' Context Menu entries based on the menu context.

It takes a Menu Context object and returns a boolean:

hidden?: (menuContext: MenuContext) => boolean;

Disabled Predicate

An alternative to hiding the Menu Item altogether is to disable it in certain circumstances.

Therefore, the User Menu Item also includes a disabled function which disables Context Menu entries based on the menu context.

Again, it takes a Menu Context object and returns a boolean:

disabled?: (menuContext: MenuContext) => boolean;

Label Property / Function

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, as well as accepting a normal string value the label property can also accept a function.

It takes a Menu Context object and returns a string:

label: string | ((menuContext: MenuContext) => string);;

Example

This example shows all 4 functions at work:

adaptableOptions.menuOptions = {
contextMenuItems: [
{
label: (menuContext: MenuContext) => {
return menuContext.AdaptableApi.dashboardApi.isDashboardCollapsed()
? 'Expand Dashboard'
: 'Collapse Dashboard';
},
onClick: (menuContext: MenuContext) => {
menuContext.AdaptableApi.dashboardApi.isDashboardCollapsed()
? adaptableApi.dashboardApi.expandDashboard()
: adaptableApi.dashboardApi.collapseDashboard();
},
hidden: (menuContext: MenuContext) => {
return menuContext.Column.ColumnId == 'currency';
},
disabled: (menuContext: MenuContext) => {
return menuContext.Column.ColumnId == 'counterparty';
},
},
},
],
};

Row Grouping

AdapTable doesn't provide any context menu items for grouped rows.

caution

This means that, by default, you will not see a context menu when clicking on a Grouped Row

However the Menu Context object does include an isGroupedNode property allowing you to provide context menu items to display (or avoid) in Grouped Rows.

const adaptableOptions: AdaptableOptions = {
menuOptions: {
contextMenuItems: [
{
label: (menuContext: MenuContext) => {
return menuContext.rowNode.expanded
? 'Close Group'
: 'Expand Group';
},
onClick: (menuContext: MenuContext) => {
if (menuContext.rowNode.isExpandable()) {
menuContext.rowNode.setExpanded(!menuContext.rowNode.expanded);
}
},
hidden: (menuContext: MenuContext) => {
return menuContext.isGroupedNode!=== true;
},
},
],
},
};

Menu Context Object

Many of the functions regarding rendering, clicking and editing Menu Items use a Menu Context object.

This provides full information and the current column, cell and grid selection and is defined as follows:

PropertyDescription
adaptableApiThe Adaptable Api - included as a convenience
adaptableColumnCurrent Adaptable Column
gridCellCell that has been clicked; contains cell value
isGroupedNodeWhether current row node is grouped
isRowGroupColumnWhether current Column is Row Group
isSelectedCellWhether cell that was clicked is also currently selected
isSingleSelectedColumnWhether Column that was clicked is only column with selected cells
primaryKeyValueValue of Primary Key column in current row
rowNodeCurrent AG Grid row node
selectedCellInfoCurrently selected cells in the grid
selectedRowInfoCurrently selected rows in the grid
vendorColumnCurrent Vendor Grid Column

More Information