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

Use Grid with ContextMenu

Environment

ProductTelerik UI for ASP.NET MVC Grid,
Telerik UI for ASP.NET MVC ContextMenu
Product version2025.1.227

Description

How can I integrate the ContextMenu component into the Grid?

Solution

You can achieve this requirement using the following implementation:

  1. 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"))
        )
    )
  2. 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

See Also