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