Using Context Menu to Perform Actions on Grid Rows

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core 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

1. Create a Telerik UI for ASP.NET Core ContextMenu that will have the add, edit, and delete actions whilst providing handlers.
2. Set the Filter of the contextmenu to the table data element (td).
3. Store the currently selected row through the DataBound event of the Grid.
4. 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.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Using Context Menu to Perform Actions on Grid Rows
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base