KendoUI grid doesn't work with JSON

Question

I'm trying to integrate KendoUI (without server wrappers) into my ASP.NET MVC application:

Here is HTML file (only required code):

<div id="example" class="k-content">
    <div id="clientsDb">
        <div id="grid" style="height: 380px"></div>
    </div>

    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type           : "json",
                    transport      : {
                        read       : {
                            url     : "data.json",
                            type    : "POST",
                            dataType: "json"
                        },
                        contentType: "application/json"
                    },
                    schema         : {
                        data : "data",
                        total: "total"
                    },
                    pageSize       : 10,
                    serverPaging   : true,
                    serverFiltering: true,
                    serverSorting  : true
                },
                height    : 430,
                groupable : false,
                sortable  : false,
                pageable  : true,
                columns   : [
                    {
                        field: "PageUrl",
                        title: "PageUrl",
                        width: 140
                    },
                    {
                        field: "Id",
                        title: "Id",
                        width: 190
                    }
                ]
            });
        });
    </script>
</div>

And here is the returned JSON result from "ActionMethodName" method of "MyContollerName":

{
    "Data" : [
        { "Id"     : 30, "PageUrl": "http://www.someurl.com" },
        { "Id"     : 29, "PageUrl": "http://www.someurl.com/" },
        { "Id"     : 26, "PageUrl": "http://www.someurl.com" }
    ],
    "Total": 10
}

But nothing is rendered (grid is rendered, results are not). Getting infinitely rendered "loading" icon. Could you anybody help with it?

I'm also getting the following JS error: "TypeError: Cannot call method 'slice' of undefined /Scripts/kendo/2013.3.1119/kendo.web.min.js:13"

Answer 1

In the schema you defined that the data is in something called data (lowercase) while you are returning it with uppercase.

Change the schema to:

schema         : {
    data : "Data",
    total: "total"
},

and it will work.