[CollectionView] 編集後の自動更新の停止

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.grid.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.filter.min.js"></script>
<div class="container">

  <button onclick="cv.refresh()" style="margin-right: 2rem">更新</button>
  <label><input id="refreshOnEdit" type="checkbox" onchange="cv.refreshOnEdit = this.checked">編集後に自動的にグリッドを更新する</label>　
  <div id="flexGrid"></div>

</div>

CSS

body {
  margin: 50px 0;
}

.search {
  background: yellow;
  font-weight: bold;
}

JavaScript

var cv = new wijmo.collections.CollectionView(sample.orders(10), {
  refreshOnEdit: false,
  sortDescriptions: ['商品名']
});
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: cv,
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日', width: 120 },
    { header: '金額', binding: '金額', format: 'c', width: 100 },
    { header: '値引', binding: '値引', width: 80 }
  ]
});
var flexGridFilter = new wijmo.grid.filter.FlexGridFilter(flexGrid);

function updateFilters() {
  cv.filters.clear();
  if (document.getElementById('filterYear').checked) {
    cv.filters.push(function (item) {
      return item.受注日.getFullYear() == 2018;
    });
  }
  if (document.getElementById('filterAmount').checked) {
    cv.filters.push(function (item) {
      return item.金額 >= 30000;
    });
  }
  if (document.getElementById('filterDiscount').checked) {
    cv.filters.push(function (item) {
      return item.値引;
    });
  }
}