# Context Menu

The Telerik UI for ASP.NET MVC Grid provides a built-in ContextMenu to show the user available options, such as CRUD operations, selection and export options. The ContextMenu opens when the user right-clicks on the Grid's table `body` or `head` elements.

By default, the Context Menu of the Telerik UI Grid for ASP.NET MVC is disabled.

## Getting Started

To enable a Context Menu with default commands for the Grid, use the `ContextMenu()` configuration option.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu() // Enable the Context Menu for the Grid.
        ...
    )
```

When enabled the ContextMenu shown on the Grid's table `head` element contains the `SortAsc` and `SortDesc` commands. The ContextMenu shown on the Grid's table `body` element contains the `CopySelection`, `CopySelectionNoHeaders`, `Create`, `Edit`, `Destroy`, `Select`, `ReorderRow`, `ExportPdf` and `ExportExcel` commands.

## Customization

The Context Menu provides the option to use default commands and add custom commands. In addition, you can configure the items that are displayed in the ContextMenu for the Grid's table `head` element and those in the ContextMenu for the Grid's table `body` element.

### Default Commands

The table below lists the default Context Menu commands.

| Command                  | Description                                                                                                                                                     |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Separator`              | Renders a separator                                                                                                                                             |
| `Create`                 | Creates a new item                                                                                                                                              |
| `Edit`                   | Brings the item in edit mode                                                                                                                                    |
| `Destroy`                | Destroys the item                                                                                                                                               |
| `Select`                 | Selects the item                                                                                                                                                |
| `CopySelection`          | Copies selection                                                                                                                                                |
| `CopySelectionNoHeaders` | Copies selection without the headers                                                                                                                            |
| `ReorderRow`             | Reorders the row                                                                                                                                                |
| `ExportPDF`              | Exports the Grid to PDF                                                                                                                                         |
| `ExportExcel`            | Exports the Grid to Excel                                                                                                                                       |
| `SortAsc`                | Sorts the items in ascending direction                                                                                                                          |
| `SortDesc`               | Sorts the items in descending direction                                                                                                                         |
| `Paste`                  | Indicates that the [pasting functionality](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/clipboard) of the Grid is enabled |

The following example demonstrates how you can customize the Context Menu using the default commands:

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu(menu => menu
            .Head(head => {
                head.Create();
                head.Separator();
                head.SortAsc();
                head.SortDesc();
                head.Separator();
                head.ExportPDF().Text("Generate Pdf File").Icon("file"); //modify the built-in text for the comand and change the icon
                head.ExportExcel();
                head.Paste();
            })
            .Body(body => {
                body.Edit();
                body.Destroy();
                body.Separator();
                body.Select();
                body.CopySelection();
                body.CopySelectionNoHeaders();
                body.Separator();
                body.ReorderRow();
            })
        )
        ...
    )
```

### Custom Commands

You can also register custom commands for the Context Menu. To add custom commands in the ContextMenu that opens when the user right-clicks on the Grid's table `body` element, use the `Body()` configuration. To add custom commands in the ContextMenu that opens when the user right-clicks on the Grid's table `header` element, use the `Head()` configuration.

The following example demonstrates how to implement a custom command that appears in the table header ContextMenu.

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu(menu => menu
            .Head(head => {
                head.Create();
                head.Separator();
                head.Custom("myTool").Text("My Custom Tool").Icon("gear"); // "myTool" is the name of the command that will be displayed as "My Custom Tool".
            })
        )
        ...
    )
```

```JavaScript
    kendo.ui.grid.commands["myToolCommand"] = kendo.ui.grid.GridCommand.extend({
            exec: function() {
                var that = this,
                    grid = that.grid;

                grid.saveAsPDF();
            }
        });
```

## Events

The Grid's ContextMenu allows you to subscribe to the following ContextMenu events:

| Event        | Description                                                                                                        |
| ------------ | ------------------------------------------------------------------------------------------------------------------ |
| `Open`       | Fires before a sub menu or the ContextMenu gets opened. You can cancel this event to prevent opening the sub menu. |
| `Close`      | Fires before a sub menu or the ContextMenu gets closed. You can cancel this event to prevent closure.              |
| `Select`     | Fires when a menu item gets selected.                                                                              |
| `Activate`   | Fires when a sub menu or the ContextMenu gets opened and its animation finished.                                   |
| `Deactivate` | Fires when a sub menu or the ContextMenu gets closed and its animation finished.                                   |

The following example demonstrates how to subscribe to the Grid's ContextMenu `Open` and `Close` events:

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu(menu => menu
            .Events(ev=>ev
                .Open("openMenu")
                .Close("closeMenu"))
        )
        ...
    )
```

```JavaScript
    <script>
        function openMenu(){
            // Handle the open event.
        }

        function closeMenu(){
            // Handle the close event.
        }
    </script>
```

## See Also

* [ContextMenu of the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/context-menu)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/grid)