New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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.

    @(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 of the Grid is enabled

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

    @(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.

    @(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". 
            })
        ) 
        ...
    )
    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:

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu(menu => menu
            .Events(ev=>ev
                .Open("openMenu")
                .Close("closeMenu"))
        ) 
        ...
    )
    <script>
        function openMenu(){
            // Handle the open event.
        }

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

See Also

In this article