如何在Kendo UI Grid中动态更改页面大小


How to change page size dynamically in Kendo UI Grid

我的Kendo UI网格显示了1000多个数据。 我还有一个用于不同页面大小的下拉列表，分别为15、25、50、100。选择页面大小时，如何更改Kendo UI网格的页面大小？

这是使用ASP.NET MVC Helper的最新消息

1
.Pageable(pager => pager.PageSizes(new int[] {20, 50, 100})) // Enable paging
相关讨论

您可以在组合框更改事件中设置页面大小。 (另请参见JSBin示例。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#comboBox").kendoComboBox({
    dataTextField:"text",
    dataValueField:"value",
    dataSource: [
        { text: 1 },
        { text: 2 },
        { text: 3 },
        { text: 4 },
        { text: 5 }
    ],
    change: function(e) {
      var grid = $("#grid").data("kendoGrid");
      grid.dataSource.pageSize(parseInt(this.value()));  // this.value() being the value selected in Combo
    }
});

通过在js中执行以下操作，它也已内置到最新版本的网格中

1
2
3
pageable: {
    pageSizes: [10, 25, 50, 100]
}

http://docs.kendoui.com/api/web/pager

扩展Rick Glos的答案：

您可以将Pageable PageSizes设置为通用对象的数组，因此您可以具有"全部"选项，而不必在JavaScript中设置pageSizes。

1
.Pageable(pager => pager.PageSizes(new object[] {20, 50, 100,"All"}))

Rick很好地告诉了它一个更多的解释，如果有人错过了在这里要做的事情，这是一个代码片段，它知道如何在短时间内完成在哪里做的事情。

1
2
3
4
5
6
7
8
9
10
11
12
13
@(Html.Kendo().Grid(Model)
      .Name("SiteUserGrid")
      .Columns(columns =>
          {
              columns.Bound(u => u.LastName).Title("Last Name");
              columns.Bound(u => u.FirstName).Title("First Name");
              columns.Bound(u => u.UserName).Title("User Name");
              columns.Bound(u => u.EmailAddress).Title("Email Address");
              columns.Bound(u => u.AccessLevel).Title("Access Level");
              columns.Bound(u => u.Status).Title("Status");
              columns.Bound(u => u.UserId).Filterable(f => f.Enabled(false)).ClientTemplate(actionColumnTemplate).Title("Action").Sortable(false).Width(190);
          })
      .Pageable(pageable => pageable.ButtonCount(10))

.Pageable(pager => pager.PageSizes(new int [] {5,10,15,20,30,50,100}))

1
2
3
4
5
6
7
8
9
10
      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
      .Sortable()
      .Filterable(filterable => filterable
                                    .Extra(false)
                                    .Operators(operators => operators
                                                                .ForString(str => str.Clear()
                                                                                     .StartsWith("Starts with")
                                                                                     .Contains("Contains")
                                                                                     .IsEqualTo("Is equal to")
                                                                ))

希望这可以帮助

http://docs.kendoui.com/api/wrappers/php/Kendo/UI/GridPageable

1
2
$pageable = new \\Kendo\\UI\\GridPageable();
$pageable->pageSizes(array(20,50,100));