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

Below is 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 }))
 )

Below are the key configurations. We defining 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 the Javascript, which will remove the grid item. Find the INLINE comments for the below 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 Kooding… Hope this helps….!