Deleting the rows checked in a kendo grid

Question

I have a kendo grid with file name and checkbox as columns. Each row has a file name and checkbox. I want to delete the rows, which are checked on click of a button.

I used the following code inside the onclick function.

$.each(grid.dataSource.view(), function () {
                var currentDataItem = grid.dataItem(grid.select());
                var dataRow = grid.dataSource.getByUid(currentDataItem.uid);
                grid.dataSource.remove(dataRow);

            });

But, i get a javascript exception like, uid is undefined. Please help me to get away from this.

Edit: Able to delete row by row. Not able to delete multiple rows in single shot. Also, when i upload using kendo upload again after delete, all the files previously deleted are uploaded in single attempt.

Thanks Manikandan

Answer 1

/Iterate through all the tr in grid
$.each(grid.find('tr'), function (item,index) {
           //check if the tr has a checked checkbox, you can be more specific here if you have multiple checkboxes in tr.
           if(item.children('input[type=checkbox].is(':chekced'))
           { 
            grid.dataSource.remove(item);
            }
        });

Few things which I want to share:

1. You cannot delete multiple rows at once without looping through grid data/view/rows
2. To remove any row, you need not to dig datasource and get dataItem, you can directly delete it based on the 'tr' (DOM elements)
3. If it says Uid is undefined, check the source of your rendered grid, it must has 'data-uid' attributed attached to each tr. If not, you have not specified the modal correctly.
4. After deleting if it still uploads the changes, you can call saveChanges method on grid datasource to freeze the changes you have made.

Answer 2

Three questions:

If you iterate grid.dataSource.view() you will find only those elements that are in the current page of the grid. If you want to iterate through all elements of the table, you might use grid.dataSource.data() instead.

Iterating you don't need to select a row, since you already have the information in your function. Example, if you do:

$.each(grid.dataSource.view(), function(idx, elem) {
    console.log("item with index " + idx + " is ", elem);
})

then elem is the item on row idx.

Last but not least, when you iterate in an array starting from the beginning, you cannot remove elements since there are two consecutive elements that you want to remove, you will remove the first, then increment the counter for proceeding with the next but then the second is actually now in the position of the first so it will be skipped.

Example: If you have the following code:

var array = [3, 2, 1, 5, 6, 4];
console.log("before", array);
$.each(array, function(idx, elem) {
    if (elem >= 5) {
        array.splice(idx, 1);
    }
});
console.log("after", array);

it will display:

before [3, 2, 1, 5, 6, 4] 
after [3, 2, 1, 6, 4] 

element with value 6 was not removed!!!

You should do, instead, start from the end:

var array = [3, 2, 1, 5, 6, 4];
console.log("before", array);
var len = array.length;
while (len--) {
    if (array[len] >= 5) {
        array.splice(len, 1);
    }
}
console.log("after", array);

getting as result:

before [3, 2, 1, 5, 6, 4] 
after [3, 2, 1, 4] 

So, your code should be:

var array = grid.dataSource.data();
var len = array.length;
while (len--) {
    if (...) { // the condition for checking if the item has the checkbox ticked
        grid.dataSource.remove(array[len]);
    }
}