syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Cell context menus

A cell's context menu offers actions such as Copy, Copy row, and Export for the current location. Also provide toolbar or keyboard access to frequently used features.

Markdown source Features

How it works and when to use it

contextMenuItemsCallback replaces the default menu rather than appending to it. If default actions are needed, include them in the returned list or offer separate buttons.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Default context menu

Enable the option to use the default items.

javascript
grid.contextMenu = true;

Verify the result: Right-click a cell to inspect the default actions for that cell or row.

Example 2. Business-specific menu

Menu labels describe the task; action performs the actual work.

javascript
grid.contextMenuItemsCallback = () => [{
  id: 'inspect-order', label: 'Inspect order',
  action: context => console.log(context),
}];

Verify the result: One business action replaces the default items. Read the row and column from context to open the app's detail view.

Example 3. Inspect menu configuration in advance

Read the menu for the product cell in the first displayed row.

javascript
console.log(await grid.getContextMenuItems({ rowIndex: 0, field: 'product' }));

Verify the result: Check which items appear and which are conditionally disabled. Hiding a menu does not replace server authorization checks.

Combining features and troubleshooting

Do not retain display indices for later use in custom menu actions. Read a stable row ID when starting the action.

Provide access to essential actions in environments without right-click.

Related reading