Я хочу отобразить критерии применяемого фильтра на сетке пользовательского интерфейса Kendo

Question

Как я могу отобразить любые применяемые критерии фильтра в сетке пользовательского интерфейса Kendo. Я хотел бы иметь дисплей только для чтения применимых критериев. Текущая функциональность позволяет пользователю применять фильтр, но пользователь должен перейти в меню фильтра, чтобы просмотреть детали фильтра.

Answer 1

Источник данных KIU UI не имеет события фильтра, поэтому вам необходимо реализовать это самостоятельно. Затем, когда событие запускается, вы можете получить текущий фильтр и форматировать его любым способом, который вы хотите отобразить.

Например:

var grid = $("#grid").kendoGrid(...); 

// override the original filter method in the grid's data source 
grid.dataSource.originalFilter = grid.dataSource.filter; 
grid.dataSource.filter = function() { 
    var result = grid.dataSource.originalFilter.apply(this, arguments); 
    if (arguments.length > 0) { 
     this.trigger("afterfilter", arguments); 
    } 

    return result; 
} 

// bind to your filter event 
grid.dataSource.bind("afterfilter", function() { 
    var currentFilter = this.filter(); // get current filter 

    // create HTML representation of the filter (this implementation works only for simple cases) 
    var filterHtml = ""; 
    currentFilter.filters.forEach(function (filter, index) { 
     filterHtml += "Field: " + filter.field + "<br/>" + 
      "Operator: " + filter.operator + "<br/>" + 
      "Value: " + filter.value + "<br/><br/>"; 

     if (currentFilter.filters.length > 1 && index !== currentFilter.filters.length - 1) { 
      filterHtml += "Logic: " + currentFilter.logic + "<br/><br/>"; 
     } 
    }); 

    // display it somewhere 
    $("#filter").html(filterHtml); 
}); 

См demo here.

Обратите внимание, что фильтры могут быть вложенными, поэтому, когда это произойдет, этого примера кода будет недостаточно - вам нужно будет сделать код, который преобразует фильтры в HTML-рекурсивный.

В целях увеличения всех источников данных с «afterfilter» событие, вы должны изменить DataSource protototype вместо того чтобы изменить его на вашем экземпляре:

kendo.data.DataSource.fn.originalFilter = kendo.data.DataSource.fn.filter; 
kendo.data.DataSource.fn.filter = function() { 
    var result = this.originalFilter.apply(this, arguments); 
    if (arguments.length > 0) { 
     this.trigger("afterfilter", arguments); 
    } 

    return result; 
} 

Если вы хотите интегрировать все это во все виджеты сетки, вы можете создать новый метод filtersToHtml, который получит вам представление HTML и добавит его в kendo.data.DataSource.fn, как показано выше (или вы могли бы create your own widget, полученный из сетки Кендо); таким же образом вы можете добавить метод displayFilters в kendo.ui.Grid.fn (прототип сетки), который отображает это представление HTML в элементе DOM, селектор которого вы можете передать с параметрами вашего виджета (в конечном итоге вы также можете создать этот элемент в виджет сетки). Затем вместо запуска «afterfilter» в методе фильтра вы можете вместо этого называть displayFilters.

Учитывая сложность полной реализации, которая всегда отображает фильтры, я бы предложил расширить сетку Kendo вместо простого изменения исходного кода. Это поможет сохранить его более ремонтопригодным и придает ему немного структуры.

Answer 2

как насчет объединения двух фильтров сетки. Таким образом, пользователь может видеть выбранный фильтр в текстовом поле и даже удалять его, нажав кнопку «x» в текстовом поле «Отфильтрованное столбец».

вы можете сделать это, установив сетку фильтруемой как этого

filterable: { 
     mode: "menu, row" 
    } 

документации и примеры в here