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.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("Grid")
.ContextMenu() // Enable the Context Menu for the Grid.
...
)
<kendo-grid name="grid">
<context-menu enabled="true"></context-menu>
</kendo-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();
})
)
...
)
<kendo-grid name="grid" height="550">
<context-menu>
<head>
<context-menu-item name="create"/>
<context-menu-item name="separator"/>
<context-menu-item name="sortAsc"/>
<context-menu-item name="sortDesc"/>
<context-menu-item name="separator"/>
<context-menu-item name="exportPdf" text="Generate PDF file" icon="file" /> //modify the built-in text for the comand and change the icon
<context-menu-item name="exportExcel"/>
<context-menu-item name="paste"/>
</head>
<body>
<context-menu-item name="edit" />
<context-menu-item name="destroy"/>
<context-menu-item name="separator"/>
<context-menu-item name="select"/>
<context-menu-item name="copySelection"/>
<context-menu-item name="copySelectionNoHeaders"/>
<context-menu-item name="separator"/>
<context-menu-item name="reorderRow"/>
</body>
</context-menu>
</kendo-grid>
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-grid name="grid" height="550">
<context-menu>
<head>
<context-menu-item name="create"/>
<context-menu-item name="separator"/>
<context-menu-item name="myTool" text="My Custom Tool" icon="gear" command="myToolCommand"/> <!-- "myTool" is the name of the command that will be displayed as "My Custom Tool". -->
</head>
</context-menu>
</kendo-grid>
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"))
)
...
)
<kendo-grid name="grid" height="550">
<context-menu enables="true" on-open="openMenu" on-close="closeMenu"></context-menu>
</kendo-grid>
<script>
function openMenu(){
// Handle the open event.
}
function closeMenu(){
// Handle the close event.
}
</script>