How to bind JSON data with Kendo Grid

[Subhendu]

Using MY WCF Service I am exposing JSON data.

[OperationContract]
 [WebGet(ResponseFormat=WebMessageFormat.Json)]
 List<ProductDetails> GetProductDetails();

The sample of JSON data returned is :

{"d":[{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quanity":12},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quanity":10},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quanity":5},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quanity":9},{"__type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":51,"UnitPrice":42.4000,"quanity":40}

Trying to bind that to Kendo Grid using :

 

<script type="text/javascript">
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                 read: function (options) {
                                $.ajax({
                                    url: "http://localhost/KendoServices/Web/GetProductDetails",
                                    dataType: "json",
                                    success: function (result) {
                                        options.success(result);
                                    }
                                });
                            },
                            batch: true,
                            schema: {
                       type: 'json',
                       model: {
                           id: "OrderId",
                           fields: {
                               OrderId: { type: "string" },
                               ProductId: { type: "string" },
                               UnitPrice: { type: "string" },
                               quanity: { type: "string" },
                               Discount: { type: "string" }
                              }
                            }
                         },
                            pageSize: 10
                        },
                        height: 430,
                        filterable: true,
                        groupable: true,
                        sortable: true,
                        pageable: true,
                        columns: [{
                            field: "OrderId",
                            title: "OrderId",
                            width: 140
                        }, {
                            field: "ProductId",
                            title: "ProductId",
                            width: 190
                        }, {
                            field: "UnitPrice",
                            title: "UnitPrice"
                        }, {
                            field: "quanity",
                            width: 110
                        },{
                            field: "Discount",
                            width: 110
                        }]
                    });
                });
            </script>

But not able to bind the data to Grid. I think it's not even accessing the service.

Where am I doing wrong?

[Nikolay Rusev]

Hello Subhendu,

You must define schema.data to instruct the data source which field in the response contains the resulting data set.
In your case it should be like this: 

...
{
 schema: {
  data: "d",
  ....
 }
...

Regards,
Nikolay Rusev
Telerik

[Subhendu]

Hi,
Providing the Schema as d ,but not helping.

Wanted to compare:
http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-schema.data

but look like http://demos.telerik.com/kendo-ui/service/twitter/search is down. Or Am I missing anything?

If you could let me know 

[Nikolay Rusev]

Hello Subhendu,

Here is an example using the data you've posted: http://jsbin.com/hodok/1/edit

What this sample do is to show binding to the `d` field in the response.

If this isn't your case, please modify it so that it replicates the behavior of your application. 

Regards,
Nikolay Rusev
Telerik