Grid Pager bug when using MVVM (page size dropdownlist not showing)

7 posts, 0 answers
  1. Enrique
    Enrique avatar
    3 posts
    Member since:
    May 2012

    Posted 07 Sep 2012 Link to this post

    There is a bug when binding a grid using MVVM, the dropdownlist in the pager is set to display:none because the grid is initialized twice.
    The first time it creates the dropdownlist and sets the <select /> to display:none, the second time it copies the display:none style to the already created dropdownlist.

    http://jsfiddle.net/TQLZT/6/
  2.
  3. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 07 Sep 2012 Link to this post

    Try defining pageSize in datasource instead of in data.
    $(function() {
        var vm = kendo.observable( {
            datasource: new kendo.data.DataSource({
                data: [{a:1,b:'hola'},{a:2,b:'adios'}],
                pageSize: 10
            })
        });
        kendo.bind('#search',vm);
    });​
    And
    <div id="search">
        <div id="grid" data-role="grid" data-bind="source: datasource"
             data-pageable='{
                    "previousNext": true,
                    "numeric": true,
                    "pageSizes": true,
                    "info": true
                 }'>
        <div>
    </div>​
    Remeber that pageSize is an attribute of KendoUI DataSource and not from pageable. In pageable you define an array with the different values for the dropdown list.
  5. Enrique
    Enrique avatar
    3 posts
    Member since:
    May 2012

    Posted 07 Sep 2012 Link to this post

    It still does not show the pagesizes dropdown in the pager

    http://jsfiddle.net/TQLZT/7/ 
  7. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 07 Sep 2012 Link to this post

    Um! You are probably right.
    Can you use this instead...
    var ds = new kendo.data.DataSource({
        data:[
            {a:1, b:'hola'},
            {a:2, b:'adios'}
        ],
        pageSize:10
    });
    $("#grid").kendoGrid({
        dataSource: ds,
        pageable: {
            previousNext: true,
            numeric: true,
            pageSizes: true,
            info: true
        }
    });
    and the HTML as
    <div id="grid"></div>
  8.
  9. Enrique
    Enrique avatar
    3 posts
    Member since:
    May 2012

    Posted 07 Sep 2012 Link to this post

    Yes, I was going to do that in the first place, but I preferred using MVVM. I will have to initialize the grid using javascript, for others widgets it works fine apparently.
  11. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 08 Sep 2012 Link to this post

    Hola Enrique,
    If you prefer to go with your previous solution you might "fix" the problem by "hacking" the "display" of the select.
    I've updated your example by adding:
    $("select", "#grid").parent().css("display", "");
    It is not nice having to change KendoUI generated code but while we wait for the admin to take a look into this and answer if it is actually a bug this might work with minimum changes in your code.
    Anyhow, seems that there are some questions in the DropDownList forums about re-binding data after initialization and if you take a look into  their code seems that they are binding data twice when you use data-bind in HTML and then in JavaScript.
  13. Mosh
    Mosh avatar
    4 posts
    Member since:
    Jun 2015

    Posted 28 Dec 2016 Link to this post

    i use data-pageable="{pageSizes:[10, 25, 50, 100, 'all']}" works just fine
  14.
Back to Top