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

remote Web API JSON data

2 Answers 370 Views

Data Source

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

Matthias asked on 31 May 2013, 05:00 PM

Hi guys,

I'm trying to us a simple existing remote Web API with Kendo datasource and can't get it working.
The JSON result is simple as below.
[
{"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1.0},
{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}
]

I can read and show the Products result with jQuery (see <div class="table-wrapper"> in the code below), but it won't get displayed in the defined grid (see <div class="grid-wrapper">).
This drives me crazy.
Tried to use jQuery -Version 1.9.1 but it doesn't work either.

Can anybody please tell me what do I miss ?

Many thanks for your support,
Matthias

<!DOCTYPE html>
<html>
<head>
    
    <link href="styles/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
    
    <link href="styles/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />

    
    <script src="scripts/jquery-2.0.1.min.js"></script>
    
    <script src="scripts/kendo/kendo.all.min.js"></script>

    <title>Dashboard</title>
</head>
<body>

    <div id="example" class="k-content">

        <div class="grid-wrapper">

            <div id="grid"></div>

            <script>
                var remoteDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:8945/api/Products",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                Name: { type: "string" },
                                Category: { type: "string" },
                                Price: { type: "number" }
                            }
                        }
                    }

                });


                $("#grid").kendoGrid({
                    dataSource: remoteDataSource,
                    height: 200
                });

            </script>
        </div>

        <div class="table-wrapper">
            <div id="divResult">

                <script>
                    function GetAllProducts() {
                        jQuery.support.cors = true;
                        $.ajax({
                            url: 'http://localhost:8945/api/Products',
                            dataType: 'json',
                            success: function (data) {
                                WriteResponse(data);
                            },
                        });
                    }
                    function WriteResponse(products) {
                        var strResult = "<table><th>ID</th><th>Name</th><th>Category</th><th>Price</th>";
                        $.each(products, function (index, product) {
                            strResult += "<tr><td>" + product.Id + "</td><td> " + product.Name + "</td><td>" + product.Category + "</td><td>" + product.Price + "</td></tr>";
                        });
                        strResult += "</table>";
                        $("#divResult").html(strResult);
                    }

                    $(document).ready(function () {
                        GetAllProducts();
                    });
                </script>
            </div>
        </div>
    </div>

</body>
</html>

2 Answers, 1 is accepted

Accepted

answered on 03 Jun 2013, 10:00 AM

Hi Atanas,

Thanks for your reply.
I was not aware of the fact, that this applies to ASP .NET Web API and Kendo UI Web Application on the same machine (localhost). Adding:

    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

to the <system.webServer> section of my Web.config solves the problem at least for Chrome and Firefox. IE9 seems to lack support for CORS.

regards,
Matthias