CODEWITHSUNDEEP
jsonweb-servicesuser-interfacegridkendo-ui
Greg Kopp
Greg Kopp

Reputation: 307

Kendo UI grid - not populating with JSON data

I've been struggling trying to get a simple web service/test page working using the Kendo UI grid. My web service is returning a string of JSON data:

[{"ord_number":"116347      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]

More accurately, here is what gets returned from the web service call (this is an ASP.NET web service. Nothing fancy)

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"ord_number":"116347      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348      ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]</string>

Here is the contents of the ASP.NET page that I was hoping would populate the data:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                $(document).ready(function () {

                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            type: "POST",
                            url: "http://localhost/GridTest/Services/WebService.asmx/GetLegsJSON",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            id: "ord_number",
                            fields: {
                                ord_number: { type: "string"},
                                ord_company: { type: "string" },
                                origin_cmp_id: { type: "string" },
                                origin_cmp_name: { type: "string" },
                                dest_cmp_id: { type: "string" },
                                dest_cmp_name: { type: "string" },
                                orderby_cmp_id: { type: "string" },
                                orderby_cmp_name: { type: "string" },
                                orderby_cty_nmstct: { type: "string" },
                                billto_cmp_id: { type: "string" },
                                billto_cmp_name: { type: "string" },
                                billto_cty_nmstct: { type: "string" },
                                ord_status_name: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    type: "json"
                });

                $("#grid").kendoGrid({
                    autobind: false,
                    dataSource: dataSource,
                    pageable: true,
                    columns: [
                        { title: "Order #", field: "ord_number" },
                        { title: "Company", field: "ord_company" },
                        { title: "Origin ID", field: "origin_cmp_id" },
                        { title: "Origin CN", field: "origin_cmp_name" },
                        { title: "Dest ID", field: "dest_cmp_id" },
                        { title: "Dest CN", field: "dest_cmp_name" },
                        { title: "Order By ID", field: "orderby_cmp_id" },
                        { title: "Order By CN", field: "orderby_cmp_name" },
                        { title: "Order By C/S", field: "orderby_cty_nmstct" },
                        { title: "BillTo ID", field: "billto_cmp_id" },
                        { title: "BillTo CN", field: "billto_cmp_name" },
                        { title: "BillTo C/S", field: "billto_cty_nmstct" },
                        { title: "Status", field: "ord_status_name" }
                    ]
                    });
                });
            </script>
        </div>
    </form>
</body>
</html>

But nothing populates but the headers in the table with "No items to display" in the footer.

For the life of me, I can't see what I am doing wrong.

Upvotes: 0

Views: 3936

Answers (3)

Cliff Liu
Cliff Liu

Reputation: 196

Try to add contentType property

read: {
    ...
    contentType: "application/json; charset=utf-8"
}

Upvotes: 0

rainabba
rainabba

Reputation: 4267

The fact that you get XML when browsing to WebService.asmx is nothing to worry about. That is the default configuration unless you've tampered with your web.config (or machine.config). Try using $.ajax() to consume that service and confirm that the result there is JSON as that is how the DataSource will do it. The issue has to do when a POST vs GET and when you use the autogenerated page provided by the .asmx, the service is accessed differently and with different headers than it is with $.ajax()

Also, stop using JavaScriptSerializer for your results. Create a class that represents your data model and set your webMethod to return as that Class then in the method, construct an object using that class and return that object. The WebService will automagically parse and return the JSON based on your ScriptMethod hints. A great article explaining this WAY too common mistake is http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/

Upvotes: 1

Atanas Korchev
Atanas Korchev

Reputation: 30671

Your web service doesn't return JSON. It returns XML. You should return JSON instead of XML. I recommend checking the following blog post: http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/

Also here is a sample web site which shows how to bind the Kendo Grid to an ASMX service: https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-web-service-crud

Upvotes: 2

Related Questions