ContextMenu

import { openContextMenu } from 'cx/widgets';

Context menus appear at the mouse position when the user right-clicks. Use the openContextMenu helper function to create and display a context menu with minimal code.

 <div
  style={{
    padding: "40px",
    border: "1px dashed #ccc",
    textAlign: "center",
    cursor: "context-menu",
  }}
  onContextMenu={(e, instance) => {
    openContextMenu(
      e,
      <Menu>
        <MenuItem autoClose>Cut</MenuItem>
        <MenuItem autoClose>Copy</MenuItem>
        <MenuItem autoClose>Paste</MenuItem>
        <MenuItem autoClose disabled>
          Delete
        </MenuItem>
      </Menu>,
      instance,
    )
  }}
>
  Right-click here to open context menu
</div> 

Right-click here to open context menu

The openContextMenu function takes three arguments:

The mouse event (to get the click position and prevent default behavior)
The menu content (typically a Menu with MenuItem children)
The instance (accessed via e.instance) — this allows the menu to access the store and controller methods

Grid Context Menus

Context menus are commonly used with grids for row and column actions. Use onRowContextMenu for row menus and onContextMenu on column definitions for header menus.

 <Grid
  records={[
    { id: 1, name: "Item 1", value: 100 },
    { id: 2, name: "Item 2", value: 200 },
    { id: 3, name: "Item 3", value: 300 },
  ]}
  columns={[
    {
      header: "Name",
      field: "name",
    },
    {
      header: "Value",
      field: "value",
      align: "right",
    },
  ]}
  onColumnContextMenu={(e, instance) => {
    openContextMenu(
      e,
      <Menu>
        <MenuItem autoClose>Sort A-Z</MenuItem>
        <MenuItem autoClose>Sort Z-A</MenuItem>
        <hr />
        <MenuItem autoClose>Hide Column</MenuItem>
      </Menu>,
      instance,
    )
  }}
  onRowContextMenu={(e, instance) => {
    openContextMenu(
      e,
      <Menu>
        <MenuItem autoClose>Edit</MenuItem>
        <MenuItem autoClose>Duplicate</MenuItem>
        <hr />
        <MenuItem autoClose>Delete</MenuItem>
      </Menu>,
      instance,
    )
  }}
/> 
 interface PageModel {
  records: { id: number; name: string; value: number }[];
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { openContextMenu, Menu, MenuItem, Grid } from "cx/widgets"; 

Name	Value
Item 1	100
Item 2	200
Item 3	300

Use <hr /> elements to add visual separators between menu groups.

openContextMenu

openContextMenu(
  event: MouseEvent,
  content: any,
  instance?: Store | Instance,
  options?: object
): Promise

Argument	Description
`event`	The mouse event from `onContextMenu`. Used to position the menu and prevent default browser context menu.
`content`	Menu content — typically a `Menu` with `MenuItem` children.
`instance`	Instance for data binding and controller access. Access via `e.instance`.
`options`	Optional configuration passed to the dropdown.

Configuration

ContextMenu extends Dropdown with these defaults:

Property	Default	Description
`trackMouse`	`true`	Position menu at cursor location.
`dismissOnFocusOut`	`true`	Close when focus leaves the menu.
`autoFocus`	`true`	Focus the menu when opened.
`placementOrder`	`"down-right right up-right..."`	Preferred placement directions.