The column headers are displaying but no data from the JSON file I used in my source.
<div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "json", serverPaging: true, serverSorting: true, pageSize: 100, transport: { } }, height: 543, scrollable: { virtual: true }, sortable: true, columns: [ { field: "FirstName", title: "First Name", width: 100 }, { field: "LastName", title: "Last Name", width: 100}, { field: "Email", title: "Email", width: 50 }, { field: "Desk", title: "Desk", width: 50 }, { field: "Mobile", title: "Mobile", width: 50 }, { field: "Location", title: "Location", width: 110 } ] }); }); </script> <style> /*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/ #grid table { min-width: 1190px; } </style> </div>
Maybe the JSON fine isn't properly formatted?
2 Answers, 1 is accepted
0
Lan
Top achievements
Rank 1
Rank 1
answered on 20 Apr 2017, 01:12 PM
OK, I at least have a grid showing with no data now
<body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "json", serverPaging: true, serverSorting: true, pageSize: 100, transport: { read: "data1.php", } }, height: 543, scrollable: { virtual: true, }, sortable: true, columns: [ { field: "Firstname", title: "First Name", width: 120 }, { field: "LastName", title: "Last Name", width: 120}, { field: "Email", title: "Email", width: 120 }, { field: "Desk", title: "Desk", width: 120 }, { field: "Mobile", title: "Mobile", width: 160 }, { field: "Location", title: "Location", width: 160 } ] }); }); </script> <style> /*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/ #grid table { min-width: 1190px; } </style> </div>
</body>
I tried putting the json data in to a php file
<?php{ [ { "FirstName": "aaa", "LastName": "bbb", "Email": "ccc", "Desk": "ddd", "Mobile": "eee", "Location": "fff", "Address": "ggg", }, { "FirstName": "aaa", "LastName": "bbb", "Email": "ccc", "Desk": "ddd", "Mobile": "eee", "Location": "fff", "Address": "ggg", }, { "FirstName": "aaa", "LastName": "bbb", "Email": "ccc", "Desk": "ddd", "Mobile": "eee", "Location": "fff", "Address": "ggg", }, ]}?>0
Hello Lan,
I can assume that the issue occurs because the provided JSON is not in a valid JSON format.
Once I formatted the JSON the Grid is populated as expected:
http://dojo.telerik.com/ahEhA
Also, the column Firstname, the field is with small N and in the JSON is with capital N.
I hope this will help to resolve the issue.
Regards,
Stefan
Telerik by Progress
I can assume that the issue occurs because the provided JSON is not in a valid JSON format.
Once I formatted the JSON the Grid is populated as expected:
[{ "FirstName": "aaa", "LastName": "bbb", "Email": "ccc", "Desk": "ddd", "Mobile": "eee", "Location": "fff", "Address": "ggg" }, { "FirstName": "aaa", "LastName": "bbb", "Email": "ccc", "Desk": "ddd", "Mobile": "eee", "Location": "fff", "Address": "ggg" }]http://dojo.telerik.com/ahEhA
Also, the column Firstname, the field is with small N and in the JSON is with capital N.
I hope this will help to resolve the issue.
Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.