Delete Rows Selected with Checkboxes
The following example demonstrates how to delete multiple rows selected with checkboxes in a Grid.
Example
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
<div id="example" class="k-content">
<div id="grid"></div>
<div id="details"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 430,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{
field : "Select",
title : "Select",
width : "16%",
template: "<input type='checkbox' class='sel' />"},
{ command: { text: "Delete", click: whenYourDeleteButtonIsClicked }, title: " ", width: "140px" }]
}).data("kendoGrid");
});
function whenYourDeleteButtonIsClicked(){
var grid = $("#grid").data("kendoGrid");
$("#grid").find("input:checked").each(function(){
grid.removeRow($(this).closest('tr'));
})
}
</script>
</div>
<script>
</script>
See Also
- JavaScript API Reference of the Grid
- How to Add New Rows When Tabbing out of the Last One
- How to Build Custom dataSource for Custom Editor
- How to Customize the Delete Confirmation Dialog
- How to Edit Records in Child Grids
- How to Edit Records Using External Forms
- How to Increase Popup Edit Form and Textbox Width
- How to Preserve Dirty Indicator in Incell Editing and Client Operations
- How to Render Grid Editor in Column Template
- How to Show Custom Editor Using the Selected Item outside the Grid
- How to Skip Non-editable Cells When Tabbing
- How to Use AutoComplete as Custom Column Editor
- How to Use CRUD Operations When Grid Is Bound through MVVM
- How to Use Editors Based on Data Item Property
- How to Use TreeView as Custom Editor
For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.