当 multi 和 columnMenu 都为真时，如何订购 Kendo Grid 复选框列过滤器? [英] How to order a Kendo Grid checkbox column filter when multi and columnMenu are both true?

问题描述

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

Using a Kendo UI grid, you can set the column as "filterable: { multi: true}", which generates a nice checkbox list in the filter instead of the default text box and equality operator template. The problem, is that by default the items in the checkbox list are ordered with the dataset, which itself is probably ordered by some other field.

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

Kendo docs explains how to filter a column when the "filterable: { multi: true}", but it only works when columnMenu is false. Column menu is another option that adds a nice menu to all the columns.

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

So, how do you order a Kendo Grid checkbox column filter when multi and columnMenu are both true?

推荐答案

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

I came here looking for an answer to this question also, and I tried Bill's solution and it works great...as long as you don't have any locked columns.

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

Bill's solution, based on the Kendo UI docs:

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

},

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

If you initialize your grid with locked columns, this solution will work for you:

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 复选框列过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！