New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Context Menu

The Telerik UI for ASP.NET Core 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 Core is disabled.

Getting Started

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

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

CommandDescription
SeparatorRenders a separator
CreateCreates a new item
EditBrings the item in edit mode
DestroyDestroys the item
SelectSelects the item
CopySelectionCopies selection
CopySelectionNoHeadersCopies selection without the headers
ReorderRowReorders the row
ExportPDFExports the Grid to PDF
ExportExcelExports the Grid to Excel
SortAscSorts the items in ascending direction
SortDescSorts the items in descending direction
PasteIndicates that the pasting functionality of the Grid is enabled

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

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

Events

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

EventDescription
OpenFires before a sub menu or the ContextMenu gets opened. You can cancel this event to prevent opening the sub menu.
CloseFires before a sub menu or the ContextMenu gets closed. You can cancel this event to prevent closure.
SelectFires when a menu item gets selected.
ActivateFires when a sub menu or the ContextMenu gets opened and its animation finished.
DeactivateFires 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
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("Grid")
        .ContextMenu(menu => menu
            .Events(ev=>ev
                .Open("openMenu")
                .Close("closeMenu"))
        )
        ...
    )

See Also