[TreeView] チェック状態をデータ連結で設定

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

  <h1>チェック状態をデータ連結で設定</h1>
  <p>TreeView.checkedMemberPathプロパティが追加され、チェックボックスのチェック状態をデータソースのメンバーと連結できるようになりました。</p>
  <h2>新しい方法：チェック状態をデータ連結で設定</h2>
  <div id="treeView"></div>
  <h2>従来の方法：チェック状態をコードで設定</h2>
  <div id="treeViewOld"></div>

</div>

CSS

.wj-treeview {
  height: 350px;
  border: 1px solid rgba(0,0,0,0.2);
}

JavaScript

var data = sample.productsTree();
for (var i = 0; i < data[0].items.length; i++) {
  data[0].items[i].checked = i % 2;
}

// 新しい方法：データソースでチェック状態を設定して連結できる
var treeView = new wijmo.nav.TreeView('#treeView', {
  itemsSource: data,
  displayMemberPath: '名前',
  showCheckboxes: true,
  checkedMemberPath: 'checked'
});

// 従来の方法：チェックされた項目の配列を作成して設定する必要がある
var treeViewOld = new wijmo.nav.TreeView('#treeViewOld', {
  itemsSource: data,
  displayMemberPath: '名前',
  showCheckboxes: true,
});
treeViewOld.checkedItems = [data[0].items[1], data[0].items[3], data[0].items[5], data[0].items[7], data[0].items[9]];