How to bind JSON data with Kendo Grid

4 posts, 0 answers
  1. Subhendu
    Subhendu avatar
    10 posts
    Member since:
    Mar 2013

    Posted 20 Feb 2014 Link to this post

    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?
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 21 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Subhendu
    Subhendu avatar
    10 posts
    Member since:
    Mar 2013

    Posted 25 Feb 2014 in reply to Nikolay Rusev Link to this post

    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 





  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 26 Feb 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready