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

[Enrique]

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/

[OnaBai]

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.

[Enrique]

It still does not show the pagesizes dropdown in the pager

http://jsfiddle.net/TQLZT/7/ 

[OnaBai]

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>

[Enrique]

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.

[OnaBai]

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.

[Mosh]

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

[Craig]

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;
}

[Craig]

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?

[Craig]

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.

[FAVAS]

It is working ,Thanks

[Alex Hajigeorgieva]

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

[Missing User]

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

[Missing User]

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.

[Alex Hajigeorgieva]

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

[Akash]

Hi Alex,

Thanks for your suggestion, that worked for me. I just set the responsive field in the pageable prop to false and I could see the dropdown the intended way. Thanks again.

Best,

Akash