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.

@ (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 = "#" > New</a > < a class = "k-button k-button-icontext"
id = "cancelItem"
href = "javascript:void(0)" > 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)">Cancel</a>

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

Happy Coding. Hope this helps!