Kendo Grid misbehaving in certain situations with Durandal/RequireJS - requirejs

Question

BACKGROUND:
I have an existing site which makes use of the following technologies:
ASP.NET MVC5,
KnockoutJS,
Kendo UI 2014.1.318
Web API 2
OData v3
There are many Kendo Grids on my site, all working perfectly fine. Until now, that is... when I started integrating Durandal.
PROBLEM:
95% of the grids are perfectly fine, but there are 2 of them, which are getting data from an OData v3 Action (POST action). For example:
[EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]
[HttpPost]
public IQueryable<ServiceInfoResult> GetServices(ODataActionParameters parameters)
{
}
Yes, it's unusual, but for reasons I won't go into, I have data coming from an OData (POST) Action. The grids work fine usually, I just have to make sure to set the following:
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
//return data["odata.count"]; // this is the one normally used for other grids, but not here...
// instead, I need to use the following and do paging locally, which is fine, since there's a VERY small number of records, so there's no issue.
return data.value.length;
},
//etc
}
Anyway, now that I am using Durandal/RequireJS, something weird is happening...; on first load everything looks perfectly fine, but when clicking on a page (2, 3, 4, etc...), then the grid shows ALL of the records even though at the footer of the grid it still says showing 11-20 of 238 items and has the page numbers.
Again, I say it was working fine before. Does anyone have any idea as to why this might be happening and what I can do about it?
UPDATE
I just discovered something. With all my grids, I am using a property on the viewModel to specify the gridPageSize. Basically, I am doing this:
var ViewModel = function () {
var self = this;
self.gridPageSize = 10;
//etc
self.attached = function () {
//etc
self.gridPageSize = $("#GridPageSize").val(); //this is a hidden field I am using to get the page size which was set in admin area
//etc
}
//etc
and in the grid configuration, I have:
pageSize: self.gridPageSize,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
//etc
This works perfectly fine with all the grids that use server-side paging. However, this grid is using client-side paging. What I did now was simply the following:
pageSize: 10,
and now it works as expected. This is a good workaround, but not perfect, as I cannot dynamically set the page size. Any ideas as to what's happening here?

Answer 1

You can dynamically change the pageSize of your grid. All you need to do is call the pageSize() method of the grid's dataSource and it should work as expected.
$('#grid').data('kendoGrid').dataSource.pageSize(100);

Answer 2

This is no longer an issue, because OData 5.7 now returns #odata.count for actions/functions returning collections of complex types. Previously, I turned off server side paging and filtering.. just got all the data on the client, which I didn't like, but had no choice... but now I can use server side paging and don't need to care about this weird problem anymore. More info on the OData fix here: https://github.com/OData/WebApi/issues/484#issuecomment-153929767