Grid paging not working on page load.

[Jason]

I have a grid that is successfully fetching my json data.  When the grid loads, the data is present but the paging buttons on the lower left do not work and the grid says "No items to display" on the lower right.  If I change the drop down to change the number of items per page, the grid refreshes and the paging works correctly and the number of records are also displayed.  Any ideas?

[Rosen]

Hello Jason,

Unfortunately, the provided information is not sufficient in order to track the cause for such behavior.  Therefore, please provide a small sample in which this can be observed locally.

Regards,
Rosen
the Telerik team

[Jason]

I found the answer to my question in the API documentation.  

[Jeroen]

Hi Jason,

I'm having the same problem. Could you please explain what the solution is you found in the docs?

Thanks!

[John]

I was looking at this from another forum post and I think this demonstrates my problem.
Here is the jsfiddle: http://jsfiddle.net/dimodi/F6ghT/ 

The buttons on this pager are not the same as the one above.
http://demos.kendoui.com/web/grid/index.html 

I can't get (first, prev, next, last) to show on my pager.  Any suggestions?  I am thinking I am missing something in the docs.
I tried to set total and still didn't work.  I tried prevNext: true and that didn't work (even though it states it is the default).

How do I get prev/next/first/last buttons appear on my grid?

Thanks!

[Gerald]

@John - I had the same issue. The problem was I had kendoui web version 2012.1.322. As soon as I downloaded the latest version kendoui.web.2012.2.710.open-source everything cleared right up. It appears they made some changes from the earlier release. Hope this helps.

Updated jsFiddle example: http://jsfiddle.net/F6ghT/102/

[Jeroen]

I figured it out by reading the manual. My problem was in the datasource. I did not specify a 'schema.total'. I fixed it by adding the following code to my datasource:

total: function(response) {

    return $(response.data).length;

}

Hopefully this can be of any help.

[Ashish]

Hello
                  I'm also Facing same Problem,In my case my Grid is showing All the records which are coming from Database  in the Json Format at the time of Page load,1st time my pagesize is not working,but after selecting pages from left bottom footer it works fine,same problem for showing Total page number at the right bottom footer,First time while page loads it is showing  "Nan-Nan of items"  ,Paging "Next" button is also not working properly it is showing directly Last page ,it is not going to next page,Please find the attached Screen shot for more details

[Rosen]

Hi Ashish,

You should verify that you are providing the total number of records.
However, it is not clear from the provided description if you are using a remote or local binding and how the data is set. Therefore, a sample test page in which the issue can be observed will be appreciated.

Also please consider starting separate thread instead of re-opening an old one.

Regards,
Rosen
Telerik

[Ashish]

Hi Rosen
          I'm using Remote Binding and it is coming in json format,what ever Total records are coming from Database it is binding all at once  first time but when selecting other page sizes then it is working fine,I have attached the sample page of code please check it and let me know where I'm going wrong.
Thanks & Regards
Ashish

[Rosen]

Hi Ashish,

Looking at the code you have provided it seems that the DataSource declaration is incorrect. The various options for the DataSource are not set to the DataSource but at the Grid instead. The particular issue which you have described is caused by not setting the pageSize correctly. Therefore, please refer our documentation on how to configure the Grid's dataSource option.

Regards,
Rosen
Telerik

[frank]

total: function(response) {
                                return $(response.data).length;
                            },

This code resolved paging in Kendo UI Grid

Thanks

DANIEL

[Andrea]

Jeroen's Answer:
____________
schema: {
               total: function(response) {
               return $(response.data).length;
               },
              etc...
}
___________
works perfectly, thank you!

[Tim]

A ping to say its still needed even for the latest release. I tried separating my data from the grid but no change. My paging bar and "no items to display" were still not updating once the grid datasource populated. Adding the total function from Frank and Andrea fixed my problem as well. I also noticed if I sorted by clicking on the column header or applied a filter through my custom search box it would update. I just didn't update when the data arrived until I interacted. This below made the value fill in perfectly.

     ...,
     schema: {
          total: function(response) {
               return $(response.data).length;
      },
      data,
     ..., etc

Thanks!

[Simon]

total: function (response) {
return response.Object.length;
}, 

[Akbar]

Hello Rosen,

i am also getting same issue while first load grid items count is showing wrong , like "NaN - NaN of 15 items" it is showing. if we change items per page once , it works perfectly. On first load only it show wrongly. Please give us a solution

 

below is the code :

 $(document).ready(function(){
        $("#grid").kendoGrid({
            columns: [{
                field: "name",
                title: "Name"
            },
            {
                field: "storyId",
                title: "StoryId"
            },
            {
                field: "storyDescription",
                title: "StoryDescription"
            },
            {
                field: "statusDescription",
                title: "StatusDescription"
            },
            {
                field: "status",
                title: "Status"
            }],
            toolbar: ["excel"],
            excel: {
                fileName: "Kendo UI Grid Export.xlsx",
                proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
                filterable: true
            },
            dataSource: new kendo.data.DataSource({data: data1 }),
            pageSize: 20,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            }
        });
    });

[Viktor Tachev]

Hi Akbar,

I examined the configuration and it seems that the pageSize option is set on Grid level. However, it should be under pageable. 

pageable: {
    pageSize: 2,
    refresh: true,
    pageSizes: true,
    buttonCount: 5
}

I also created a sample dojo illustrating the behavior. Check it out below:

• https://dojo.telerik.com/UxaCOvuP

Regards,
Viktor Tachev
Progress Telerik