New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Use Grid with ContextMenu
Environment
Product | Telerik UI for ASP.NET MVC Grid, Telerik UI for ASP.NET MVC ContextMenu |
Product version | 2025.1.227 |
Description
How can I integrate the ContextMenu component into the Grid?
Solution
You can achieve this requirement using the following implementation:
-
Define an editable Grid:
Razor@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.GridContextMenu.Models.Order>() .Name("grid") .Columns(columns => { columns.Bound(p => p.OrderID); columns.ForeignKey(p => p.EmployeeID, (System.Collections.IEnumerable) ViewData["employees"], "EmployeeID", "Name"); columns.Bound(p => p.OrderDescription); columns.Bound(p => p.OrderDate).Format("{0:d}"); columns.Bound(p => p.OrderTotal).Format("{0:c}"); columns.Bound(p => p.IsCompleted); columns.Command(c => { c.Edit(); c.Destroy(); }); }) .ToolBar(toolBar => toolBar.Create()) .Editable(editable => editable.Mode(GridEditMode.InLine)) .Pageable() .Sortable() .Scrollable() .Filterable() .DataSource(dataSource => dataSource .Ajax() .ServerOperation(false) .Model(model => { model.Id(p => p.OrderID); model.Field(p => p.OrderID).Editable(false); }) .Create(create => create.Action("Create", "Home").Data("sendCulture")) .Destroy(destroy => destroy.Action("Delete", "Home").Data("sendCulture")) .Read(read => read.Action("Read", "Home").Data("sendCulture")) .Update(update => update.Action("Update", "Home").Data("sendCulture")) ) )
-
Define the ContextMenu component and handle its
Select
event to handle the selected action:Razor@(Html.Kendo().ContextMenu() .Name("contextMenu") .Target("#grid table") .Filter("tr") .Events(e => e.Select("onSelect")) .Items(items => { items.Add() .Text("Delete").HtmlAttributes(new { @class = "k-grid-delete" }); items.Add() .Text("Edit").HtmlAttributes(new { @class = "k-grid-edit" }); }) )
To review the complete example, refer to the project on how to use the Grid with the ContextMenu component in ASP.NET MVC applications.
More ASP.NET MVC Grid Resources
- ASP.NET MVC Grid Documentation
- ASP.NET MVC Grid Demos
- ASP.NET MVC Grid Product Page
- Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET MVC Forums