This is a migrated thread and some comments may be shown as answers.

How to bind JSON data with Kendo Grid

3 Answers 3083 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Subhendu
Top achievements
Rank 1
Subhendu asked on 20 Feb 2014, 01:11 PM
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?

3 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 21 Feb 2014, 06:56 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Subhendu
Top achievements
Rank 1
answered on 25 Feb 2014, 01:08 PM
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 





0
Nikolay Rusev
Telerik team
answered on 26 Feb 2014, 09:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Data Source
Asked by
Subhendu
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Subhendu
Top achievements
Rank 1
Share this question
or