Пользовательский фильтр выпадающего списка Kendo

Я хочу фильтровать данные раскрывающегося списка по нескольким столбцам. В настоящее время он фильтрует данные на основе одного столбца.

Есть ли какой-либо собственный способ фильтрации данных на основе нескольких столбцов?

Код :

$('<input data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                         filter: "contains",

                        dataTextField:currentComboEditor.fieldName,
                        headerTemplate: dropdownTemplateHTML.getHeaderHTML(dropdownMetadata.columns),
                        valueTemplate: '<span>#:data.'+currentComboEditor.fieldName+'#</span>',
                        template: dropdownTemplateHTML.getRowTemplate(dropdownMetadata.columns),
                        dataValueField: currentComboEditor.fieldName,
                        dataSource: {
                            data: source
                        } 
                        });

dropdown filter telerik kendo-ui kendo-dropdown
person Tushar Ahirrao    schedule 12.01.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Нет встроенного способа фильтрации kendoDropDownList в нескольких столбцах. Единственный способ сделать это — создать собственный фильтр:

var filterValue = "search me";
var newFilter = {
    logic: "or",
    filters: [
        { field: "FieldA", operator: "contains", value: filterValue },
        { field: "FieldB", operator: "contains", value: filterValue },
        { field: "FieldC", operator: "contains", value: filterValue }
   ]
};
kendoDropDownList.dataSource.filter(newFilter);

В зависимости от ваших потребностей вам придется привязать этот код к нужным событиям.

person The_Black_Smurf    schedule 19.01.2016

arrow_upward
1
arrow_downward

переопределить событие фильтрации раскрывающегося списка кендо

kendoDropDownList.bind("filtering", function(e) {
    // ignore space
    var filterValue = e.sender._prev;
    if(filterValue.trim)filterValue = filterValue.trim();

    var newFilter = {
        logic: "or",
        filters: [
            { field: "FieldA", operator: "contains", value: filterValue },
            { field: "FieldB", operator: "contains", value: filterValue },
            { field: "FieldC", operator: "contains", value: filterValue }
       ]
    };
    this.dataSource.filter(newFilter);

    // important: stop default filter
    e.preventDefault();
});
person Luke    schedule 31.12.2019