Kendo ui 当multi和columnMenu都为true时，如何排序剑道网格复选框列筛选器？

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

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

---

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

方法如下所示。剑道文档描述了一种通过使用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();
    }
},

---

被接受的答案似乎不再有效了。我使用的是剑道版本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();
        }
    }

---

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

基于剑道UI文档的Bill解决方案：

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