マルチ選択ドロップダウンによるカスタムフィルタリング

Question

私は、選択に基づいてグリッドデータソースをフィルタリングするために使用される、ツールバーに3つのマルチセレクションコントロールを含むグリッドを持っています。

現時点では、マルチセレクションコントロールのchangeイベントで発生した以下の機能があります。この関数は、マルチセレクションコントロールで選択された項目が変更された（field）をフィルタリング中に使用することを承諾します（values）。予想通り、フィルタリングは、個々の複数選択の選択と微細であり、すなわち、複数のメソッドを選択するときのみorロジックを使用

function applyClientFilters(values, filterID) { 
var grid = $("#grid").data("kendoGrid"); 
var gridDataSource = grid.dataSource; 
var filter = gridDataSource.filter(); 
// does the selected drop down contain a value 
// if yes, then apply this filter to the necessary drop down 
// otherwise remove the filter 
if (values.length > 0) { 
    // has a filter been setup yet on the datasource? 
    if (filter && filter.filters.length > 0) {    
     // firstly check to see if filter has already been applied and if so remove 
     for (var i = 0; i < filter.filters.length; ++i) { 
      // check to see if filter field already exists i.e. analyte has already been filtered 
      // and check to see if the value at this field already exists as a filtered item 
      if (filter.filters[i].field === filterID && values.indexOf(filter.filters[i].value) > -1) { 
       filter.filters.splice(i, 1); 
      } 
     } 
     // apply new filter(s) 
     for (var i = 0; i < values.length; ++i) { 
      filter.filters.push({ field: filterID, operator: "eq", value: parseInt(values[i]) }); 
     } 
     gridDataSource.query({ 
      filter: filter, 
      pageSize: 10, 
      page: 1, 
      group: [{ 
       field: "InstrumentName", 
       dir: "asc" 
      }, { 
       field: "AnalyteName", 
       dir: "asc" 
      }, { 
       field: "MethodName", 
       dir: "asc" 
      }] 
     }); 
    } 
    else { 
     // apply new filter 
     gridDataSource.filter({ 
      logic: "or", 
      filters: [ 
       { 
        field: filterID, 
        operator: "eq", 
        value: parseInt(values), 
       } 
      ] 
     }); 
    } 

} else { 
    if (filter && filter.filters.length > 0) { 
     // remove existing filter 
     for (var i = 0; i < filter.filters.length; ++i) { 
      if (filter.filters[i].field === filterID) { 
       filter.filters.splice(i, 1); 
      } 
     } 
     gridDataSource.query({ 
      filter: filter, 
      pageSize: 10, 
      page: 1, 
      group: [{ 
       field: "InstrumentName", 
       dir: "asc" 
      }, { 
       field: "AnalyteName", 
       dir: "asc" 
      }, { 
       field: "MethodName", 
       dir: "asc" 
      }] 
     }); 
    } 
} 
} 

は、それらをフィルタリングします。ただし、異なるマルチセレクション制御で使用する場合、ロジックはandである必要があります。

例

• を選択し '分析物A' - 表示のみ 'の検体A'
• 選択 'メソッドA' へ>フィルタグリッドデータソース] - > [フィルタグリッドのデータソースが表示する '分析物A' そして 'メソッドA'
• 選択 'メソッドB' - > 'の分析物A' と 'メソッドA' または '方法B'
を表示するには、グリッドのデータソースをフィルタリング

上記のシナリオを達成するために、フィルタ論理演算子と剣道データソースフィルタリングを組み合わせることは可能ですか？

Answer 1

フィルタリングを大幅に簡素化するソリューションが登場しました。フィルタを追加/削除/更新する代わりに、マルチ選択コンポーネントのいずれかのchangeイベント中にデータソースフィルタをクリアし、各マルチセレクション内の選択した項目に基づいてどのフィルタを適用するかを決定し、選択肢は次のようになります。

function applyClientFilters() { 
var grid = $("#reportGrid").data("kendoGrid"); 
var gridDataSource = grid.dataSource;  
// clear existing datasource 
gridDataSource.filter([]); 
// extract selected items from each of the three multiselect controls 
var selectedAnalytes = $("#analyte").data("kendoMultiSelect").value(); 
var selectedMethods = $("#method").data("kendoMultiSelect").value(); 
var selectedInstruments = $("#instrument").data("kendoMultiSelect").value(); 
// setup filter object (using and logic) 
var filter = { 
    logic: "and", 
    filters: [] // ready for filter from each of the three multiselect controls 
}; 
// loop over each of the three extracted selected items variables 
// push new filter into array of filters with or logic on each filter 
if (selectedAnalytes.length > 0) { 
    var analyteFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected analytes 
    }; 

    for (var i = 0; i < selectedAnalytes.length; ++i) { 
     analyteFilter.filters.push({ field: "AnalyteID", operator: "eq", value: parseInt(selectedAnalytes[i]) }) 
    } 
    filter.filters.push(analyteFilter); 
} 
if (selectedMethods.length > 0) { 
    var methodFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected methods 
    }; 

    for (var i = 0; i < selectedMethods.length; ++i) { 
     methodFilter.filters.push({ field: "MethodID", operator: "eq", value: parseInt(selectedMethods[i]) }) 
    } 
    filter.filters.push(methodFilter); 
} 
if (selectedInstruments.length > 0) { 
    var instrumentFilter = { 
     logic: "or", 
     filters: [] // ready for filter for each of the selected instruments 
    }; 

    for (var i = 0; i < selectedInstruments.length; ++i) { 
     instrumentFilter.filters.push({ field: "InstrumentID", operator: "eq", value: parseInt(selectedInstruments[i]) }) 
    } 
    filter.filters.push(instrumentFilter); 
} 
// apply filter query to datasource 
gridDataSource.query({ 
    filter: filter, 
    pageSize: 10, 
    page: 1, 
    group: [{ 
     field: "InstrumentName", 
     dir: "asc" 
    }, { 
     field: "AnalyteName", 
     dir: "asc" 
    }, { 
     field: "MethodName", 
     dir: "asc" 
    }] 
}); 
}