New to KendoReact? Start a free 30-day trial
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.
-
Attach the
onContextMenu
to the Grid rows and pass the row data to the context menu by utilizing therowRender
property.tsxrowRender = (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.
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 ...