将 kendo DataSource PageSize 预设为 "All"

Question

每当用户更改网格上的分页时，我都会将设置保存在 localStorage 中，并在用户再次导航到该页面时检索它以将其重新设置。为了检索它，我使用了数据源的 pageSize 属性，我在其中传递了一个 IIF，如下所示：

    pageSize: function () {
        var pageSize = 10;
        if (window.localStorage) {
            var userPreferencePageSize = localStorage.getItem("somegridPageSize");
            if (userPreferencePageSize === parseInt(userPreferencePageSize)) {
                userPreferencePageSize = parseInt(userPreferencePageSize);
            }

            if (!isNaN(userPreferencePageSize)) {
                pageSize = userPreferencePageSize;
            }
        }
        return pageSize;
    }()

这很好用，但要求用户能够将 pageSize 设置为 "All"。 Kendo 在 Grid 中处理 "All"，所以我认为这也能让我将数据源 pageSize 设置为字符串 "All" (pageSize="All")。然而，当我这样做时，网格开始显示 NaN of X 记录并显示一个空网格。所以问题是..如何将数据源的 pageSize 预设为 "All"?

注意：另一种方法是只获取网格最大总计数，然后用 jquery text("All) 替换下拉列表中显示的数字，但这看起来像 hack，在我看来这应该已经内置到框架中，但我在文档中找不到任何内容。

编辑：这变得更有趣了。由于缺少其他选项，我像注释中那样实现了它，直接设置数据源 pageSize:

$("#Grid").data("kendoGrid").dataSource.pageSize(pageSize);

但这会导致网格上的过滤器发生故障并从端点抛出 "string is not in correct format"（误导性错误）错误。经过充分的研究，我发现它是由 DataSourceRequest 在后台执行一些无法识别的 shuru buru 引起的。由于设置数据源 pageSize 会导致问题，我尝试以编程方式设置下拉菜单并让 kendo 触发更新 pageSize 本身的请求，如下所示：

            var selectBox = $(".k-pager-sizes").find("select");
            selectBox.val(pageSize);
            selectBox.find("option[value='" + pageSize + "']").prop('selected', true);

但网格不允许我这样做，并不断恢复我在 DOM 中从 javascript 所做的任何更改。

所以问题是，您究竟如何才能将服务器端 kendo 网格的 pageSize 从 javascript 更改（触发对端点的额外请求）。

Answer 1

回答问题。这似乎是 Kendo 中的错误。在数据源已绑定后将 pageSize 设置为 0（"all" 的快捷方式）将始终导致网格在工具栏模板内声明的任何自定义过滤器出现问题。

确切地说，如果您在工具栏模板中定义了自定义过滤器：

@(Html.Kendo().TextBox().Name("Filter").Deferred())

您通过网格上的数据源定义将其连接起来，例如：

.DataSource(ds =>
    ds.Ajax()
        .PageSize(defaultPageSize)
        .Read(a => a.Action(actionName, controllerName, new
        {
            param = Model.param
        }).Data("getFilterParameters")))

在javaScript中获取参数，如：

getFilterParameters: function () {
    return this.filterParameters;
},

用一种方法填充它们：

filter: function () {
    var grid = $("#Grid").data("kendoGrid");

    this.filterParameters = {
        param: $("#Filter").val()
    };

    grid.dataSource.page(1);
}

有一个简单的事件侦听器连接到它：

$("#Filter").on("keyup", filter);

然后在以编程方式将 pageSize 更改为 0/"all" 之后：

$("#Grid").data("kendoGrid").dataSource.pageSize(0);

过滤器将始终return NaN 作为当前页面/跳过过滤器对象，通过查询参数传递给服务器（即使网格将正确显示数字）。每当您尝试使用过滤器时，这都会在端点上的框架代码内导致 "string is not in correct format" 异常。解决上述问题的方法是稍微修改 getFilterParameters 方法：

    getFilterParameters: function (e) {
        // Workaround for Kendo NaN pager values if pageSize is set to All 
        if (isNaN(e.page)) e.page = 1;
        if (isNaN(e.skip)) e.skip = 0;
        //
        return this.filterParameters;
    }

这将在提交过滤请求之前重新初始化页面并跳过值。这些值无论如何都会用正确的值重新填充到端点上。不是我注意到了它，而是另一位从事该项目的开发人员，这归功于她。

将 kendo DataSource PageSize 预设为 "All"

Presetting kendo DataSource PageSize to "All"

javascript

jquery

pagination

kendo-ui

kendo-grid