This is a migrated thread and some comments may be shown as answers.

angular-kendo grid pagesize not working

2 Answers 867 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Donna Stewart
Top achievements
Rank 1
Donna Stewart asked on 19 May 2014, 07:00 PM
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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Mihai
Telerik team
answered on 20 May 2014, 10:34 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Donna Stewart
Top achievements
Rank 1
answered on 20 May 2014, 03:22 PM
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
Tags
Integration with other JS libraries
Asked by
Donna Stewart
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Donna Stewart
Top achievements
Rank 1
Share this question
or