Kendo Grid not Binding to My WCF Service

Question

Basically, here is an example of my data that is returned by the web service:

{
   "d":
   [
      {
         "__type":"MyDataItem:#MyProject.SomeSpace.Data",
         "Format":"msw12",
         "Id":"0900d60b8712e4ea",
         "LastModifiedBy":"",
         "LastModifiedDate":null,
         "Name":"Jeff's tax document",
         "Size":12727
      },
      {
         "__type":"MyDataItem:#MyProject.SomeSpace.Data",
         "Format":"pdf",
         "Id":"0900d60b8714b1d8",
         "LastModifiedBy":"",
         "LastModifiedDate":null,
         "Name":"Bob's Test File",
         "Size":11911784
      }
   ]
}

Here is my Kendo Grid code. It loads, calls the service, but then has an error:

<div id="example" class="k-content">
   <div id="grid"></div>
   <script type="text/javascript">
      $(document).ready(function () {

          $("#grid").kendoGrid({
              dataSource: {
                  type: "odata",
                  transport: {
                      read: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
                      dataType: "json"
                  },
                  schema: {
                      data: "d"
                  },
                  pageSize: 10,
                  serverPaging: true,
                  serverSorting: true
              },

              scrollable: {
                  virtual: true
              },
              height: 250,
              selectable: "row",
              columns: [{
                  field: "d.Name",
                  title: "Name"
              }, {
                  field: "d.LastModifiedDate",
                  title: "Last Modified"
              }, {
                  field: "d.Size",
                  title: "File Sized",
              }, {
                  field: "d.LastModifiedBy",
                  title: "Last Modified By"
              }]
          });
      })

   </script>
</div>

The error I see in Chrome is: Uncaught SyntaxError: Unexpected token :

However, that error is in reference to the json data that comes back and it is all on one line so it doesn't help me find it.

I noticed that my data coming back from the service has a "d" at the beginning of it at a root node. The other examples of json data I have seen online have been much more simple and didn't have this root node on them. We might be able to update the service to return the data differently if need be. I just want to know how to edit my kendo code to put this stuff up on the grid. I can research and tweak it after that I think.

Do I need the "d." reference in the columns declaration? I think I might have that part wrong.

Thank you for any help!

Answer 1

I see a few problems. You have specified 'odata' but your service doesn't appear to be OData end point. Then you have set dataType as a transport option which it isn't - it is an option of transport.read. Last you need to remove the d from the field names of the columns.

Here is how the fixed configuration should look like:

    $("#grid").kendoGrid({
          dataSource: {
              transport: {
                read: {
                  url: "http://localhost:4567/Services/MYSERVICE.svc/GetListing",
                  dataType: "json"
                }
              },
              schema: {
                  data: "d"
              },
              pageSize: 10
          },
          scrollable: {
              virtual: true
          },
          height: 250,
          selectable: "row",
          columns: [{
              field: "Name",
              title: "Name"
          }, {
              field: "LastModifiedDate",
              title: "Last Modified"
          }, {
              field: "Size",
              title: "File Sized",
          }, {
              field: "LastModifiedBy",
              title: "Last Modified By"
          }]
      });

And a live demo: http://trykendoui.telerik.com/@korchev/IGah