[FlexGrid] フィルターの検索結果と選択項目を連動するかどうか

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<div class="container">

  <h1>フィルターの検索結果と選択項目を連動するかどうか</h1>
  <p>FlexGridFilter.exclusiveValueSearchプロパティが追加されました。true（既定値）の場合、Excelのようにフィルタリストから検索対象外の項目が除外されます。falseの場合、フィルタリストに検索対象外の項目を含めたまま非表示にします。例えば、日付列のフィルタ画面で2019と検索してからすべて選択して適用すると、exclusiveValueSearch = trueの場合は2019年のデータのみ表示されますが、exclusiveValueSearch = falseの場合は全てのデータが表示されます。</p>
  <h2>検索結果と選択項目を連動する</h2>
  <div id="flexGrid1"></div>
  <h2>検索結果と選択項目を連動しない</h2>
  <div id="flexGrid2"></div>

</div>

JavaScript

var data = sample.orders();
var flexGrid1 = new wijmo.grid.FlexGrid('#flexGrid1', {
  itemsSource: data,
  autoGenerateColumns: false,
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日' },
    { header: '金額', binding: '金額', width: 80, format: 'c' },
    { header: '値引', binding: '値引' }
  ]
});
var filter1 = new wijmo.grid.filter.FlexGridFilter(flexGrid1, {
  exclusiveValueSearch: true
});
var flexGrid2 = new wijmo.grid.FlexGrid('#flexGrid2', {
  itemsSource: data,
  autoGenerateColumns: false,
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日' },
    { header: '金額', binding: '金額', width: 80, format: 'c' },
    { header: '値引', binding: '値引' }
  ]
});
var filter2 = new wijmo.grid.filter.FlexGridFilter(flexGrid2, {
  exclusiveValueSearch: false
});