angular-kendo grid pagesize not working

[Donna Stewart]

I have an ASP.NET MVC solution in which I am using the angular-kendo directives.  I have a dropdownlist with an onchange event which populates a grid.  I have set the pagesize on the grid's datasource, but I can't seem to get it to work.  All of the rows brought back from the datasource read show in the grid and the pager info shows NaN - NaN of 30 items.  Any help is very much appreciated!

Here is the Index.cshtml with the dropdownlist:

@{
    Layout = "~/Areas/admin/Views/Shared/_Layout.cshtml";
}
<div ng-controller="adminController">
    <div class="row">Customers
        <select id="customerDDL"
                kendo-drop-down-list
                k-data-source="customers"
                k-data-text-field="'companyName'"
                k-data-value-field="'companyCode'"
                k-option-label="'Select a customer...'"
                k-on-change="customerChanged(kendoEvent)"
                k-on-data-bound="onDDLDataBound(kendoEvent)"
                k-auto-bind=false
                style="width: 400px">
        </select>
    </div>
<div ng-view="" class="tab-content"></div>
</div>

Here is the angular controller with the ddl change event and the grid definition:

'use strict';

adminApp.controller('adminController',
    function ($scope, GetCustomers) {
        $scope.customers = GetCustomers.customers.query();

        $scope.customerChanged = function (e) {
            var _usersgrid = $("#usersGrid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: '/admin/Home/GetUsers/' + e.sender.value(),
                            dataType: 'json',
                            type: "GET"
                        }
                    },
                    pagesize: 10,
                    serverPaging: true
               },
                pageable: true,
                columns: [
                    { field: "UserKey", hidden: true },
                    { field: "UserId", hidden: true },
                    { field: "UserPassword", hidden: true },
                    { field: "UserTitle", hidden: true },
                    { field: "UserFName", title: "First Name" },
                    { field: "UserLName", title: "Last Name" },
                    { field: "UserEmailID", hidden: true },
                    { field: "UserTimeout", hidden: true },
                    { field: "UserEditableFlag", hidden: true },
                    { field: "UserStartDate", hidden: true },
                    { field: "UserEndDate", hidden: true },
                    { field: "UserLastLogin", hidden: true },
                    { field: "UserFailedAttempts", hidden: true },
                    { field: "Carrier", hidden: true }
            ]
        });

        var _authusersgrid = $("#authUsersGrid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: '/admin/Home/GetAuthorizedUsers/' + e.sender.value(),
                        dataType: 'json',
                        type: "GET"
                    }
                }
            },
            columns: [
                { field: "Id", hidden: true },
                { field: "UserName", title: "First Name" },
                { field: "UserLName", title: "Last Name" },
                { field: "IsBiUser", title: "Is BI User" }
            ]
        });
    }
        $scope.onDDLDataBound = function (e) {
            var dropDown = $(e.sender.element).data("kendoDropDownList");
            dropDown.select(0);
        }
    }
);

Here's the cshtml with the grid markup:

<div class="tab-pane active" id="/home/users">
    <div class="row">
        <div class="col-md-6">
            <div id="usersGrid"></div>
        </div>
        <div class="col-md-6">
            <div id="authUsersGrid"></div>
        </div>
    </div>
</div>

[Mihai]

Hello,

I can identify two problems in your code:

1. the correct name for the page size attribute is pageSize (with a capital S).  Yours is all lowercase.  This should fix the NaN, but you'll only see one page because:

2. when you use server-side paging you must provide schema.total, a string or a function which returns the total number of rows.  That is needed, of course, in order to calculate on the client how many pages can be displayed.

Regards,
Mihai
Telerik

 

 

[Donna Stewart]

Thank you Mihai!  Funny how the smallest things can go unnoticed but cause big trouble.  :-)  I didn't really need server-side paging, so I removed that and just fixed the casing on pageSize and viola! it works! 

Thanks again!
Donna