Removing a Selected Row from KENDO Grid

In this blog you will learn how to remove a selected row from KENDO Grid.

In this blog, we will demonstrate how to remove multiple grid items when a button is clicked.

The following is the basic grid configuration.

@ (Html.Kendo().Grid < User > ()
    .Name("UserGrid")
    .HtmlAttributes(new {
    style = "height:100%; width:100%; "
})
    .Columns(columns = > {
    columns.Bound(m = > m.Id).Hidden(true);
    columns.Bound(m = > m.Name).Width(175).Title("Name");
    columns.Bound(m = > m.Hours).Width(175).Title("Hrs");
    columns.Bound(m = > m.Comments).Width(175).Title("Comments");
})
    .Scrollable()
    .ToolBar(toolbar = > toolbar.Template(@ < text > < a class = "k-button k-button-icontext k-grid-add"
href = "#" > < span class = "k-icon k-add" > < /span>New</a > < a class = "k-button k-button-icontext"
id = "cancelItem"
href = "javascript:void(0)" > < span class = "k-icon k-cancel" > < /span>Cancel</a > < /text>))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
    model.Id(row => row.Id);
}
)
   .ServerOperation(false)
   .PageSize(25)
)
   .Resizable(resize => resize.Columns(true))
   .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
   .Reorderable(reorder => reorder.Columns(true))
   .Pageable(p => p.PageSizes(new[] { 25, 50, 100 }))
)

The following are the key configurations. We will define that our grid is multi selectable. Also we defined Cancel button in Grid toolbar.

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
<a class="k-button k-button-icontext" id="cancelItem" href="javascript:void(0)"><span class="k-icon k-cancel"></span>Cancel</a>

Now its time to define JavaScript, that will remove the grid item. Find the INLINE comments for the following code.

// adding click event for cancel button
$("#cancelItem").on("click", function(e) {
    clearSelectedRows("UserGrid");
});
clearSelectedRows = function(gridName) {
    // identifying grid
    var entityGrid = $("#" + gridName + "").data("kendoGrid");
    // finding all the selected rows
    var rows = entityGrid.select();
    rows.each(function(index, row) {
        // reading each selected item
        var selectedItem = entityGrid.dataItem(row);
        // finally removing selected item from grid data source
        entityGrid.dataSource.remove(selectedItem);
    });
}

Happy Coding. Hope this helps!