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>
