Implement a Context Menu in the Grid
Environment
Product Version | 3.15.0 |
Product | Progress® 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.
-
Attach the
onContextMenu
to the Grid rows and pass the row data to the context menu by utilizing therowRender
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); }
-
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.