CODEWITHSUNDEEP
kendo-uikendo-grid
Salman Shaykh
Salman Shaykh

Reputation: 221

Bind Json result to Grid of kendoUI using ODATA

I want to bind Json result to kendoUI grid using ODATA v4 but i am unable to do so. Below code works for the url http://services.odata.org/v2/Northwind/Northwind.svc/Customers which returns a xml result but why dont it work for http://services.odata.org/v4/Northwind/Northwind.svc/Customers which returns a json. Any help would be appreciated.

 <!DOCTYPE html>
    <html>
    <head>
        <base href="http://demos.telerik.com/kendo-ui/grid/index">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
    <script src="http://cdn.kendostatic.com/2015.1.408/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/jszip.min.js"></script>
    </head>
    <body>

    <div id="example">

        <div id="grid"></div>

        <script>
            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:           "http://services.odata.org/v2/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }
                        },
                        pageSize: 20
                    },
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        field: "ContactName",
                        title: "Contact Name",
                        width: 200
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title"
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
                });
            });
        </script>
    </div>


    </body>
    </html>

Upvotes: 0

Views: 632

Answers (2)

Amal Dev
Amal Dev

Reputation: 1978

You need to add "odata-v4" as type in the datasource. Please refer the fiddle

 $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata-v4",
                    transport: {
                        read:           "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",dataType: "jsonp",data: { q: "#kendoui" }

Upvotes: 1

Robin Giltner
Robin Giltner

Reputation: 3055

Couple of things. I don't think the v4 implementation on services.odata.org supports jsonp. The return value doesn't appear to be wrapped. Also you need to change your type to "odata-v4" for v4 odata. Also the return array isn't inside a property on the return object called "results", it's now "value" so I had to set that in the schema on the dataSource. I also changed the transport.read into an object and added the requisite properties.

dataSource: {
  type: "odata-v4",
  transport: {
    read: {
      url: "http://services.odata.org/v4/Northwind/Northwind.svc/Customers",
      dataType: "json",
      data: {
        q: "#kendoui"
      }
    }
  },
  pageSize: 20,
  schema: {
    data: "value"
  }
},

See working sample at http://jsbin.com/satafa/1/edit?html,js,output

Upvotes: 1

Related Questions