kendo-ui - kendogrid の複数のフィルターが機能しない

Question

「OR」ロジックを使用して、剣道グリッドに 2 つのフィルターを配置しようとしています。動いていない。両方のドロップダウンでグリッドをフィルタリングする必要があります。Foo ドロップダウンで「foo1」が選択され、Bar ドロップダウンで「All」が選択されている場合、グリッドが表示されます。

 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

Answer 1

いくつかの問題があります:

• 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

Answer 2

ds.filter([filter]);になるよう に角かっこを削除しますds.filter(filter);。