Knowledgebase

Code can be found at: http://plnkr.co/edit/8CQURTLHftIpBwXUAN7s?p=preview

Let say, we want to show all records in a pageable kendo-grid, when the user clicks on a button.

This can accomplished by programmatically setting the page size of a kendo-grid and using the k-rebind attribute:

After clicking on the “Set page size” button:

<!-- App scripts -->
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", ["kendo.directives"]);

            // Set culture info to Ducth:
            kendo.culture("nl-NL");
        }());
   
        
        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, $animate) {
                $scope.title = "Programmatically set pagesize kendo grid.";
                
                var data = [
                    { id: 1, name: "Bob1" },
                    { id: 2, name: "Bob2" },
                    { id: 3, name: "Bob3" },
                    { id: 4, name: "Bob4" },
                    { id: 5, name: "Bob5" },
                    { id: 6, name: "Bob6" },
                    { id: 7, name: "Bob7" },
                    { id: 8, name: "Bob8" },
                    { id: 9, name: "Bob9" },
                    { id: 10, name: "Bob10" },
                    { id: 11, name: "Bob11" },
                    { id: 12, name: "Bob12" }
                ]


                $scope.mainGridOptions = {
                    dataSource: {
                        data: data,
                        pageSize: 4
                    },
                    pageable: {
                        pageSizes: [4, 8, 12]
                    },
                    sortable: true,
                    dataBinding: function (e) {
                        // This is a fix.
                        // When the user selects an other page size in the "page size" dropdownlist, 
                        // the MainGridOptions are not updated.
                        // To reflect the changes from the "page size" dropdownlist, we set the "page size" manually here.
                        $scope.mainGridOptions.dataSource.pageSize = e.sender.dataSource.pageSize();
                    }
                };

                $scope.setPageSize = function () {
                    $scope.mainGridOptions.dataSource.pageSize = data.length;
                };
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>

<div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            <button ng-click="setPageSize()">Set page size</button>
            <br />
            <br />
            <div kendo-grid="mainGrid"
                 k-options="mainGridOptions"
                 k-rebind="mainGridOptions"></div>
        </div>
    </div>