Множественный фильтр на кендогриде не работает

Я пытаюсь поместить 2 фильтра в сетку кендо с логикой «ИЛИ». Это не работает. Мне нужно, чтобы сетка была отфильтрована с помощью обоих раскрывающихся списков. Если в раскрывающемся списке Foo выбрано «foo1», а в раскрывающемся списке «Панель» выбрано «Все», то сетка должна отображаться

 foo     bar
  1       1
  1       2

Код ниже:

$(function() {  
 var grid=$("#grid").kendoGrid({
 dataSource: {
 data: [
    { foo: "1", bar: "1" },{ foo: "1", bar: "2" },
    { foo: "2", bar: "2" },{ foo: "2", bar: "1" },
    { foo: "3", bar: "3" },{ foo: "3", bar: "2" }
    ]
},
columns: [
  "foo","bar"
],
toolbar: kendo.template($("#template").html())
});
grid.find("#foo").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        autoBind: false,
        optionLabel: "All",
dataSource: [{id:'1', name:'foo1'}, {id:'2', name:'foo2'},{id:'3', name:'foo3'}],
        change: function () {
          var ds = $("#grid").data("kendoGrid").dataSource;        

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:      
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);
 }
});
grid.find("#bar").kendoDropDownList({
        dataTextField: "name",
        dataValueField: "id",
        autoBind: false,
        optionLabel: "All",
dataSource: [{id:'1', name:'bar1'}, {id:'2', name:'bar2'},{id:'3', name:'bar3'}],
        change: function () {
          var ds = $("#grid").data("kendoGrid").dataSource;        

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:    
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);
}
});
});
After pushing the filters to the filter array the grid datasource is not filtered.

Обновленный jsbin ниже: http://jsbin.com/izuloj/23/edit


kendo-grid kendo-ui kendo-datasource kendo-dropdown
person user3263194    schedule 18.03.2014    source источник
comment
Я нашел этот пример, который использует несколько столбцов для фильтрации с помощью ИЛИ: jsfiddle.net/valchev/MG89G   -  person Joe Brunscheon    schedule 19.03.2014

Ответы (3)


arrow_upward
4
arrow_downward

Есть пара проблем:

  • Аргумент для DataSource filters представляет собой массив, но вы отправляете массив, когда делаете:
filter.filters.push([
    { field: "bar", operator: "eq", value:  $("#bar").data('kendoDropDownList').value() },
    { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
  • Сравнение с пустым — это не то же самое, что не добавлять условие. Итак, вы должны сделать:
// If there is some value in "bar" we add a condition for filtering it
if ($("#bar").data('kendoDropDownList').value()) {
    filter.filters.push({ 
        field: "bar", 
        operator: "eq", 
        value:  $("#bar").data('kendoDropDownList').value() }
    );
}

// If there is some value in "foo" we add a condition for filtering it
if ($("#foo").data('kendoDropDownList').value()) {
    filter.filters.push(
        { 
            field: "foo", 
            operator: "eq", 
            value:  $("#foo").data('kendoDropDownList').value() } 
    );
}
  • Наконец, вы не должны устанавливать какой-либо фильтр, если оба раскрывающихся входа пусты, но в этом случае вы не можете отправить пустой массив фильтров, вместо этого вы должны сделать ds.filter({})).

Итак, ваша функция change заканчивается:

function onChange () {
    var ds = $("#grid").data("kendoGrid").dataSource;        
    var filtering = false;

    var filter = {
        logic: "and",
        filters: []
    };    
    if ($("#bar").data('kendoDropDownList').value()) {
        filtering = true;
        filter.filters.push(
            { field: "bar", operator: "eq", value:  $("#bar").data('kendoDropDownList').value() }
        );
    }
    if ($("#foo").data('kendoDropDownList').value()) {
        filtering = true;
        filter.filters.push(
            { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
        );
    }
    if (filtering) {
        ds.filter([filter]);
    } else {
        ds.filter({});
    }
}

Ваш код изменен здесь: http://jsbin.com/izuloj/31/edit

person OnaBai    schedule 18.03.2014

arrow_upward
0
arrow_downward

Вместо

var filter = {
  logic: "and",
  filters: []
};    
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:    
$("#bar").data('kendoDropDownList').value() },
 { field: "foo", operator: "eq", value:  $("#foo").data('kendoDropDownList').value() } 
]);
}
          ds.filter([filter]);

Выполнение нижеприведенных работ .... легко читается

     if ( $("#foo").data('kendoDropDownList').value() === "")
          {
            ds.filter( { field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value()});
          }
          else
          {

          ds.filter({
                  logic: "and",
                  filters: [{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() },{ field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value()  }]
          });
          }
person RK911    schedule 18.03.2014

arrow_upward
0
arrow_downward

Удалите квадратные скобки с ds.filter([filter]);, чтобы оно стало ds.filter(filter);.

person Moses    schedule 03.09.2014