如何在 multi 和 columnMenu 都为真时订购 Kendo Grid 复选框列过滤器？

Question

使用 Kendo UI 网格，您可以将列设置为 "filterable: { multi: true}"，这会在过滤器中生成一个漂亮的复选框列表，而不是默认的文本框和相等运算符模板.问题是，默认情况下，复选框列表中的项目与数据集一起排序，而数据集本身可能由其他字段排序。

Kendo 文档解释了如何在 "filterable: { multi: true}" 时过滤列，但它仅在 columnMenu 为 false 时有效。列菜单是另一个选项，它为所有列添加了一个漂亮的菜单。

那么，当 multi 和 columnMenu 都为真时，如何订购 Kendo 网格复选框列过滤器？

Answer 1

方法如下。 Kendo 文档描述了一种通过使用 filterMenuInit 事件来使用它的方法，当您使用 ColumnMenu 时永远不会触发该事件：true。这种方法会起作用，而且它还比文档有所改进，因为您不需要为每个字段自定义它。只需插入即可。

KendoUI 团队 - 窃取此代码。

columnMenuInit: function (e) {
    var multiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu.checkBoxAll;
    if (multiCheck) {
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
        filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
        filterMultiCheck.createCheckBoxes();
    }
},

Answer 2

已接受的答案似乎不再有效。我使用的是 kendo 版本 2018.1.221，对@Bill 的回答稍作修改对我有用：

    columnMenuInit: function (e) {
        var multiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
        if (multiCheck) {
            multiCheck.container.empty();
            multiCheck.checkSource.sort({ field: e.field, dir: "asc" });
            multiCheck.checkSource.data(multiCheck.checkSource.view().toJSON());
            multiCheck.createCheckBoxes();
        }
    }

Answer 3

我来这里也是为了寻找这个问题的答案，我尝试了 Bill 的解决方案并且效果很好......只要你没有任何锁定的列。

Bill 的解决方案，基于 Kendo UI 文档：

columnMenuInit: function (e) {
    var multiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu.checkBoxAll;
    if (multiCheck) {
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
        filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
        filterMultiCheck.createCheckBoxes();
}

},

如果您使用锁定的列初始化网格，此解决方案将适用于您：

columnMenuInit: function (e) {
    let lockedColumn = false;
    let columnMenu = this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu");

    // if columnMenu is falsy this may be a locked column, in which case we need to target the column menu from the lockedHeader property
    if (!columnMenu) {
        columnMenu = this.lockedHeader.find("[data-field=" + e.field + "]").data("kendoColumnMenu");
        lockedColumn = true;
    }

    if (columnMenu) {
        const multiCheck = columnMenu.filterMenu.checkBoxAll;

        // if this column uses multi-check filtering, sort the filter options in ascending alphabetical order
        if (multiCheck) {
            const filterMultiCheck = lockedColumn ? this.lockedHeader.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu : this.thead.find("[data-field=" + e.field + "]").data("kendoColumnMenu").filterMenu;
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
            filterMultiCheck.createCheckBoxes();
        }
    }
}

如何在 multi 和 columnMenu 都为真时订购 Kendo Grid 复选框列过滤器？

How to order a Kendo Grid checkbox column filter when multi and columnMenu are both true?

kendo-ui

kendo-grid