title: Kendo UI Grid is not working correctly with asp.net web api odata enabled service
body: <p>We are using kendo(2013.3.1119) &amp; knockout(2.3)</p>
  
  <p>We've created a very simple grid with remote odata source bounded to ASP.NET Web API</p>
  
  <p>Consider following codes:</p>
  
  <pre><code>        $(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 &amp; 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' }]
          });
  </code></pre>
  
  <p>Following items working correctly:</p>
  
  <p>1- Grid is created.</p>
  
  <p>2- First query with $inlineCount=allpages and take=10 is sent.</p>
  
  <p>3- Response is received and row templates are generated and data is shown.</p>
  
  <p>4- The $(element).data('kendoGrid').dataSource.data() is populated with objects.</p>
  
  <p>But we've following problem:</p>
  
  <p><strong>$(element).data('kendoGrid').pager.dataSource.data() is empty so our pager is not working properly.</strong></p>
  
  <p>So what is wrong here with our implementation? Is this a correct Config?</p>
  
  <p>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: </p>
  
  <p><a href="https://stackoverflow.com/questions/20629748/kendo-grid-datasource-with-odata-format-json">kendo Grid DataSource with OData format = json</a></p>
  
  <p>Thanks</p>
  
  <p>Rev 2: Upon requests, I've added following information which are about response of grid's request:</p>
  
  <pre><code>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", ...
  </code></pre>
  
  <p>Rev 3:</p>
  
  <p>I changed my Config to use the following WCF Data Service sample of Kendo UI demo,
  <a href="http://demos.kendoui.com/service/Northwind.svc/Orders" rel="nofollow noreferrer">http://demos.kendoui.com/service/Northwind.svc/Orders</a>
  But unfortunately, it didn't work for me.</p>
  
  <p>Rev 4:</p>
  
  <p>I've downgraded to kendo.all.min 2012.2.913, and my project is working fine(!) now with both Web API &amp; knockout.</p>
  
  <p>But I've created another sample, with WCF Data Service instead of Web API &amp; without knockout </p>
  
  <p>templates, and it's working fine with latest version of kendo(2013.3.1119)(But outside of my project)</p>
  
  <p>Is there any problem with knockout or web api?</p>
  
  <p>Rev 5:</p>
  
  <p>I've moved the sample of WCF Data Service which is working fine to my project.</p>
  
  <p>And it's not working!</p>
  
  <p>For what reason? Pager is working with old version, both in my project and outside of my project, but</p>
  
  <p>latest version is not working in my project, even without knockout and WCF, but latest version is </p>
  
  <p>working outside of my project.</p>
  
  <p>What should I do now?</p>
  
  <p>Rev 6: <strong>With removing kendo.dataViz.js</strong>, data grid is working with ASP.NET Web API OData, 
  knockout templates and paging.</p>
  
  <p><strong>Everything now works fine in my project.</strong></p>
  
  <p>Rev 7: I've created a very simple kendo grid on jsfiddle, which it's pager is not working while dataViz is referenced.</p>
  
  <p>But if you remove the dataViz reference, pager will work fine.</p>
  
  <p><a href="http://jsfiddle.net/ysmoradi/8L9Pn/2/" rel="nofollow noreferrer">http://jsfiddle.net/ysmoradi/8L9Pn/2/</a></p>
  
  <p>Note: Please check that jsfiddle on chrome, and all css are not referenced, </p>
  
  <p>so it's ui is not beautiful, but adding all css won't solve the problem.</p>