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

Implement a Context Menu in the Grid

Environment

Product Version3.15.0
ProductProgress® KendoReact

Description

How to add a context menu to the Grid?

Solution

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 = {
            ...trElement.props,
            onContextMenu: (e) => {
                e.preventDefault()
                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.

        <Popup
            offset={this.offset}
            show={this.state.open}
            popupClass={'popup-content'}
        >
            <Menu vertical={true} style={{ display: 'inline-block' }} onSelect={this.handleOnSelect}>
                <MenuItem text="Move Up" />
                <MenuItem text="Move Down" />
                <MenuItem text="Delete" />
            </Menu>
        </Popup>

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.

Example
View Source
Change Theme:

In this article

Not finding the help you need?