This is a migrated thread and some comments may be shown as answers.
Grid Pager bug when using MVVM (page size dropdownlist not showing)
13 Answers 176 Views
This is a migrated thread and some comments may be shown as answers.
Enrique
Top achievements
Rank 1
Enrique asked on 07 Sep 2012, 02:58 PM
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/

13 Answers, 1 is accepted

Sort by
0
OnaBai
Top achievements
Rank 2
answered on 07 Sep 2012, 04:47 PM
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.
0
Enrique
Top achievements
Rank 1
answered on 07 Sep 2012, 04:50 PM
It still does not show the pagesizes dropdown in the pager

http://jsfiddle.net/TQLZT/7/ 
0
OnaBai
Top achievements
Rank 2
answered on 07 Sep 2012, 05:32 PM
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>
0
Enrique
Top achievements
Rank 1
answered on 07 Sep 2012, 06:55 PM
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.
0
OnaBai
Top achievements
Rank 2
answered on 08 Sep 2012, 09:41 AM
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.
0
Mosh
Top achievements
Rank 1
answered on 28 Dec 2016, 07:33 AM
i use data-pageable="{pageSizes:[10, 25, 50, 100, 'all']}" works just fine
0
Craig
Top achievements
Rank 1
answered on 31 Oct 2019, 03:13 AM

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;
}
0
Craig
Top achievements
Rank 1
answered on 31 Oct 2019, 03:34 AM

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?

0
Craig
Top achievements
Rank 1
answered on 31 Oct 2019, 03:46 AM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 04 Nov 2019, 11:23 AM

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.
0
ksuh
Top achievements
Rank 1
answered on 09 Dec 2020, 04:06 PM

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

0
ksuh
Top achievements
Rank 1
answered on 09 Dec 2020, 04:21 PM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 14 Dec 2020, 11:36 AM

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/.

Tags
Grid
Asked by
Enrique
Top achievements
Rank 1
Answers by
OnaBai
Top achievements
Rank 2
Enrique
Top achievements
Rank 1
Mosh
Top achievements
Rank 1
Craig
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
ksuh
Top achievements
Rank 1
Share this question
or