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

问题描述

使用Kendo UI网格，您可以将列设置为可过滤的:{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 docs解释了当"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都为true时，如何订购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.

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

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