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