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

  <h1>検証エラーのツールチップ</h1>
  <p>FlexGrid.errorTipプロパティが追加され、Wijmoのツールチップを使って検証エラーを表示できるようになりました。errorTipプロパティをnullに設定すると、従来のようにブラウザ既定のツールチップ（セルのtitle属性）を使用して表示されます。</p>
  <input type="checkbox" id="errorTip" checked onchange="update()">
  <label for="errorTip">検証エラーをWijmoツールチップで表示</label>
  <div id="flexGrid"></div>

</div>

CSS

.wj-tooltip.wj-error-tip {
  font-weight: normal;
}
.error-highlight {
  font-weight: bold;
  text-decoration: underline;
  color: blue;
}

JavaScript

var cv = new wijmo.collections.CollectionView(sample.orders(10), {
  getError: function(item, property) {
    switch (property) {
      case '値引':
        return item.値引 && item.金額 < 20000 ? '<span class="error-highlight">¥20,000</span>未満の項目は値引できません。' : '';
    }
    return null;
  }
});
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: cv,
  autoGenerateColumns: false,
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日' },
    { header: '金額', binding: '金額', width: 80, format: 'c' },
    { header: '値引', binding: '値引' }
  ],
  errorTip: {
    isContentHtml: true
  }
});
var tooltip = flexGrid.errorTip;
function update() {
  flexGrid.errorTip = document.getElementById('errorTip').checked ? tooltip : null;
}