How to order a Kendo Grid checkbox column filter when multi and columnMenu are both true?

Question

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 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.

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

Answer 1

The way to do it is listed below. Kendo docs describe a way to use it by using the filterMenuInit event, which is never fired when you use ColumnMenu: true. This method will work, and it is also improved over the documentation in that you don't need to customize it for each field. Just plug this in.

KendoUI team - steal this code.

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

The accepted answer doesn't seem to work any more. I'm using kendo version 2018.1.221 and this slight modification to @Bill's answer does the trick for me:

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