Kendo UI Grid is not working correctly with asp.net web api odata enabled service

Question

We are using kendo(2013.3.1119) & knockout(2.3)

We've created a very simple grid with remote odata source bounded to ASP.NET Web API

Consider following codes:

        $(element).kendoGrid({
            dataSource: {
                type: 'odata',
                transport: {
                    read: { url: '/odata/VehicleGroups', dataType: 'json' }
                },
        schema: {
          data: function(response) {
                return response.value;
            },
            total: function (response) {
                      return response['odata.count'];
                 }
            },
                serverSorting: true,
                serverPaging: true,
                serverFiltering: true
            },
            dataBound: function () {
                // we'are using knockout templates instead of kendo templates,
                // so after data load & after all row templates are created, we call following code to apply bindings.
                ko.memoization.unmemoizeDomNodeAndDescendants(element);
            },
            autoBind: true,
            rowTemplate: function (item) {
                // some codes are omitted here.
                // following code will use knockout template.
                return ko.renderTemplate('rowTemplate', context.createChildContext(item));
            },
            toolbar: function () {
                return ko.renderTemplate('toolbar', context);
            },
            pageable: {
                pageSize: 10
            },
            sortable: true,
            resizable: true,
            reorderable: false,
            columns: [{ field: 'dVehicle_01', title: 'Unit/Vehicle Number' },
                      { field: 'dVehicle_02', title: 'Vehicle Identification Number' },
                      { field: 'dVehicle_04', title: 'Vehicle Type' },
                      { field: '', title: 'Actions' }]
        });

Following items working correctly:

1- Grid is created.

2- First query with $inlineCount=allpages and take=10 is sent.

3- Response is received and row templates are generated and data is shown.

4- The $(element).data('kendoGrid').dataSource.data() is populated with objects.

But we've following problem:

$(element).data('kendoGrid').pager.dataSource.data() is empty so our pager is not working properly.

So what is wrong here with our implementation? Is this a correct Config?

At first we've had a problem with our response of OData web service, which is now managed as you can see in this post:

kendo Grid DataSource with OData format = json

Thanks

Rev 2: Upon requests, I've added following information which are about response of grid's request:

textStatus: "success"

jqXhr.statusText: "OK"

jqXhr.responseJSON: 
    odata.count: "29"
    odata.metadata: "http://localhost:2452/odata/$metadata#VehicleGroups"
    value: Array[10]

jqXhr.getAllResponseHeaders():
    "Pragma: no-cache
    Date: Sat, 21 Dec 2013 07:20:00 GMT
    Server: Microsoft-IIS/8.0
    X-AspNet-Version: 4.0.30319
    X-Powered-By: ASP.NET
    Content-Type: application/json; charset=utf-8
    Cache-Control: no-cache
    DataServiceVersion: 3.0
    Content-Length: 7192
    Expires: -1"

jqXhr.state(): "resolved"

jqXhr.responseText:
    "{
      "odata.metadata":"http://localhost:2452/odata/$metadata#VehicleGroups","odata.count":"29","value":[
        {
          "YearGroup":[

          ],"Id":"fdd6a5e0-6587-11e3-978d-2797cb4c371a","Version":"122","DateOfArchive":"2013-12-15T12:54:49.0503312Z","IsArchived":false,"ISV":true,"CreatedBy":"ae5882fb-b833-46d7-9f58-0505ec2a6f8f","CreatedTime":"2013-12-15T12:54:49.0973461Z","LastModifiedTime":"2013-12-15T12:54:49.0973461Z","LastModifiedBy":"ae5882fb-b833-46d7-9f58-0505ec2a6f8f", ...

Rev 3:

I changed my Config to use the following WCF Data Service sample of Kendo UI demo, http://demos.kendoui.com/service/Northwind.svc/Orders But unfortunately, it didn't work for me.

Rev 4:

I've downgraded to kendo.all.min 2012.2.913, and my project is working fine(!) now with both Web API & knockout.

But I've created another sample, with WCF Data Service instead of Web API & without knockout

templates, and it's working fine with latest version of kendo(2013.3.1119)(But outside of my project)

Is there any problem with knockout or web api?

Rev 5:

I've moved the sample of WCF Data Service which is working fine to my project.

And it's not working!

For what reason? Pager is working with old version, both in my project and outside of my project, but

latest version is not working in my project, even without knockout and WCF, but latest version is

working outside of my project.

What should I do now?

Rev 6: With removing kendo.dataViz.js, data grid is working with ASP.NET Web API OData, knockout templates and paging.

Everything now works fine in my project.

Rev 7: I've created a very simple kendo grid on jsfiddle, which it's pager is not working while dataViz is referenced.

But if you remove the dataViz reference, pager will work fine.

http://jsfiddle.net/ysmoradi/8L9Pn/2/

Note: Please check that jsfiddle on chrome, and all css are not referenced,

so it's ui is not beautiful, but adding all css won't solve the problem.

Answer 1

The odata configuration for ASP.NET WebAPI is slightly different and some fine tuning is requiredd - such as total field of the response and the data field.

The Kendo team have shared a working example on the following GutHub public repo. The index page with the dataSource configuration can be found here. The Conoller is available here.

I hope this info troubleshoots what you faced.

Answer 2

If you put kendo.web & kendo.gauge on the same page, you can see this error and lots of other unclear errors. In this case you should use kendo.all instead of those files.