Context Menu

The KendoReact Data Grid enables you to display a context menu by using the Context Menu component. The onContextMenu event is fired when grid cells are rendered and the context menu is triggered on a right click.


Cell Operations

The following example demonstrates how to copy cell's content to clipboard.

Example
View Source
Change Theme:

Row Operations

As the elements inside the Context menu are custom, they execute different actions depending on the desired functionality.

Example
View Source
Change Theme:

Multi Row Selection

The KendoReact Data Grid Context menu can be used for multi row selection.

Example
View Source
Change Theme:

Excel Export

The KendoReact Data Grid Context menu provides options for exporting its data to Excel.

To enable the Excel export:

  1. Install kendo-react-excel-export package.

    npm install @progress/kendo-react-excel-export @progress/kendo-licensing
  2. Import the ExcelExport component in your React Application.

    import { ExcelExport } from '@progress/kendo-react-excel-export';
  3. Wrap the Grid in the ExcelExport component and use the ExcelExport save function to export the Grid and save it to excel file.

The following example demonstrates the basic implementation of the Excel export functionality of the Grid.

Example
View Source
Change Theme: