Implement a Context Menu in the Grid

Environment

Product Version	3.15.0
Product	Progress® KendoReact Grid

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.

   tsx

       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.

   tsx

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

Change Theme

Theme

Loading ...