PageSize change always redraws all items

3 posts, 0 answers
  1. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 25 Nov 2014 Link to this post

    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{ 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?
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 27 Nov 2014 Link to this post

    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.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. JohnVS
    JohnVS avatar
    76 posts
    Member since:
    Apr 2013

    Posted 13 Mar 2015 Link to this post

    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{ data: theDataArray, pageSize: 20, change: function (e) { renderVehicleHtml(); } }));

    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]);
        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]);
            pageSizeChanged = false; //reset global variable

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