Kendo Grid misbehaving in certain situations with Durandal/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?

Your code comments state that you do your paging locally. I imagine the problem is there. Can we see how you implement that? — Brett, Aug 14 '15 at 15:08
@Brett, hi.. yes, I have to do the paging locally with this one since OData actions do not return `odata.count` to collections that are not entities (see my post: http://stackoverflow.com/questions/31822755/passing-parameters-to-an-odata-get-method-which-returns-a-collection/31823976#31823976). The logic has not changed there.. the local paging was working perfectly before using Durandal/RequireJS.. again, no difference at all except that.. so not sure what's going on. — Matt, Aug 17 '15 at 10:20
Without providing a fiddle we can look at that can reproduce the problem, it would be impossible to guess. I asked to see how you locally implemented paging. How are you telling the grid what page it's on or how many records to skip? What is `serverPaging` set to? Etc. — Brett, Aug 17 '15 at 14:19
@Brett, serverPaging, serverFiltering and serverSorting are set to false. Also of note, I get the total count of items by setting the `schema.total` as follows: `total: function (data) { return data.value.length; },`. This has been working perfectly fine.. no problems at all.. until I started using Durandal. — Matt, Aug 18 '15 at 10:07
@Brett, please see my edit above.. I know what's causing it now, but I don't know why. — Matt, Aug 20 '15 at 03:04
The problem seems to be that `self.gridPageSize` is `undefined` at the time the grid is rendered. You should look deeper into Durandal's [composition lifecycle](http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks) and determine where you are going wrong. — Brett, Aug 25 '15 at 03:19
On a similar note, is `cacheViews: true` set on your composition binding perhaps? — Brett, Aug 25 '15 at 03:22

score 0 · Answer 1 · answered Aug 25 '15 at 03:17

0

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);

answered Aug 25 '15 at 03:17

Brett

4,268
1
13
28

score 0 · Accepted Answer · answered Nov 10 '15 at 22:53

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

Kendo Grid misbehaving in certain situations with Durandal/RequireJS

2 Answers2