ASP.NET MVC Using Context Menu to Perform Actions on Grid Rows

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.1.412 version

Description

How can I use the ContextMenu to Add, Edit, or Remove rows in the Grid?

Solution

Create a Telerik UI for ASP.NET MVC ContextMenu that will have the add, edit, and delete actions whilst providing handlers.
Set the Filter of the contextmenu to the table data element (td).
Store the currently selected row through the DataBound event of the Grid.
Invoke the appropriate client-side Grid methods within the item handlers of the ContextMenu.

Index.cshtml
// Grid
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Events(e => e.DataBound("onDataBound"))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model => model.Id(p => p.ProductID))
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )
)
// Context Menu
@(Html.Kendo().ContextMenu()
    .Name("GridMenu")
    .Target("#grid")
    .Filter("td")
    .Orientation(ContextMenuOrientation.Vertical)
    .Animation(ani =>
    {
        ani.Open(op =>
        {
            op.Fade(FadeDirection.In);
            op.Duration(500);
        });
    })
    .Items(item =>
    {
        item.Add().Text("Add Row to Grid").HtmlAttributes(new { @onclick = "addItem();" });
        item.Add().Text("Edit Row to Grid").HtmlAttributes(new { @onclick = "editItem();" });
        item.Add().Text("Delete Row").HtmlAttributes(new { @onclick = "deleteItem();" });
    })
)
Script.js
    <script type="text/javascript">
        var clickedRow; //store the currently clicked row into a flag variable
        
        function onDataBound(e) {
            $("tr").off("contextmenu")
            $("tr").on("contextmenu", function (e) {
                clickedRow = e.currentTarget; //get the currently clicked row
            })
        }
        function addItem(){
            var grid = $("#grid").data("kendoGrid"); //get the reference of the grid
            grid.addRow();
        }
        function editItem() {
            var grid = $("#grid").data("kendoGrid");
            grid.editRow(clickedRow);
        }
        function deleteItem(){
            var grid = $("#grid").data("kendoGrid");
            grid.removeRow(clickedRow);
        }
    </script>

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

Using Context Menu to Perform Actions on Grid Rows

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also