Grid bound to json data always empty

[David]

Hi, All;

I'm trying to build a simple grid bound to json data. The grid shows up but it's always empty. Help?

<div id=grid>

</>

<script type="text/javascript">

    var dataSource = new kendo.data.DataSource({

        transport: {

            read: {

                url: "http://localhost:3223/DataServices/DomainService.svc/JSON/GetDATA",

                dataType: "json"

            }

        },

        schema: {

            data: "RootResults"

        }

    });

    dataSource.read();

</script>

<script type="text/javascript">

    $(document).ready(function () {

        $("#grid").kendoGrid({

            dataSource: dataSource,

            columns: [

                { title: "ID", field: "ID" },

                { title: "CODE1", field: "CODE1" },

                { title: "CODE2", field: "CODE2" }

            ],

            height: 360,

            groupable: false,

            sortable: false,

            pageable: false,

            scrollable: false

        });

    });

</script>

[David]

OK, a lot of people must be rolling their eyes at me! I've touched this up so it has at least some chance of working, but now I just get the spinning icon over the grid forever...

<div id=grid>

</div>

<script type="text/javascript">

        $(document).ready(function () {

            var dataSource = new kendo.data.DataSource({

                transport: {

                    read: {

                        url: "http://localhost:3223/DataServices/DomainService.svc/JSON/GetDATA",

                        dataType: "json"

                    }

                },

                schema: {

                    data: "RootResults"

                }

            });

            $("#grid").kendoGrid({

                dataSource: dataSource,

                autobind: true,

                columns: [

                    { title: "ID", field: "ID" },

                    { title: "CODE1", field: "CODE1" },

                    { title: "CODE2", field: "CODE2" }

                ],

                height: 360,

                groupable: false,

                sortable: false,

                pageable: false,

                scrollable: false

            });

        });

    </script>

[David]

Could it have something to do with the json file delivered by a .net domain service? Here's the start of the file...

{"GetDATAResult":{"TotalCount":99,"RootResults":[{"ID":1,"CODE1":"aaa","CODE2":"        "},{"ID":2,"CODE1":"bbb","CODE2":null}, ...

I'm specifying the data as "RootResults". Do I need to tell it to drill down from GetDATAResult to find the array?

[Alexander Valchev]

Hi David,

In the data function of the schema you have to specify the array that contains your data. Please try with the following code:

schema: {
    data: "GetDATAResult.RootResults",
    //in order to retrieve total number of records - that would be required if you decide to turn on paging
    total: "GetDATAResult.TotalCount",
    //it is recommended to define the fields
    model: {
        fields: {
            ID: { type: "number" },
            CODE1: { type: "string" },
            CODE2: { type: "string" }
        }
    }
}

Greetings,
Alexander Valchev
the Telerik team

[David]

Thanks!

I had actually written it exactly that way without knowing the syntax to follow the json tree, but I thought "there's no way I guessed it right" so I never bothered to run it. :-(