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

Question

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

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

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

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 的解决方案，基于 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();
        }
    }
}

Answer 4

这里没有任何解决方案对我有用（使用 2023.X.X.X），但它们确实为我指明了正确的方向。

要对过滤器菜单多复选框进行排序（只需删除 if 语句即可将其应用于所有字段的过滤器菜单）：

附注e.Field 是架构中分配的字段名称。

filterMenuInit: function(e) {
    if (e.field === "BillyJoeBobsCousins" || e.field === "BillyJoeBobsUncles" {
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
        filterMultiCheck.container.empty();
        filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
            filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
        filterMultiCheck.createCheckBoxes();
    }
}

欲了解更多信息，请参阅此处