Implement a Context Menu in the Grid

Environment

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.

   Copy Code    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.

   Copy Code    <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.