Wijmo FlexGrid グループ化のカスタマイズ（グループパネルを使用）

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.grouppanel.min.js"></script>
<div class="container-fluid">
  <div id="groupPanel"></div>
  <div id="flexGrid"></div>
</div>

CSS

body {
  margin: 50px 0;
}
#flexGrid {
  height: 500px;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var groupDate = new wijmo.collections.PropertyGroupDescription('受注日', function (item, prop) {
    return wijmo.Globalize.formatDate(item[prop], 'yyyy年')
  });
  var groupAmount = new wijmo.collections.PropertyGroupDescription('金額', function (item, prop) {
    let value = item[prop];
    if (value > 5000) return '大';
    if (value > 2500) return '中';
    return '小';
  })
  var view = new wijmo.collections.CollectionView(getData(100), {
    sortDescriptions: ['受注日', '金額'],
    groupDescriptions: [groupDate, groupAmount]
  });
  var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
    itemsSource: view,
    columns: [
      { binding: 'No', width: 80 },
      { binding: '顧客名', width: 140 },
      { binding: '商品名', width: 160 },
      { binding: '受注日', width: 120 },
      { binding: '金額', format: 'c', width: 100 },
      { binding: '値引', width: 80 }
    ]
  });
  var groupPanel = new wijmo.grid.grouppanel.GroupPanel('#groupPanel', {
    grid: flexGrid,
    hideGroupedColumns: false,
    groupDescriptionCreator: function (prop) {
      switch (prop) {
        case '受注日':
          return groupDate;
        case '金額':
          return groupAmount;
      }
      return null;
    }
  });
}

var customerNames = ['小料理なんごく' ,'割烹ふじい' ,'海鮮料理くじら' ,'居酒屋ななべえ' ,'酒蔵でん'];
var productNames = ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター', 'コーヒーミルク', 'ピリピリビール', 'オタル白ラベル', 'バードワイン'];
function random(max, min) {
  if (!min) min = 0;
  return Math.floor(Math.random() * (max - min)) + min;
}
function randomDate() {
  let date = new Date((new Date()).getFullYear() - 5, 3, 1);
  return wijmo.DateTime.addDays(date, random(365 * 5));
}
function getData(length) {
  let data = [];
  for (let i = 0; i < length; i++) {
    data.push({
      No: i,
      顧客名: customerNames[random(customerNames.length)],
      商品名: productNames[random(productNames.length)],
      受注日:...