DataSource with Local JSON File not loading in Grid

5 posts, 0 answers
  1. Brian
    Brian avatar
    7 posts
    Member since:
    Jun 2011

    Posted 26 Jan 2012 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    7 posts
    Member since:
    Jun 2011

    Posted 26 Jan 2012 Link to this post

    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
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 27 Jan 2012 Link to this post

    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!
  6. Omar
    Omar avatar
    8 posts
    Member since:
    Oct 2012

    Posted 06 Oct 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready