[SOLVED] Kendo Grid misbehaving in certain situations with Durandal/RequireJS

Kendo Grid misbehaving in certain situations with Durandal/RequireJS

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?

Solution

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