Pageable bar showing, page number buttons not showing.

6 posts, 0 answers
  1. Jay
    Jay avatar
    45 posts
    Member since:
    Dec 2011

    Posted 20 Jan 2012 Link to this post

    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).
  2. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 20 Jan 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Jay
    Jay avatar
    45 posts
    Member since:
    Dec 2011

    Posted 20 Jan 2012 Link to this post

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

    Edit: I spoke too soon, see below
  5. Jay
    Jay avatar
    45 posts
    Member since:
    Dec 2011

    Posted 20 Jan 2012 Link to this post

    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 :)
  6. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2012

    Posted 01 Feb 2012 Link to this post

    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

  7. Jose
    Jose avatar
    13 posts
    Member since:
    May 2009

    Posted 14 Mar 2012 Link to this post

    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>
Back to Top
Kendo UI is VS 2017 Ready