Kendo js Grid сделать фильтр ячеек заголовка отражением фильтра меню - PullRequest
Новая
       17

Kendo js Grid сделать фильтр ячеек заголовка отражением фильтра меню

1 голос
/ 17 апреля 2019

MCVE

Вы можете наблюдать описанную проблему в следующем примере .

Настройка

У меня есть сетка и столбец, которые можно фильтровать как по ячейке заголовка, так и по меню.

Конфигурация для сетки следующая: 

filterable: {
   mode: "menu, row"
}

Конфигурация для конкретного столбца выглядит следующим образом: 

filterable: {
   multi: true,
   cell: true
}

Шаги для воспроизведения

  1. Откройте меню фильтра столбцов с флажками и выберите 2 пункта (например, «Нэнси» и «Эндрю»):
  2. Нажмите кнопку «Фильтр» в этом меню.
  3. Обратите внимание, что в фильтре ячейки столбца заголовка указывается только "Nancy" (1-й элемент):

Проблема

Фильтр отлично работает, но есть эта заметная проблема с пользовательским интерфейсом, когда в ячейке фильтра заголовка отображается только 1-й элемент (например, «Нэнси» в данном случае).

Вопрос в том, есть ли способ заставить его показывать все выбранные предметы (например, что-то вроде «Нэнси, Эндрю»)?

Я не нашел никаких настроек для этого в документах кендо для виджета сетки, поэтому мне интересно, есть ли обходной путь?

Другая настройка

У меня также есть другой столбец в сетке («Фамилия»), например здесь . В этом случае у меня есть настраиваемый виджет множественного выбора для меню фильтра, и после того, как я выбрал 2 элемента («Даволио» и «Фуллер»):

Затем нажмите Фильтр, и я могу наблюдать желаемое поведение:

Но я хочу добиться этого с помощью простого мульти-проверочного фильтра, как в задаче выше.

Редактировать

Я также пытался вручную синхронизировать фильтры, например здесь .

Короче говоря, в событии 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.

он возвращается к 1-му пункту («Нэнси»).

Похоже, это происходит из-за того, что вход ячейки фильтра заголовка имеет привязку MVVM к сеточным фильтрам: <input data-bind="value: value". Удалить это тоже нехорошо, так как это ломает много вещей, связанных с фильтрацией.

Есть идеи?

...