PageSize change always redraws all items

[JohnVS]

We are using a DataSource with local data (nothing remote), and we dynamically change the PageSize of the DataSource. We do this by starting out the view showing 20 results, and as the user scrolls down the page, we automatically expand the PageSize by 10, thereby copying an endless scroll kind of functionality.

var arr = [
   new Vehicle(1),
   new Vehicle(2),
   new Vehicle(3)
];
var vehicles = new kendo.data.DataSource({ data: arr, pageSize: 20 });

//if user scrolls to bottom, then:
vehicles.pageSize(vehicles.pageSize() + 10)

The problem with this is that I've noticed that on every change of the PageSize, Kendo redraws every item on the page, even though many items on the page are already drawn. So as you scroll down the page, the PageSize is getting larger and larger, and Kendo is redrawing every time. If you scroll down to where the PageSize is 100 and beyond, it takes longer and longer for it to redraw every item. Is there some way to tell Kendo to not redraw items that are already drawn?

[Kiril Nikolov]

Hello John,

I am afraid that this functionality cannot be worked around. The reason is that when change events of the dataSource is triggered, the grid is forced to redraw itself. And changing the dataSource page will always trigger its change event, and currently there is nothing that I can offer in order to prevent this from happening. 

You can submit a uservoice request for such implementation, so we can consider it for a future release.

Regards,
Kiril Nikolov
Telerik

 

 

[JohnVS]

In case anyone else wants to draw items themselves, so they don't have to redraw all items every time the DataSource's pageSize changes, you can do something like below.

We are actually using MVVM with a DataSource. First, put the data into the view model and read it.

vm.set("vehicles", new kendo.data.DataSource({ data: theDataArray, pageSize: 20, change: function (e) { renderVehicleHtml(); } }));
vm.get("vehicles").read();

Notice the "renderVehicleHtml()" function called in the change event. That will handle drawing for the first time or adding items at the end of those already drawn.

Then, create a function to change the pageSize of the DataSource. In my function, I have a global Javascript variable ("pageSizeChanged") that I set to true, then make the pageSize change:

pageSizeChanged = true;
this.get("vehicles").pageSize(this.get("vehicles").pageSize() + 10);

Since this causes the DataSource to run the change event, it will then run the "renderVehicleHtml()" function, which looks like this:

renderVehicleHtml: function () {
    var $list = $("#VehicleList"); //the div containing the drawn items
    var vehicles = this.get("vehicles").view(); //get the vehicles currently showing
    var template = kendo.template($("#vehicleTemplate").html()); //get the vehicle item template
    var html = "";
    var existingVehicles = $("#VehicleList .list-group-item"); //the currently drawn vehicles

    if (!pageSizeChanged) { //use our global variable to see if the pageSize was just changed
        if (vehicles.length === 0) {
            $list.html(""); //if no vehicles, remove all HTML
        }
        else {
            for (var i = 0, len = vehicles.length; i < len; ++i) { //loop thru vehicles and render each one using our template
                html += template(vehicles[i]);
            }
            $list.html(html);
        }
    }
    else { //if pageSize changed, add new items to end of list
        for (var i = existingVehicles.length, len = vehicles.length; i < len; ++i) {
            html += template(vehicles[i]);
        }
        $list.append(html);

        pageSizeChanged = false; //reset global variable
    }
}

Our use-case may not be widely used, but this idea may help someone else later on.