This is a migrated thread and some comments may be shown as answers.

Simple list from JSON file

2 Answers 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lan
Top achievements
Rank 1
Lan asked on 19 Apr 2017, 07:47 PM

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: {
                               read: "http://localhost/Temp/examples/grid/data.json",
                           }
                       },
                       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

Sort by
0
Lan
Top achievements
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
Stefan
Telerik team
answered on 21 Apr 2017, 09:55 AM
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:

[{
        "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.
Tags
Grid
Asked by
Lan
Top achievements
Rank 1
Answers by
Lan
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or