CODEWITHSUNDEEP
jqueryasp.net-web-apikendo-uidatasource
jongillster
jongillster

Reputation: 23

Bind Kendo Grid to Web API

I would appreciate some help understanding an issue I am having attempting to bind data from a remote service (WebAPI) to a Kendo Grid using the Kendo Datasource. When I use the developer tools in Chrome I can see that the service is being called and json data is being returned - the problem is the data is not rendered into the grid.

Here's is the HTML for a very simple page containing just the grid:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="css/kendo.common.min.css" rel="stylesheet" />
    <link href="css/kendo.default.min.css" rel="stylesheet" />

    <script src="lib/jquery.min.js"></script>
    <script src="lib/kendo.web.min.js"></script>

</head>
<body>

    <div id="reportGrid"></div>

    <script>

        $(document).ready(function ()
        {
            // Report datasource
            var reportsDataSource = new kendo.data.DataSource({

                // Transport
                transport: {
                    read: {
                        url: "http://localhost:54363/api/report",
                        dataType: "jsonp",
                        jsonpCallback: "reportCallback"
                    }
                },

                // Schema
                schema: {
                    model: {
                        fields: {
                            SerialNumber: { type: "string" },
                            Version: { type: "number" },
                            DateReceived: { type: "date" },
                            Title: { type: "string" }
                        }
                    }
                }
            });


            $("#reportGrid").kendoGrid(
            {
                dataSource: reportsDataSource
            });


        });

    </script>

</body>
</html>

When the page loads the web service is called and the JSON retrieved (I use JSONP since the site and service are in different domains). The service is called and the following JSON retrieved (I get this by examining the response in Chrome).

[{"SerialNumber":"1","Version":2,"DateReceived":"2013-08-01T16:01:12.5828003+01:00",...

I really do not understand why the grid is not populated.

Upvotes: 1

Views: 9060

Answers (4)

Anelook
Anelook

Reputation: 1277

I just had the same issue.

To fix it just add "data" property to schema, where check in what format you get values. Most probably you have something wrapping the Data object and you just need to return the list of the items.

schema: {
    data: function (response) {
        return response.Data;
    }
},

P.S. Sometimes I simply hate how much time it takes to figure out such optional but important properties of Kendo UI. I wish their documentation was better.

Upvotes: 0

jongillster
jongillster

Reputation: 23

I moved to using odata and it all started working as expected. The underlying error had something to do with the returned JSON from the web service not being correctly formatted - although for the life of me I couldn't figure out what was wrong with what the service was returning.

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30661

There is a sample web site showing Web API binding here: https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-webapi-crud

Perhaps it would help you to move forward.

Upvotes: 0

Petur Subev
Petur Subev

Reputation: 20193

If you have followed the explanation here you should be able to do it.

Upvotes: 1

Related Questions