How to set the kendo grid page size with angular-kendo

1
votes

I have am trying to create a grid widget with angular-kendo which allows the user to select the page size, but also has a default page size.

From the documentation at http://docs.kendoui.com/api/web/grid#configuration-pageable.pageSizes, I need to use the pageable option with a pageSize and a pageSizes set.

My understanding is that in angular-kendo, I can use the kendo options as angular directives by prefixing the option name with a "k-" and converting from camel case. I created the following code which correctly sets the page size options but does not set the default page size to 10 as expected.

<div kendo-grid k-data-source="routes" k-pageable="{ 'pageSize': 10, 'refresh': false, 'pageSizes': [5,10,20,50] }"
    k-columns="[{ 'field': 'code', 'title': 'Code'},
                { 'field': 'name', 'title': 'Name'},
                { 'field': 'type', 'title': 'Type'},
                { 'field': 'active', 'title': 'Active'}]"
    k-sortable="true", k-groupable="true", k-filterable="true">
</div>

Does angular-kendo support all of the pageable options? If so, what am I doing wrong?

2
javascriptangularjskendo-uikendo-grid

2 Answers

0
votes

This closed issue on the angular-kendo github says that you need to define the pageSize on the dataSource

https://github.com/kendo-labs/angular-kendo/issues/41

For example, adding a pageSize attribute to the data fixes the problem:

$scope.routes = {data: [{"id":1,"code":"ROUTE1","name":"Route1","active":true},...<more data>], pageSize: 10};

This feels like mixing view logic into the data though. Is there a better way?

0
votes

There are two ways you can set the pageSize on an angular-kendo grid

  1. Set it on the k-data-source with a pageSize attribute as explained in the first answer
  2. $scope.KDataSource.pageSize($scope.pageSize);