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" });
    })
)
JS
    function onSelect(e) {
        var row = $(e.target);
        var grid = $("#grid").data("kendoGrid");
        var item = $(e.item);
        if (item.hasClass("k-grid-delete")) {
            grid.removeRow(row);
        } else {
            grid.editRow(row);
        }
    }

To review the complete example, refer to the project on how to use the Grid with the ContextMenu component in ASP.NET MVC applications.

Use Grid with ContextMenu

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also