Changing the data within a Kendo grid is too slow

Question

I have a kendo grid that displays between 4000-6000 rows, with 7 columns, and is able to be filtered by the user to only show data within user defined date range. This grid is not updating with new data, but instead is only showing a subset of the full dataset that is retrieved at initialization. When I change which subset is being displayed, there is a very noticeable 5 second pause. I am wondering if there is a more efficient way I could change the data, as I know of programs that use Kendo Grid to display 10,000s of rows with much better performance.

This is the code I am using to update the grid. The first four lines create an array of data, and then I call the dataSource.data() function to place it into the grid. This causes my date formatting in the kendo grid to reset, so I then redefine the columns within the options of the kendo grid.

//Create new data array based o nthe user defined date range
    let x = chart.scales["x-axis-0"];
    var min = new Date(x.min);
    var max = new Date(x.max);
    var newData = vm.createDataArrayAtDates(min, max)

//place data into the kendo datasource object
    grid = $("#grid").data("kendoGrid");
    data = grid.dataSource.data(newData);

//redefine the columns of the kendo grid
    var options = grid.getOptions();
    options.columns = vm.createGridColumns();
    grid.setOptions(options);

user_8883017 · Answer

I have found a way to improve the performance of my kendo grid (which also improved everything else on the page). To do this, I enabled "Virtual Scrolling" within the kendo grid. Turning on this feature changed the 5 second delay into a 5 millisecond delay!

Here is a link to the telerik page on virtual scrolling: https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/

Here is my implementation:

          vm.kendoGrid = $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: vm.createDataSource(),
                        type: "odata",
                        sortable: true,
                        scrollable: {
                            virtual: true
                        },
                        filterable: {
                            extra: false
                        },
                        columns: vm.createGridColumns(),
                        height: 450
                    })
                });

The specific lines that are required for virtual scrolling I have copied below:

sortable: true,
scrollable: {
    virtual: true
}

Changing the data within a Kendo grid is too slow

1 Answers