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

14 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. 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.
  3. 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/ 
  4. 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>
  5. 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.
  6. 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.
  7. Mosh
    Mosh avatar
    5 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
  8. Craig
    Craig avatar
    3 posts
    Member since:
    Apr 2016

    Posted 30 Oct 2019 in reply to Mosh Link to this post

    I also use data-pageable="{pageSizes:[10, 25, 50, 100, 'all']}" and it only works of the time, but sometimes it doesn't. 

    When it is not showing the page size drop down, it shows the first, prev, next, last buttons. And in between the prev and next buttons is a "popup" selector instead of the 1,2,3,4,5... buttons this is the markup:

    <div class="k-pager-numbers-wrap">
      <div class="k-pager-numbers-wrap">
        <ul class="k-pager-numbers k-reset">
          <li class="k-current-page">
            <span class="k-link k-pager-nav">1</span>
          </li>
          <li>
            <span class="k-state-selected">1</span>
          </li>
          <li>
            <a tabindex="-1" href="#" class="k-link" data-page="2">2</a>
          </li>
        </ul>
      </div>
    </div>

    And the style applied to the <ul> is:

    .k-pager-wrap.k-pager-sm .k-pager-numbers {
        position: absolute;
        overflow: hidden;
        -ms-flex-direction: column-reverse;
        height: auto;
        margin: 0;
        bottom: 0;
        border-style: solid;
        border-width: 1px;
        border-color: inherit;
        z-index: 3;
        border-radius: 4px;
    }

    Other times it shows the same buttons but displays the 1,2,3,4... buttons instead of the "popup" page selector.  The markup looks the same, but the style applied is different on the <ul>.

    <div class="k-pager-numbers-wrap">
      <div class="k-pager-numbers-wrap">
        <ul class="k-pager-numbers k-reset">
          <li class="k-current-page">
            <span class="k-link k-pager-nav">1</span>
          </li>
          <li>
            <span class="k-state-selected">1</span>
          </li>
          <li>
            <a tabindex="-1" href="#" class="k-link" data-page="2">2</a>
          </li>
          <li>
            <a tabindex="-1" href="#" class="k-link" data-page="3">3</a>
          </li>
        </ul>
      </div>
    </div>
    .k-pager-wrap .k-pager-numbers {
        display: inline-flex;
        flex-direction: row;
    }

    When it is not visible, this is the style that is getting applied to <span class="k-pager-sizes k-label">

    .k-pager-wrap.k-pager-sm .k-pager-sizes {
         display: none;
    }

    When it is working as expected, this is the style getting applied to <span class="k-pager-sizes k-label">

    .k-pager-wrap .k-label {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 1em;
    }
  9. Craig
    Craig avatar
    3 posts
    Member since:
    Apr 2016

    Posted 30 Oct 2019 in reply to OnaBai Link to this post

    Ok, I just realized something very strange.

     

    I've attached two images.

    One is what the pager looks like when the grid initially renders.

    The other is the desired look after the browser window has been resized.

    Why would resizing the browser window cause the pager to display differently?

  10. Craig
    Craig avatar
    3 posts
    Member since:
    Apr 2016

    Posted 30 Oct 2019 in reply to Craig Link to this post

    Here is the markup for the above
    data-pageable="{previousNext: true, numeric: true, info: true, refresh: true, pageSizes: [5, 10, 25, 50], messages: {display: '{0} to {1} of {2} Records', empty: 'No Records to Display'}}"

    I have implemented a hack to make it work:

    I added $(window).resize(); to the dataBound event handler.

  11. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 04 Nov 2019 Link to this post

    Hello, Craig,

    The Kendo UI Grid pager is responsive and its expected behaviour is to "turn into" a dropdown list when the width of the screen is below 1024px. You can see that in the basic demo by resizing the window:

    https://demos.telerik.com/kendo-ui/grid/index

    The MVVM bound grid behaves in the exact same way when I tested it with the pageSizes configuration:

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

    In case the grid in the project you are working on displays a different behaviour, could you please help us reproduce it by modifying the provided Dojo or creating your own so we can investigate. It is also important to understand which Kendo UI version is used and which theme.

    Look forward to hearing back from you.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. ksuh
    ksuh avatar
    52 posts
    Member since:
    Jul 2006

    Posted 09 Dec 2020 in reply to Alex Hajigeorgieva Link to this post

    I think this bug still exists.  It happens if the grid is placed within a div that is initially hidden.

     

    This is your example, the only difference being the example div is hidden at first and then shown after the model is bound.

     

    https://dojo.telerik.com/iqunATOQ

  13. ksuh
    ksuh avatar
    52 posts
    Member since:
    Jul 2006

    Posted 09 Dec 2020 in reply to ksuh Link to this post

    Here's your same example again, now with the only difference being that isVisible is set to false initially and then set to true after the model is bound.
  14. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 14 Dec 2020 Link to this post

    Hi, Kwang,

    The pager in the grid is responsive by default.

    If you do not wish for the pages dropdown to be created at any time, you can set the pageable.responsive to false:

    https://dojo.telerik.com/@bubblemaster/ebUTaYUM

    If you had something else in mind, can you please elaborate on the current behaviour vs desired behaviour. This forum thread does not contain a known and confirmed bug.

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top