How to delete multiple rows in Kendo grid?

Question

I have a kendo grid with first column as Checkboxes. I want to delete multiple rows using those check boxes. I am able to delete only single row at a time.

I tried adding

.Batch(true)

for the data source and below is my function for delete button outside the grid.

function deleteRule() {
    var grid = $("#grid").data("kendoGrid");

    grid.select().each(function () {
        grid.removeRow($(this));
    });
}

Any suggestions please ?

Do you necessarily have to use a checkbox to select the rows you want to delete? Why don't you just make your grid select multiple rows then each time a row is selected, you keep each row/record (uid) in an Array. Then onClick of your Delete button, loop through the gridDataSource and use the "remove" [gridDataSource.remove(selectedRow);] method then "sync" [gridDataSource.sync();] it. — Ann B. G.

Petur Subev Petur Subev · Accepted Answer · 2012-09-12T19:39:45

Yo mate,

How exactly do you remove that one row? Why you use the select method?

Basically I would suggest you to create a delete button which executes the logic to delete the selected rows - I guess you are using a tempalte column with a checkbox inside. If you add a class to that checkbox you can easily select all the checkboxes inside of the grid. So lets say the name of the class for the checkbox is cool then you can execute the following logic in the delete button click handler:

function whenYourDeleteButtonIsClicked(){
    var grid = $("#grid").data("kendoGrid");
    $('.cool:selected').each(function(){
       grid.removeRow($(this).closest('tr'));
    })
}

I hope you got the idea mate. Good luck.

How to delete multiple rows in Kendo grid?

2 Answers