Pageable bar showing, page number buttons not showing.

[Jay]

I have run into a problem where when I set pageable = true on the KendoGrid, it shows the pageable tool area beneath the grid, but there are no page number buttons.  However, if groupable is set to true, then I can drag a column header to the grouping area which forces the grid to re-draw itself and then the page number buttons are visible.  I have a demo of this behavior here:

http://jsfiddle.net/jkappel/njR79/ 

Thanks for whatever help anyone can provide :)

PS - I am using the Chrome browser.  It has different behavior in IE (also not correct).

[John Thompson]

I believe the dataSource schema needs a "total" as well as the "pageSize" to operate correctly using paging.  The "total" setting indicates the total row count so that the page numbers can be generated in the paging bar.

It would look something like: 

schema:

{

    data: "TASK",

    total: "count"

...

}

Then add the "count:<n>, TASK: [...] " to the results.

[Jay]

Perfect!  That did the trick, thanks for the quick answer!

Edit: I spoke too soon, see below

[Jay]

Sorry to double post but I tried your answer with my actual data and now I see another issue.  When the grid first loads the data, the paging buttons appear as expected now, but when I click one of the paging buttons the grid draws the appropriate page full of data, but the paging buttons disappear!  

I updated my example so you can see what I am talking about: 
http://jsfiddle.net/jkappel/njR79/ 

Any help will be greatly appreciated as always :)

[Paul]

Jay

 "When the grid first loads the data, the paging buttons appear as expected now, but when I click one of the paging buttons the grid draws the appropriate page full of data, but the paging buttons disappear! " 

I am having exactly the same problem when using an SQL database as the data source. Did you manage to find a solution to this?

Thanks
Paul

[Jose]

This worked for me

 <div id="example" class="k-content">
            <div id="grid"></div>            
                <script type="text/javascript">
                 $(function() {
                     $("#grid").kendoGrid({
                     dataSource: {
                         type: "json",
                         serverPaging: false,
                         serverSorting: false,
                         pageSize: 5,
                         transport: { read: { url: "../Services/MyService.svc/GetPrograms", dataType: "json"} },
                         schema: { data: "d",
                                   total: function (result) {
                                             result = result.d || result;
                                             return result.length;
                                   }
                                }
                     },
                     pageable: true,
                     selectable: true,
                     sortable: true,
                     columns: [{ field: "id", title: "ID" }, { field: "title", title: "Title" }, { field: "desc", title: "desc"}]
                     });
                 });
                 </script>
 
        </div>
        
    </div>
    </div>