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

The following is the basic grid configuration.

  1. @ (Html.Kendo().Grid < User > ()
  2. .Name("UserGrid")
  3. .HtmlAttributes(new {
  4. style = "height:100%; width:100%; "
  5. })
  6. .Columns(columns = > {
  7. columns.Bound(m = > m.Id).Hidden(true);
  8. columns.Bound(m = > m.Name).Width(175).Title("Name");
  9. columns.Bound(m = > m.Hours).Width(175).Title("Hrs");
  10. columns.Bound(m = > m.Comments).Width(175).Title("Comments");
  11. })
  12. .Scrollable()
  13. .ToolBar(toolbar = > toolbar.Template(@ < text > < a class = "k-button k-button-icontext k-grid-add"
  14. href = "#" > < span class = "k-icon k-add" > < /span>New</a > < a class = "k-button k-button-icontext"
  15. id = "cancelItem"
  16. href = "javascript:void(0)" > < span class = "k-icon k-cancel" > < /span>Cancel</a > < /text>))
  17. .Editable(editable => editable.Mode(GridEditMode.InCell))
  18. .Filterable()
  19. .Sortable()
  20. .DataSource(dataSource => dataSource
  21. .Ajax()
  22. .Batch(true)
  23. .ServerOperation(false)
  24. .Model(model =>
  25. {
  26. model.Id(row => row.Id);
  27. }
  28. )
  29. .ServerOperation(false)
  30. .PageSize(25)
  31. )
  32. .Resizable(resize => resize.Columns(true))
  33. .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
  34. .Reorderable(reorder => reorder.Columns(true))
  35. .Pageable(p => p.PageSizes(new[] { 25, 50, 100 }))
  36. )
The following are the key configurations. We will define that our grid is multi selectable. Also we defined Cancel button in Grid toolbar.
  1. .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
  2. <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.
  1. // adding click event for cancel button
  2. $("#cancelItem").on("click", function(e) {
  3. clearSelectedRows("UserGrid");
  4. });
  5. clearSelectedRows = function(gridName) {
  6. // identifying grid
  7. var entityGrid = $("#" + gridName + "").data("kendoGrid");
  8. // finding all the selected rows
  9. var rows = entityGrid.select();
  10. rows.each(function(index, row) {
  11. // reading each selected item
  12. var selectedItem = entityGrid.dataItem(row);
  13. // finally removing selected item from grid data source
  14. entityGrid.dataSource.remove(selectedItem);
  15. });
  16. }
Happy Coding. Hope this helps!