[FlexGrid] 非連結データの検証

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<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/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>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h3>非連結データの検証</h3>
  <p>itemValidatorプロパティを使用すると、非連結データを含む任意のデータを検証することができます。なお、連結データはCollectionView.getErrorプロパティで検証することができます。</p>
  <div id="flexGrid"></div>

</div>

CSS

#flexGrid {
  height: 300px;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  autoGenerateColumns: false,
  itemsSource: sample.ordersDetail(100),
  columns: [
    { binding: 'No', header: 'No', width: 80 },
    { binding: '商品名', header: '商品名', width: 200 },
    { binding: '受注日', header: '受注日' },
    { binding: '数量', header: '数量', width: 80 },
    { header: '値引率（非連結）', width: 130 },
  ]
});
flexGrid.setCellData(0, 4, 0);
flexGrid.setCellData(1, 4, '文字列');
flexGrid.setCellData(2, 4, 120);
flexGrid.setCellData(3, 4, 10);

flexGrid.itemValidator = function (row, col) {
  if (col == 4) {
    var value = Number(flexGrid.getCellData(row, col));
    if (isNaN(value) || value < 0 || value > 100 ) {
      return '0〜100の数値を入力してください';
    }
  }
  return null;
}