# Context Menu

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

<CtaPanelOverview></CtaPanelOverview>

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`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#contextMenu) prop of the Grid to `true` to enable the ContextMenu component.

2. Enable the [`selectable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#selectable) prop allow rows selection.

3. (Optional) Set the [`sortable`](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/context-menu-basic/func/source.txt)

## Cell Operations

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



[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/context-menu-copy-cell/func/source.txt)

## Row Operations

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

The following example demonstrates context menu row operations, including custom actions triggered from a right-click menu on Grid rows.



[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/context-menu-row-operations/func/source.txt)

## Multi Row Selection

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

The following example demonstrates how to use the context menu to select multiple rows, including select all and deselect all operations.



[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/context-menu-multirow-selection/func/source.txt)

## Excel Export

The KendoReact 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 i @progress/kendo-react-excel-export
   ```

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.



[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/context-menu-excel-export/func/source.txt)

## Suggested Links

* [React Grid Excel Export](https://www.telerik.com/kendo-react-ui/components/grid/excel-export)
* [React Grid PDF Export](https://www.telerik.com/kendo-react-ui/components/grid/pdf-export)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)

<div data-component="StartKendoReactFreeSection"></div>