Grid paging not working on page load.

1 Answer 1695 Views
Grid
Jason
Top achievements
Rank 1
Jason asked on 05 Aug 2012, 06:26 PM
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
Telerik team
commented on 06 Aug 2012, 08:18 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Jason
Top achievements
Rank 1
commented on 06 Aug 2012, 05:57 PM

I found the answer to my question in the API documentation.  
Jeroen
Top achievements
Rank 1
commented on 13 Aug 2012, 07:27 PM

Hi Jason,

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

Thanks!
John
Top achievements
Rank 2
commented on 13 Aug 2012, 08:08 PM

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
Top achievements
Rank 2
commented on 24 Aug 2012, 07:30 PM

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

1 Answer, 1 is accepted

Sort by
0
Jeroen
Top achievements
Rank 1
answered on 13 Aug 2012, 08:27 PM
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
Top achievements
Rank 1
commented on 10 Jul 2013, 09:47 AM

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
Telerik team
commented on 11 Jul 2013, 02:36 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Ashish
Top achievements
Rank 1
commented on 17 Jul 2013, 10:15 AM

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
Telerik team
commented on 18 Jul 2013, 08:30 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
frank
Top achievements
Rank 1
commented on 18 Nov 2013, 04:55 PM

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

This code resolved paging in Kendo UI Grid

Thanks

DANIEL
Andrea
Top achievements
Rank 2
commented on 30 Apr 2014, 06:44 AM

Jeroen's Answer:
____________
schema: {
               total: function(response) {
               return $(response.data).length;
               },
              etc...
}
___________
works perfectly, thank you!
Tim
Top achievements
Rank 1
commented on 27 Feb 2015, 01:04 AM

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
Top achievements
Rank 1
commented on 12 Apr 2016, 08:53 AM


total: function (response) {
return response.Object.length;
}, 
Akbar
Top achievements
Rank 1
commented on 11 Mar 2019, 06:44 AM

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
Telerik team
commented on 14 Mar 2019, 07:32 AM

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:



Regards,
Viktor Tachev
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.
Tags
Grid
Asked by
Jason
Top achievements
Rank 1
Answers by
Jeroen
Top achievements
Rank 1
Share this question
or