Context Menu

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

The built-in context menu of the Grid allows you to control the rows selection and the column sorting. To enable it you should:

1. Set the contextMenu prop of the Grid to true to enable the ContextMenu component.

2. Enable the selectable prop allow rows selection.

3. Set the sortable prop to true to allow column sorting, and take care of the built-in sort state.

4. (Optional) Add a column with columnType="checkbox" to render a checkbox selection column.

jsx

<Grid
    contextMenu={true}
    sortable={true}
    selectable={{ enabled: true }}
>
    <Column filterable={false} columnType="checkbox" width={50} />

You can see the default Context menu of the Grid in action in the demo below.

Change Theme

Theme

Loading ...

Cell Operations

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

Change Theme

Theme

Loading ...

Row Operations

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

Change Theme

Theme

Loading ...

Multi Row Selection

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

Change Theme

Theme

Loading ...

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.

   sh

   npm install @progress/kendo-react-excel-export @progress/kendo-licensing

2. Import the ExcelExport component in your React Application.

   jsx

   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.

Change Theme

Theme

Loading ...

Suggested Links

• React Data Grid Editing
• React Data Grid Excel Export
• React Data Grid PDF Export
• API Reference of the Grid
• React Data Grid High-Level Overview