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:
Thanks
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
8 Answers, 1 is accepted
0
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
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!
0
Abdullah
Top achievements
Rank 1
Rank 1
answered on 19 Jan 2012, 05:52 PM
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 :)
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). "}";
Regards :)
0
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
{"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!
0
Jason
Top achievements
Rank 1
Rank 1
answered on 19 Feb 2012, 07:19 PM
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?
Any thoughts?
0
Paul
Top achievements
Rank 1
Rank 1
answered on 20 Feb 2012, 05:54 PM
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
Paul Jones
0
Jason
Top achievements
Rank 1
Rank 1
answered on 22 Feb 2012, 03:51 PM
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.
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.
0
Paul
Top achievements
Rank 1
Rank 1
answered on 24 Feb 2012, 03:03 PM
Jason - Thanks for the post. I got it to work too - hope this helps others.
0
Jason
Top achievements
Rank 1
Rank 1
answered on 24 Feb 2012, 07:11 PM
Glad to hear.