locked
bind kendo grid by using the wcf service which is returning jsonp object RRS feed

  • Question

  •  I have a service which is returning data in jsonp format,i want to bind that data into my kendo grid with creating my own schema, please help me if u have any idea..
    Ajaya kumar nayak Sharepoint developer Mumbai India
    Wednesday, February 1, 2012 9:58 AM

All replies

  • Hi

    Here is the code snippet to achieve that. I am using the Northwind WCF Data Service hosted at odata.org. For the Kendo UI Grid styling and JS please look at the documentation to include the necessary JS and StyleSheets. Following snippet connects to Orders service and paints the grid.

    <body>
            <a href="../index.html">Back</a>
            <div class="description">Binding to remote data</div>
            <div id="example" class="k-content">
                <div id="grid"></div>
                <script>
                    var dateRegExp = /^\/Date\((.*?)\)\/$/;
    
                    function toDate(value) {
                        var date = dateRegExp.exec(value);
                        return new Date(parseInt(date[1]));
                    }
    
                    $(document).ready(function() {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://services.odata.org/Northwind/Northwind.svc/Orders"
                                },
                                schema: {
                                    model: {
                                        fields: {
                                            OrderID: { type: "number" },
                                            Freight: { type: "number" },
                                            ShipName: { type: "string" },
                                            OrderDate: { type: "date" },
                                            ShipCity: { type: "string" }
                                        }
                                    }
                                },
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            height: 250,
                            filterable: true,
                            sortable: true,
                            pageable: true,
                            columns: [{
                                    field:"OrderID",
                                    filterable: false
                                },
                                "Freight", {
                                    field: "OrderDate",
                                    template: '#= kendo.toString(toDate(OrderDate), "MM/dd/yyyy")#'
                                },
                                "ShipName",
                                "ShipCity"
                            ]
                        });
                    });
                </script>
            </div>
        </body>
    
    

     

    regards

    Lohith

    @kashyapa


    regards kashyapa
    Monday, February 6, 2012 8:01 AM