如何使用 angular-kendo 设置剑道网格页面大小

Question

我正在尝试使用 angular-kendo 创建一个网格小部件，它允许用户选择页面大小，但也有一个默认的页面大小。

从http://docs.kendoui.c​​om/api/web/grid#configuration-pageable.pageSizes的文档中，我需要使用 pageSize 和 pageSizes 设置的 pageable 选项。

我的理解是，在 angular-kendo 中，我可以将 kendo 选项用作 angular 指令，方法是在选项名称前加上“k-”并从驼峰式大小写转换。 我创建了以下代码，它正确设置了页面大小选项，但没有按预期将默认页面大小设置为 10。

<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>

angular-kendo 是否支持所有可分页选项？ 如果是这样，我做错了什么？

Answer 1

angular-kendo github 上的这个已关闭问题说您需要在 dataSource 上定义 pageSize

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

例如，向数据添加 pageSize 属性可解决此问题：

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

这感觉就像将视图逻辑混合到数据中。 有更好的方法吗？

Answer 2

有两种方法可以在 angular-kendo 网格上设置 pageSize

1. 如第一个答案中所述，使用 pageSize 属性将其设置在 k-data-source 上
2. $scope.KDataSource.pageSize($scope.pageSize);