Question

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

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

那么，当multi和columnMenu都为真时，如何订购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();
        }
    }
}

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

3 个答案: