Kendo JS Grid使标头单元格过滤器反映菜单过滤器

Question

MCVE

您可以在以下example中观察到所描述的问题。

设置

我有一个网格和一列，可以通过标题列单元格和筛选器菜单进行过滤。

网格的配置如下：

filterable: {
   mode: "menu, row"
}

特定列的配置如下：

filterable: {
   multi: true,
   cell: true
}

复制步骤

1. 打开带有复选框的列过滤器菜单，然后选择2个项目（例如“ Nancy”和“ Andrew”）：
2. 在该菜单中按“过滤器”按钮。
3. 请注意，在标题列单元格过滤器中，仅在其中指定了“ Nancy”（第一项）：

问题

过滤器的效果很好，但存在一个明显的UI问题，即标题过滤器单元格中仅显示第一项（例如本例中的“ Nancy”）。

有没有办法让它显示所有选中的项目（例如“南希·安德鲁”之类的东西）？

我在kendo docs的网格小部件中没有找到任何此设置，所以我想知道是否有任何解决方法？

另一种设置

我在网格中还有另一列（“姓氏”），例如here。 在这种情况下，我有一个用于过滤器菜单的自定义多选小部件，然后在其中选择了2个项目（“ Davolio”和“ Fuller”）：

然后按滤镜，我可以观察到所需的行为：

但是我想像上面的问题一样用简单的多检查过滤器来实现。

编辑

我还尝试过手动同步过滤器，例如here。

简而言之，在网格的filterMenuInit事件中，我使用复选框挂接到过滤器菜单中的'click'事件，将检查后的值作为数组获取，并将其设置为标题单元格过滤器“自动完成”小部件：

filterMenuInit: function(e) {
    const config = e.sender.options.columns.find(c => c.field === e.field);
    if (((config || {}).filterable || {}).multi) {
        const quickFilter = $('.k-filter-row .k-filtercell[data-field=' + e.field + '] input[data-role=autocomplete]').data('kendoAutoComplete');

        e.container.on('click', '[type=submit]', function() {
            const multiCheck = e.sender.thead.find('[data-field=' + e.field + ']').data('kendoFilterMultiCheck');
            if (!multiCheck || !quickFilter) return;
            const values = multiCheck.container
                .find('input[type=checkbox]:not(.k-check-all)')
                .filter((i, x) => x.checked)
                .map((i, x) => x.value)
                .get();

            if (values && values.length > 1) {
                quickFilter.value(values);
            }
        });
    }
},

点击“过滤器”后，我可以立即看到所需的结果（例如“南希·安德鲁”），但是在dataBound之后，它会重置为仅第一项（“南希”）。

这似乎是由于标头过滤器单元输入的MVVM绑定到网格过滤器<input data-bind="value: value"而发生的。删除它也不是一件好事，因为它会破坏很多与过滤有关的内容。

有什么想法吗？