This is a migrated thread and some comments may be shown as answers.

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

10 Answers 257 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Alvaro
Top achievements
Rank 1
Alvaro asked on 02 Jun 2012, 03:36 AM
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.

10 Answers, 1 is accepted

Sort by
0
Alvaro
Top achievements
Rank 1
answered on 02 Jun 2012, 01:29 PM
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.
0
Iliana Nikolova
Telerik team
answered on 04 Jun 2012, 10:23 AM
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!
0
Alvaro
Top achievements
Rank 1
answered on 04 Jun 2012, 12:21 PM
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.
0
Iliana Nikolova
Telerik team
answered on 04 Jun 2012, 01:44 PM
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!
0
Alvaro
Top achievements
Rank 1
answered on 04 Jun 2012, 03:25 PM
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.
0
Iliana Nikolova
Telerik team
answered on 04 Jun 2012, 04:01 PM
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!
0
Alvaro
Top achievements
Rank 1
answered on 05 Jun 2012, 12:24 AM
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.
0
Accepted
Iliana Nikolova
Telerik team
answered on 05 Jun 2012, 10:08 AM
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!
0
Alvaro
Top achievements
Rank 1
answered on 17 Jun 2012, 06:01 PM
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.
0
Martin
Top achievements
Rank 1
answered on 07 Nov 2012, 09:50 PM
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.
Tags
MVVM
Asked by
Alvaro
Top achievements
Rank 1
Answers by
Alvaro
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Martin
Top achievements
Rank 1
Share this question
or