Premium forums

MVVM, Grid, Paging - Doesn't work on 515 nor 601 Cancel

• Alvaro

  
  01 Jun 2012 (Link to this post)

  I'm using MVVM to handle datasource to bind my grid with.
  
  But I can't make paging work. Here is a brief description of everything I attempted to get it working.
  
  

  • I have added the "data-pageable=true" to the div markup. That shows the pager at the bottom, but only with a single page (I have at least 200 rows on the grid)
  • I have added the $('#grid').kendoGrid({ pageable: true }); js code, but I get the same behavior as before.
  • I did something on the lines of $('#grid').data('kendoGrid').dataSource.pageSize(10) once and it worked. But only if I did it by hand on the javascript console.
  • I have added a method to handle the dataBound event, and used the $('#grid').data('kendoGrid').dataSource.pageSize(10) idea, that crashed firefox repeatedly.

  
  Is there any way I can make it work ? If not, is there a planned release to include this ?
  
  I was surprised by this, as this is a major thing for any business app that deals with data. I really love using Kendo so far and it has been by far the best grid I have ever used. Using the MVVM framework made it even better...but this little problem is driving me nuts.
  
  Thanks,
  
  Alvaro Oliveira.
  
  
• Alvaro

  
  02 Jun 2012 (Link to this post)

  I have found a really ugly workaround for this problem.
  
  1 - I have set the data-pageable="true" on my <div>
  
  2 - On my viewModel created a "flag" variable, and a method to attached the the bound event.
  
  

          gridBound: function () {
              if (!this.get("isPaged")) {
                  this.set("isPaged", true);
                  $('#gridCFOP').data('kendoGrid').dataSource.pageSize(10);
              }
          }

  
  
  The reason for the flag variable, is because the pageSize method fires the dataBound event again, so it would create a loop.
• Iliana Nikolova

  
  04 Jun 2012 (Link to this post)

  Hello Alvaro,
  
  To achieve this you need to set a pageSize in the data-pageable attribute. For example: 

  data-pageable='{ "pageSize": 10 }'

  Kind regards,
  Iliana Nikolova
  the Telerik team

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Alvaro

  
  04 Jun 2012 (Link to this post)

  Hi Iliana,
  
  I did add your suggested markup and removed my dataBound workaround. 
  
  The grid shows all my items at once, it doesn't show only 10 items as expected. The pager shows up at the bottom, but only with the first page available. 
  
  Thanks, 
  
  Alvaro Oliveira.
• Iliana Nikolova

  
  04 Jun 2012 (Link to this post)

  Hello Alvaro,
  
  I tried to reproduce your scenario and everything works as expected. For convenience, here is my test jsFiddle example - please check it and let me know if I missed something.
  

  
  

  Kind regards,
  Iliana Nikolova
  the Telerik team

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Alvaro

  
  04 Jun 2012 (Link to this post)

  Hi,
  
  I have updated the fiddle with a scenario that is closer to mine.
  
  I am using a DataSource to read data from a remote server. But I got the same problem to happen with local data.
  
  The updated fiddle can be found at : http://jsfiddle.net/aoliveira/xUhDn/3/
  
  Thanks,
  
  Alvaro Oliveira.
• Iliana Nikolova

  
  04 Jun 2012 (Link to this post)

  Hello Alvaro,
  
  In your case you could achieve the desired behavior using the dataSource pageSize configuration option. For convenience I updated your jsFiddle example. 
  

   

  Regards,
  Iliana Nikolova
  the Telerik team

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Alvaro

  
  04 Jun 2012 (Link to this post)

  Hi,
  
  Thanks for the updated sample. I have yet again updated it with a scenario that is more close to what I have in my system, and the problem is showing up again.
  
  The updated fiddle is : http://jsfiddle.net/aoliveira/xUhDn/7/
  
  The main difference is that I'm not reading data from a remote datasource (twitter feed).
  
  Thanks,
  
  Alvaro Oliveira.
• Answered Iliana Nikolova

  
  05 Jun 2012 (Link to this post)

  Hello Alvaro,
  
  The pager needs the total number of the records in order to calculate the number of pages. For this purpose you need the total() method of the dataSource schema. Please check the updated jsFiddle example. 
  
  
  Greetings,
  Iliana Nikolova
  the Telerik team

  Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
• Alvaro

  
  17 Jun 2012 (Link to this post)

  Iliana, 
  
  It's working great now. I overlooked the Total property, I'm sorry about it. 
  
  Thank you for your help! This is the second great reason on why buying Kendo UI was great. Not only it's technically pretty good, it also has great support. 
  
  Thanks, 
  
  Alvaro Oliveira.
• Martin

  
  07 Nov 2012 (Link to this post)

  The solution given works fine if the items are added before the view is bound. However, when new items are added to the model, the pager part of the view is not updated. Looking at the following jsfiddle ( http://jsfiddle.net/xUhDn/27/ ), the pager only shows three pages, not four.
  
  Update: I found a workaround in this jsfiddle:
  
  

  $('#grid').data("kendoGrid").dataSource.total = function() {return viewModel.items.length;}

  
  However, the following does not work:
  
  

  viewModel.items.total = function() {return viewModel.items.length;}

  
  Bit weird. Seems like the default implementation of total() when binding to a local array doesn't do updates.