Simple list from JSON file

3 posts, 0 answers
  1. Lan
    Lan avatar
    2 posts
    Member since:
    Apr 2017

    Posted 19 Apr 2017 Link to this post

    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. Lan
    Lan avatar
    2 posts
    Member since:
    Apr 2017

    Posted 20 Apr 2017 in reply to Lan Link to this post

    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",
     },
       ]
    }
     
    ?>
  3. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 21 Apr 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top