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

Using Context Menu to Perform Actions on Grid Rows


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

See Also

In this article