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

【问题标题】：How to change page size dynamically in Kendo UI Grid如何在 Kendo UI Grid 中动态更改页面大小
【发布时间】：2012-07-05 00:57:05
【问题描述】：

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

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

您可以在组合框更改事件中设置页面大小。（另见JSBin example。）

$("#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
    }
});

【讨论】：

【解决方案2】：

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

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

【讨论】：

太好了。知道如何添加“全部”吗？
@DavidC 你有没有想过如何添加“全部”选项？
.Pageable(pager => pager.PageSizes(new int[] { 20, 50, 100, "All" }))
@RichC，将“All”添加到 int[] 会引发错误。如果我添加 0，它将显示所有内容。我仍在尝试弄清楚如何使用剃须刀添加“全部”，而无需使用额外的 JavaScript 来完成。
啊 - 可能只能在 javascript 中完成...$("#pager").kendoPager({ dataSource: dataSource, pageSizes: [2, 3, 4, "all"] });

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

Rick 以一种很好的方式告诉了它，如果有人错过了它在哪里完成，这里是一个代码片段，可以通过屏幕短 snap 知道在哪里完成它。

@(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}))

      .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")
                                                                ))

希望对你有帮助

【讨论】：

【解决方案5】：

扩展Rick Glos' answer：

您可以将 Pageable PageSizes 设置为一个通用对象数组，这样您就可以拥有一个“全部”选项，而无需在 JavaScript 中设置 pageSizes。

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

【讨论】：

【解决方案6】：

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

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

【讨论】：