angular-kendo grid pagesize not working

3 posts, 1 answers
  1. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 19 May 2014 Link to this post

    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. Answer
    Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 20 May 2014 Link to this post

    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!
     
  3. UI for ASP.NET AJAX banner
  4. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 20 May 2014 in reply to Mihai Link to this post

    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
Back to Top