New to Telerik UI for ASP.NET Core? Download free 30-day trial

Using Context Menu to Perform Actions on Grid Rows


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


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


  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.
// 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 =>
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Events(e => e.DataBound("onDataBound"))
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .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
    .Animation(ani =>
        ani.Open(op =>
    .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 type="text/javascript">
        var clickedRow; //store the currently clicked row into a flag variable

        function onDataBound(e) {
            $("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
        function editItem() {
            var grid = $("#grid").data("kendoGrid");
        function deleteItem(){
            var grid = $("#grid").data("kendoGrid");

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

More ASP.NET Core Grid Resources

See Also

In this article