Post
Ask Question

Removing 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.

  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!