[ListBox][ComboBox] グループ化

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/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">

  <h1>グループ化</h1>
  <p>グループ化されたデータのグループヘッダを表示します。グループヘッダは選択できません。</p>
  <label><input id="showGroups" type="checkbox" checked> グループヘッダを表示</label><br>
  <div id="comboBox"></div><br><br>
  <div id="listBox"></div>

</div>

CSS

#listBox {
  height: 200px;
}

JavaScript

var _prefectures = [
  { name: '北海道', region: '北海道' },
  { name: '青森県', region: '東北' },
  { name: '岩手県', region: '東北' },
  { name: '宮城県', region: '東北' },
  { name: '秋田県', region: '東北' },
  { name: '山形県', region: '東北' },
  { name: '福島県', region: '東北' },
  { name: '茨城県', region: '関東' },
  { name: '栃木県', region: '関東' },
  { name: '群馬県', region: '関東' },
  { name: '埼玉県', region: '関東' },
  { name: '千葉県', region: '関東' },
  { name: '東京都', region: '関東' },
  { name: '神奈川県', region: '関東' },
  { name: '山梨県', region: '甲信越' },
  { name: '長野県', region: '甲信越' },
  { name: '新潟県', region: '甲信越' },
  { name: '富山県', region: '北陸' },
  { name: '石川県', region: '北陸' },
  { name: '福井県', region: '北陸' },
  { name: '岐阜県', region: '東海' },
  { name: '静岡県', region: '東海' },
  { name: '愛知県', region: '東海' },
  { name: '三重県', region: '東海' },
  { name: '滋賀県', region: '近畿' },
  { name: '京都府', region: '近畿' },
  { name: '大阪府', region: '近畿' },
  { name: '兵庫県', region: '近畿' },
  { name: '奈良県', region: '近畿' },
  { name: '和歌山県', region: '近畿' },
  { name: '鳥取県', region: '中国' },
  { name: '島根県', region: '中国' },
  { name: '岡山県', region: '中国' },
  { name: '広島県', region: '中国' },
  { name: '山口県', region: '中国' },
  { name: '徳島県', region: '四国' },
  { name: '香川県', region: '四国' },
  { name: '愛媛県', region: '四国' },
  { name: '高知県', region: '四国' },
  { name: '福岡県', region: '九州' },
  { name: '佐賀県', region: '九州' },
  { name: '長崎県', region: '九州' },
  { name: '熊本県', region: '九州' },
  { name: '大分県', region: '九州' },
  { name: '宮崎県', region: '九州' },
  { name: '鹿児島県', region: '九州' },
  { name: '沖縄県', region: '沖縄' },
];
var prefectures = new wijmo.collections.CollectionView(_prefectures, {
  groupDescriptions: ['region']
});

var comboBox = new wijmo.input.ComboBox('#comboBox', {
  itemsSource: prefectures,
  displayMemberPath: 'name',
  showGroups: true
});
var listBox = new wijmo.input.ListBox('#listBox', {
  itemsSource: prefectures,
  displayMemberPath: 'name',
  showGroups:...