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

Delete Multiple Grid Rows at Once

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I delete all selected rows at once in an InCell editable Grid?

Solution

The following example demonstrates how to create a custom toolbar command that removes all currently selected rows in the Grid.

Create an InCell editable the Grid, define a custom Delete selection command in its toolbar, and disable the default delete-confirmation dialog:

Razor

@(Html.Kendo().Grid<Telerik.Examples.Mvc.Models.Person>()
    .Name("persons")
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model=>model.Id(m=>m.PersonID))
            .Read(read => read.Action("GetPersons", "Home"))
            .Update(up=>up.Action("UpdatePerson", "Home"))
            .Destroy(d => d.Action("DeletePersons", "Home"))
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.PersonID);
        columns.Bound(c => c.Name);
        columns.Bound(c => c.BirthDate).Format("{0: MM/dd/yyyy}");
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
        toolbar.Custom().Text("Delete selection")
            .HtmlAttributes(new { onclick = "deleteSelection(event)" });
    })
    .Pageable()
    .Sortable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    .Editable(editing => editing.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
)

Handle the click event of the custom toolbar command and add a custom JavaScript logic that removes all currently selected Grid rows:

function deleteSelection(e) {
    // Prevent refresh.
    e.preventDefault();
    var grid = $("#persons").data("kendoGrid");
    grid.select().each(function () { // Loop through the selected rows.
        grid.removeRow($(this)); // Remove the row.
    });
}

To review the complete example, refer to the project on how to delete all selected rows at once in an InCell editable Grid in ASP.NET MVC applications.

Delete Multiple Grid Rows at Once

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also