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
- Create a Telerik UI for ASP.NET Core ContextMenu that will have the
add,edit, anddeleteactions whilst providing handlers. - Set the
Filterof the contextmenu to the table data element (td). - Store the currently selected row through the
DataBoundevent of the Grid. - Invoke the appropriate client-side Grid methods within the item handlers of the ContextMenu.
// 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 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.