12 November, 2014
0 Comments
1 category
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>
Category: Uncategorized
Hey, I am trying something simalr, but can’t get it working, just in case you have some thoughts.
I am trying to set if the grid is groupable.
The value updates (keeping it in a {{}} to watch it), but the grid does not change at all.