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

DataSource with Local JSON File not loading in Grid

4 Answers 440 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 26 Jan 2012, 06:24 AM
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

4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 26 Jan 2012, 09:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Brian
Top achievements
Rank 1
answered on 26 Jan 2012, 03:07 PM
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
0
Rosen
Telerik team
answered on 27 Jan 2012, 10:37 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Omar
Top achievements
Rank 1
answered on 06 Oct 2012, 03:41 PM
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.
Tags
Data Source
Asked by
Brian
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Brian
Top achievements
Rank 1
Omar
Top achievements
Rank 1
Share this question
or