am I doing something wrong or is it a Pageable bug

9 posts, 0 answers
  1. Abdullah
    Abdullah avatar
    2 posts
    Member since:
    Dec 2011

    Posted 19 Jan 2012 Link to this post

    Hello everyone, 

    First of all ! let me tell you how much I LOVE this tool :) I just started playing around with the kendo and getting ready to integrate it into my projects.

    However, I was following the tutorial "Get Rolling With Kendo UI And PHP – Part 1" by the brilliant Burke Holland. 

    You can see the outcome here. The problem is, I assigned the pageSize to hold 3 records per page. However the pagination links don't appear unless you click on one of the column (sortable : true) then the paginations link appear for that session only (so if you refresh the pagination links will disappear and will show only the first 3 records) then you'll have to sort by clicking on  'name' or 'price columns to make them appear.

    the Javascript is as the following:
    <script>
            $(function() {
                $("#grid").kendoGrid({
                    dataSource:
                    {
                        transport:
                        {
                            read: "mod/basket_list.php"
                        },
                        schema:
                        {
                            data: "data"
                        },
                        pageSize: 8
                    },
                    columns: [
                        {
                            field : 'name',
                            title: 'NAME'
                        },
                        {
                            field : 'price',
                            title : 'THE PRICE'
                        }
                    ],
                    scrollable:false,
                    sortable: true,
                    pageable: true,
                    navigatable: false,
                    groupable: true
                });
            });
        </script>

    can you guide me through fixing this :)

    Thanks
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jan 2012 Link to this post

    Hi Abdullah,

    When server paging is used, i.e. the Grid is bound only to the current page (as in your case), you must supply a total count information in the JSON, otherwise the Grid will not know how many records you have and the pager cannot be generated.

    Here is a simplified demo of the correct implementation. Note the "total" property in the JSON, and the "total" key in the schema.

    http://jsfiddle.net/dimodi/F6ghT/

    http://www.kendoui.com/documentation/framework/datasource/configuration.aspx#total

    Kind regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Abdullah
    Abdullah avatar
    2 posts
    Member since:
    Dec 2011

    Posted 19 Jan 2012 Link to this post

    Thanks for your replay, 

    However, I am a bit newbie in json and its related matters. Would you provide more help in my specific situation. 

    my JavaScript is as displayed above. and my mod/basket_list.php is as follow

        while ($results = mysql_fetch_object($query))
        {
            $output[]=$results;
        }

    echo "{\"data\":" .json_encode($output). "}";

    How would you make this work ? 

    Regards :)
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jan 2012 Link to this post

    As demonstrated in my jsFiddle demo, your JSON response should read:

    {"data":[{"name":"Screen","price":"120.00"},{"name":"Keyboard","price":"222.00"},{"name":"Diamond","price":"999999.99"},{"name":"Item 3","price":"10.00"},
    {"name":"Item 5","price":"10.00"}], "total": 5}


    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jason
    Jason avatar
    7 posts
    Member since:
    Feb 2012

    Posted 19 Feb 2012 Link to this post

    I was having the same issue as described and your solution of adding a total value fixed the initial load of the grid. But if I click one of the pagination page numbers, the page numbers disappear.

    Any thoughts?
  7. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2012

    Posted 20 Feb 2012 Link to this post

    Jason - I am having *exactly* the same problem (if I click a pagination button they all disappear). I'll post with all the details as soon as I can.
    Paul Jones 
  8. Jason
    Jason avatar
    7 posts
    Member since:
    Feb 2012

    Posted 22 Feb 2012 Link to this post

    Paul, I found a solution from another post by a Kendo Admin... 

    http://www.kendoui.com/forums/framework/data-source/data-grid-pagination.aspx#1966195

    Check out the jsfiddle bit... theres a added data & total functions in the schema. 

    Worked like a charm for me.
  9. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2012

    Posted 24 Feb 2012 Link to this post

    Jason - Thanks for the post. I got it to work too -  hope this helps others. 
  10. Jason
    Jason avatar
    7 posts
    Member since:
    Feb 2012

    Posted 24 Feb 2012 Link to this post

    Glad to hear.
Back to Top
Kendo UI is VS 2017 Ready