• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Implement a Context Menu in the Grid


Product Version3.15.0
ProductProgress® KendoReact


How to add a context menu to the Grid?


You can implement a context menu in the Grid by using the KendoReact Popup component and then and display it on a right click.

  1. Attach the onContextMenu to the Grid rows and pass the row data to the context menu by utilizing the rowRender property.

        rowRender = (trElement, dataItem) => {
            const trProps = {
            onContextMenu: (e) => {
                this.handleContextMenuOpen(e, dataItem.dataItem)
            return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
  2. Define the desired content of the context menu in the Popup. As the elements inside the Popup are custom, they execute different actions depending on the desired functionality.

            <Menu vertical={true} style={{ display: 'inline-block' }} onSelect={this.handleOnSelect}>
                <MenuItem text="Move Up" />
                <MenuItem text="Move Down" />
                <MenuItem text="Delete" />

The following example demonstrates the full implementation of the suggested approach. The context menu provides options for moving the rows up and down, and for deleting an item.

View Source
Change Theme:

In this article

Not finding the help you need?