[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.checkOnClickプロパティが追加され、チェックボックス表示時にノードをクリックしてチェックできるようになりました。</p>
  <input type="checkbox" id="checkOnClick" onchange="update()">
  <label for="checkOnClick">テキストをクリックしてチェック</label><br>
  <div id="treeView"></div>

</div>

CSS

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

JavaScript

var treeView = new wijmo.nav.TreeView('#treeView', {
  itemsSource: sample.productsTree(),
  displayMemberPath: '名前',
  showCheckboxes: true
});
function update() {
  treeView.checkOnClick = document.getElementById('checkOnClick').checked;
}