Kendo Grid not Binding to My WCF Service

Question 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

Question 2

Yes - remove the "d." in your columns definition. From the documentation, an example:

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: { q: "html5" } // search for tweets that contain "html5"
    }
  },
  schema: {
    data: "results" // twitter's response is { "results": [ /* results */ ] }
  }
});
dataSource.fetch(function(){
  var data = this.data();
  console.log(data.length);
});
</script>

The data: "results" just tells kendo that the array is contained in the object results. The column definition should not contain results.Column1, results.Column2, just Column1, Column2, etc...

columns: [{
                  field: "Name",
                  title: "Name"
              }, {
                  field: "LastModifiedDate",
                  title: "Last Modified"
              }, {
                  field: "Size",
                  title: "File Sized",
              }, {
                  field: "LastModifiedBy",
                  title: "Last Modified By"
              }]

Also, another issue I ran into later was with the count being wrong when doing server side paging. This was because I was missing the "total" element. The "total" element should return the TOTAL number of elements (not just the returned # of elements - if you are doing server side paging).

From the documentation

If schema.total is not specified the length of the Array returned by schema.data will be used. The schema.total option must be set if the serverPaging option is set to true.

Example

<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  }
  serverGrouping: true,
  schema: {
    total: "total" // total is returned in the "total" field of the response
  }
});
</script>

All together now

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

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

              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"
              }]
          });
      })

   </script>
</div>

What you should return

{
   "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
      }, /* ..... 8 other items if you are doing 10 per page ... */
   ],
   "totalCount": 534
}

EDIT Good catch Atanas, I missed that jsonp part. I have updated this code, and modified your code a little to adding serverPaging. Note: The server paging doesn't actually work as you have no backend logic to handle the paging, but the "count" element has been added. Should get you started.

http://trykendoui.telerik.com/uNIX