Remove Rows working very slowly for more than 50 records

[sam]

I am trying to delete more than 100 rows at a time from the grid.
I have a checkbox to select individual rows or a common checkbox to select all the rows on the page. The grid page size is 100.
The response from the server takes 3 secs but to delete it from the front end takes 15 secs i.e. the success function of ajax call.

 

I have also tried in the sucess function :-

$("#grid").find("input:checked").each(function () {                  
    var grid = $("#grid").data("kendoGrid");
    if (!$(this).parents('th').length) {
      grid.removeRow($(this).closest('tr'));
    }
  })    
}

This also has lead to 1 sec improvement in performance.

var selectedIds = grid.selectedKeyNames(); // gets the selectedrows
var param = $.param({ selectedIds : selectedIds }, true);

$.ajax({
    method: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "testurl/?" + param ,
    success: function(response) {
        console.log(response);
        if (response.Success == true) {
            selectedIds.forEach(function(selectedId) {
                var item = grid.dataSource.get(selectedId);
                delete grid._selectedIds[selectedId]
                grid.dataSource.remove(item);
            });

            if (grid.dataSource.view().length == 0) {
                var currentPage = grid.dataSource.page();
                if (currentPage > 1) {
                    grid.dataSource.page(currentPage - 1);
                }
            }
        } else {
            alert("ERROR " + response.Error.Message);
        }

    },

    failure: function(err) {
        alert(err);
    }
});
}

[Alex Hajigeorgieva]

Hi, Sam,

The Kendo UI Data Source has a faster way to remove items - the pushDestroy() method. You can try it and see if it helps but it is not that much faster. However, if you like we can convert this to a feature request so people can vote for such method to be introduced.

Dependent on the functionality that you have in the grid, you might be able to use the JavaScript array splice() method and that would take a second to remove thousands of items. I tested with 5000:

grid.dataSource.data().splice(0, 5000);

https://dojo.telerik.com/@bubblemaster/IKafABUy/2

Regards,
Alex Hajigeorgieva
Progress Telerik