DataSource with Local JSON File not loading in Grid

[Brian]

I am really struggling with this. I have tried looking at every forum example and made sure that I have the right code and the right format for the JSON file, but I cannot get the grid to show anything but the column headers.

Any help would be appreciated.

Thanks,
Brian

[Rosen]

Hi Brian,

I suspect that the cause for the issue you have described is invalid JSON format. You should wrap the field name of the JSON with double quotes.
Also I have noticed that the order in which the JavaScript files are included is not correct. Please take a look at this help article about the correct order of JavaScript dependencies. 

All the best,
Rosen
the Telerik team

[Brian]

OK, so I made a change to the field name of the data by putting in double quotes within the json file and I changed my script calls to just include the jquery and kendo.all script files so that I wouldn't dependency problems.

Unfortunately, this did not fix my problem. I am still seeing nothing but the grid column headers and no date from the json file. Any thoughts? I have attached the updated files.

Brian

[Rosen]

Brian,

It seems that you have changed only the "data" field of the result to have double quotes. You should change all field names.

All the best,
Rosen
the Telerik team

[Omar]

Hello,

I could successfully load json a file but the paging and editable is not wrong.

the paging shows only correct items when I click one of the arrows (< or >). otherwise it show just "No items to display"

my json file looks like this:

{

    "note": [

        {

            "NoteID": "1",

            "NoteDate": "10/10/2012",

            "NoteText": "A test"

        },

        {

            "NoteID": "2",

            "NoteDate": "10/10/2013",

            "NoteText": "B test"

        },

        {

            "NoteID": "3",

            "NoteDate": "10/10/2014",

            "NoteText": "C test"

        },

        {

            "NoteID": "4",

            "NoteDate": "10/10/2015",

            "NoteText": "D test"

        },     

        {

            "NoteID": "5",

            "NoteDate": "10/10/2016",

            "NoteText": "E test"

        },

        {

            "NoteID": "6",

            "NoteDate": "10/10/2017",

            "NoteText": "F test"

        },

        {

            "NoteID": "7",

            "NoteDate": "10/10/2018",

            "NoteText": "G test"

        }                                                                  

    ]

}

the create/update/destroy function is not working
my grid setup looks like this:

// Note - Grid

        $(document).ready(function(){

            $("#note").kendoGrid({

                dataSource: {

                    transport: {

                        read: {

                            url: "crud/note/note.json",

                            dataType: "json"

                        },

                                update:{

                                    url: "crud/note/note.json",

                                    dataType: "json",

                                    }

                    },

                          

                         parameterMap: function(options, operation) {

             if (operation !== "read" && options.models) {

             return {models: kendo.stringify(options.models)};

             }

             },

                          

                    schema: {

                        data: "note",                      

                                model:{

                                    id:"NoteId",

                                    fields:{

                                        NoteDate: {type:"date"},

                                        NoteText: {type:"string"},

                                        }

                                    }

                    }

                },

 

                pageSize:3,

                batch:true,                

                sortable: true,

                toolbar:["create"],

                editable:"inline",

                pageable:true,

                height:250,

                selectable:"multiple",

                 

                columns: [

                    {field:"NoteDate", title:"Note Date", template:'#=kendo.toString(NoteDate, "dd/MM/yyyy") #'},

                    {field:"NoteText"},

                    {command:["edit","destroy"], title:" "}

                ]

            });

        });

Please help me as I'm a newbie in KendoUI.