2016-09-15 4 views
0

私はMVCアプリケーションでKendoUIを使用しています。いくつかの入力ボックスと複数選択ウィジェットを使用してグリッドをフィルタリングしています。複数選択ウィジェットは、選択された要素を配列として渡します。私の質問は、マルチ選択を使ってグリッドをどのようにフィルタリングできますか?Multiselectウィジェットを使用してKendoUIグリッドをフィルタリングするにはどうすればよいですか?

現時点では、すべての入力はグローバル条件 "AND"を共有しているため、データを返すときに一緒に動作することができますが、マルチセレクションは "OR"というサブ条件を持つ必要があります。

私がしようとしたことは、渡された配列オブジェクトを反復して個々に返すことでした。私はそれらに適用される "または"の複数選択条件が必要です。配列オブジェクトがコンソールに個別に返されているのがわかりますが、グリッドの全体的なフィルタリングには含まれていないため、冗長化されています。

誰でもこの問題を解決できる方法をいくつか挙げることができますか?私は以下の私のコードは、私のjavascriptのコードと私が取った方法でmultiselectウィジェットが座っている場所を示しているが含まれています。

ここに、上記の検索入力ボックスを制御するJavaScriptがあります。

var search_btn = document.getElementById("search-button");  

function search() { 

    var filters = [], 
     grid_aberdeen = $('#Grid').data('kendoGrid'), 
     search_charterer = $("#charterer_company").data("kendoDropDownList").value(), 
     search_start = $("#fixture_start").data("kendoDatePicker").value(), 
     search_end = $("#fixture_end").data("kendoDatePicker").value(), 
     search_type = $("#vessel_type").data("kendoDropDownList").value(), 
     search_duties = $("#workscopecode").data("kendoMultiSelect").value(); 



    if (search_charterer) { 
     filters.push(
      { 
       field: "charterer_company", 
       operator: "eq", 
       value: search_charterer 
      } 
     ) 
    } 

    if (search_start) { 
     filters.push(
      { 
       field: "fixture_start", 
       operator: "gte", 
       value: search_start 
      }) 
    } 

    if (search_end) { 
     filters.push(
      { 
       field: "fixture_end", 
       operator: "lte", 
       value: search_end 
      }) 
    }  

    if (search_duties) { 
     var sub_filter = { logic: "or", filters: [] }    

     $.each(search_duties, function (i, v) { 
      sub_filter.filters.push[ 
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       } 
      ]         
      console.log(v) 
     })    
    }; 

    grid_aberdeen.dataSource.filter({ 
     logic: "and", 
     filters: filters 
    }); 
} 
search_btn.addEventListener("click", search); 

あなたが見ることができるように私は複数選択に適用したいと思いますが、それは何もしていないことを、あなたがする場合は、「サブ状態」を作成しようとしました。コンソールは、配列の項目がちゃんと分かれているが、実際にはフィルターが機能していないことを示しています。

var sub_filter = { logic: "or", filters: [] } 

答えて

2

UPDATE

問題はsub_filterdataSource.filter()方法で渡されfiltersアレイに追加されることはないということです。


filtersのオブジェクト構造を再確認してください。希望の動作はサポートされています。

http://dojo.telerik.com/ABeBO

var filters = { 
    logic: "and", 
    filters: [ 
    { field: "ShipName", operator: "contains", value: "o" }, 
    { field: "ShipCity", operator: "contains", value: "o" }, 
    { 
     logic: "or", 
     filters: [ 
     { field: "OrderID", operator: "eq", value: 10251 }, 
     { field: "OrderID", operator: "eq", value: 10259 } 
     ] 
    } 
    ] 
}; 

$("#grid").data("kendoGrid").dataSource.filter(filters); 
1

[OK]をそう、これはフィルタ自体の私のフォーマットでの小さなエラーが発生した仕事を得るために。これを訂正するために、次のような変更を加えました。これにより、配列は繰り返し処理され、個々の用語として検索フィルターに渡されます。

if (search_duties) { 
     var sub_filter = { 
      logic: "or", 
      filters: [] 
     } 

     $.each(search_duties, function (i, v) { 
      sub_filter.filters.push(
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       }) 

     }) 
     filters.push(sub_filter); 
    } 

(注)この変更ブラケットの取り外し:

[]すでにVARフィルターで定義されていたので
$.each(search_duties, function (i, v) { 
      sub_filter.filters.push(
       { 
        field: "workscopecode", 
        operator: "eq", 
        value: v 
       }) 

     }) 

::[]私は」didnの代わりにこれまで

$.each(search_duties, function (i, v) { 
     sub_filter.filters.push[ 
      { 
       field: "workscopecode", 
       operator: "eq", 
       value: v 
      } 
     ]         
     console.log(v) 
    }) 

を実際のフィルタ自体でそれを取り除く必要があります。そうでなければ、出力は何も起こらなかった[[...フィルタ...]]のようになります。

関連する問題