[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.expandOnLoadプロパティが追加され、データ設定時に先頭のノードを自動的に展開するかどうかを指定できるようになりました。</p>
  <input type="checkbox" id="expandOnLoad" onchange="update()">
  <label for="expandOnLoad">先頭ノードを自動的に展開しない</label><br>
  <button onclick="setData()">データを設定</button>
  <button onclick="refreshData()">データを更新</button>
  <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');
function setData() {
  treeView.itemsSource = getData();
}
function refreshData() {
  treeView.nodes[1].refresh(getItem());
}
function update() {
  treeView.expandOnLoad = !document.getElementById('expandOnLoad').checked;
}
function getData() {
  var data = [];
  for (var y = 2018; y <= 2019; y++) {
    var year = { header: y + '年', items: [] };
    for (var q = 1; q <= 4; q++) {
      var quarter = { header: 'Q' + q, items: [] };
      for (var m = 1; m <= 3; m++) {
        var month = { header: ((q % 4) * 3 + m) + '月: ' + wijmo.Globalize.format(sample.random(10000) * 100, 'c') };
        quarter.items.push(month);
      }
      year.items.push(quarter);
    }
    data.push(year);
  }
  return data;
}
function getItem() {
  var item = { header: '更新: 2019年', items: [] };
  for (var q = 1; q <= 4; q++) {
    var quarter = { header: 'Q' + q, items: [] };
    for (var m = 1; m <= 3; m++) {
      var month = { header: ((q % 4) * 3 + m) + '月: ' + wijmo.Globalize.format(sample.random(10000) * 100, 'c') };
      quarter.items.push(month);
    }
    item.items.push(quarter);
  }
  return item;
}