How to bind JSON data with Kendo Grid

Question

Using MY WCF Service I am exposing JSON data:

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

Here is a sample of the returned JSON:

{"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>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "http://localhost/KendoServices/Web/GetProductDetails"
                            },
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "OrderId",
                            title: "OrderId",
                            width: 140
                        }, {
                            field: "ProductId",
                            title: "ProductId",
                            width: 190
                        }, {
                            field: "UnitPrice",
                            title: "UnitPrice"
                        }, {
                            field: "quanity",
                            width: 110
                        }]
                    });
                });
            </script>

For some reason, I'm unable to see any data on grid. There might be something wrong with the way I'm trying to bind my data.

Answer 1

The resultant JSON is the culprit here. The kendo dataSource by default looks for the return object to have the items in an array called results. Simple to fix. Just need to define where the data is in the response JSON object.

dataSource: {
    transport: {
        read: {
             url: "http://localhost/KendoServices/Web/GetProductDetails",
             dataType: 'json'
        }
    },
    pageSize: 10,
    schema: {
        data: function(response) {
            return response.d;
        }
    }
},

--Edit... Whoops, missed something else. Your type: 'json' should be inside your read object, and should be dataType: 'json'

Answer 2

try this

dataSource: {
    transport: {
            read: {
                   url: "http://localhost/KendoServices/Web/GetProductDetails",
                   contentType: 'application/json; charset=utf-8',
                   dataType: "json"
                  }
    },
    schema: {
                 data: "d"
            }
    }
}

Answer 3

This is how I've done it:

    $("#grid").kendoGrid({
        dataSource: {               
            transport: {
                    read: { 
                            url : pUrl,
                            dataType: "json"
                    }
            },
            pageSize:40,                
            schema: {
                data: function(response) {
                    return response.json;
                }
            }               

        },
        height: 550,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: false,
            pageSizes: false,
            buttonCount: 5
        },
        columns: [
            {
                field: "SEQ_NO",
                title: "No",
                filterable: false,
                width: 120
            }, {
                field: "LOT_NO",
                title: "Lot No (INS' No)"
            }, {
                field: "TYPE",
                title: "INPUT (At 100% Burden)"
            }, {
                field: "ATTRIBUTE01",
                title: "1.0 In"
            }, {
                field: "ATTRIBUTE02",
                title: "2.0 In"
            }, {
                field: "ATTRIBUTE03",
                title: "0.05 In"
            }, {
                   field: "RESILT",
                   title: "RESILT"
            }
        ]
    });