将kendo DataSource PageSize预设为“全部". [英] Presetting kendo DataSource PageSize to "All"

问题描述

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

Whenever a user changes the pagination on a grid, I save the setting in localStorage and retrieve it to set it back whenever the user navigates again to the page. To retrieve it I am using the pageSize property of the dataSource where I pass an IIF like so:

    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"，因此我认为这也可以让我将dataSource pageSize设置为字符串"All"(pageSize ="All").但是，当我这样做时，网格开始显示X记录的NaN并显示一个空网格.所以问题是..如何将dataSource的pageSize预设为全部"?

This worked well but a requirement appeared for the user to be able to set the pageSize to "All". Kendo handles "All" in the Grid so I thought this will let me set the dataSource pageSize to the string "All" (pageSize="All") as well. When I do it however the grid starts displaying NaN of X records and displays an empty grid. So the question is.. how do I preset the pageSize of the dataSource to just "All"?

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

NOTE: An alternative is to just fetch the grid maximum total count and then replace the number displayed in the dropdown with jquery text("All) but that looks like a hack and it seems to me this should already be inbuilt into the framework but I can't find anything in the doc's.

这变得越来越有趣.由于缺少其他选项，我像在注释中一样实现了它，只需直接设置dataSource pageSize即可:

This is getting even funnier. Due to lack of other options I implemented it like in the note and just set the dataSource pageSize directly:

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

但是，这导致网格上的过滤器发生故障，并从端点引发字符串格式不正确"(误导性错误)错误.经过足够的研究，我发现它是由DataSourceRequest在后台执行一些无法识别的shuru buru引起的.由于设置dataSource pageSize会导致问题，因此我尝试仅以编程方式设置下拉列表，并让kendo触发更新pageSize本身的请求，如下所示:

But this is causing the filters on grid to malfunction and throw "string is not in correct format" (misleading error) error from the endpoint. After enough research I found out its caused by the DataSourceRequest doing some unidentifiable shuru buru in the background. Since setting the dataSource pageSize causes issues, I tried just setting the dropdown programatically and let kendo trigger the request to update pageSize itself like so:

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

但是网格不允许我这样做，并且会继续从javascript还原我在DOM内部所做的任何更改.

But the grid doesn't let me do it and keeps reverting any changes I do inside the DOM from javascript.

问题是，到底如何从javascript更改服务器端kendo网格的pageSize(触发对端点的额外请求).

So the question is, how in earth can you change the pageSize of a server-side kendo grid from javascript (triggering an extra request to endpoint).

推荐答案

回答问题.这似乎是剑道中的错误.在绑定数据源之后将pageSize设置为0("all"的快捷方式)将始终导致网格在工具栏模板内声明的任何自定义过滤器存在问题.

To answer the question. This appears to be a bug in Kendo. Setting the pageSize to 0 (shortcut for "all") after the dataSource was already bound will always result in the grid having issues with any custom filters declared inside of a toolbar template.

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

To be exact, if you have a custom filter defined inside of the toolbar template:

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

您可以通过网格上的dataSource定义将其连接起来，例如:

You wire it up through the dataSource definition on the grid like:

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

在JavaScript中获取类似的参数:

in javaScript fetching the parameters like:

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

使用一种方法填充它们:

populating them with a method:

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

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

    grid.dataSource.page(1);
}

具有连接到其的简单事件侦听器:

that has a simple event listener wired to it:

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

然后通过以下方式将pageSize编程更改为0/"all":

Then after changing the pageSize programatically to 0/"all" with:

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

过滤器将开始始终返回NaN作为当前页面/通过查询参数传递给服务器的过滤器对象的跳过(即使网格将正确显示数字).每当您尝试使用过滤器时，这将在端点上的框架代码内导致字符串格式不正确"异常.上面的解决方案是稍微修改getFilterParameters方法:

The filter will start to always return NaN as the current page / skip of the filter object passed to the server with the query parameters (even though grid will display the numbers correctly). This will cause a "string is not in correct format" exception inside framework code on the endpoint whenever you try using the filter. A solution to the above is to slightly modify the getFilterParameters method:

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

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

This will re-initialize the page and skip values before submitting the filter request. These values will anyway be re-populated on the endpoint with the correct values. Wasn't me who noticed it but another developer working on the project, credit goes to her.

这篇关于将kendo DataSource PageSize预设为“全部".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！