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/
13 Answers, 1 is accepted
Rank 2
$(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);});<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>
Rank 1
Rank 2
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 }});<div id="grid"></div>
Rank 1
Rank 2
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", "");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.
Rank 1
Rank 1
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;}
Rank 1
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?
Rank 1
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.
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
Rank 1
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
Rank 1
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/.