[FlexGrid] グループパネルのフィルタ

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/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.grouppanel.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="groupPanelFilter" type="checkbox" checked> グループパネルのフィルタ</label>
  <div id="groupPanel"></div>
  <div id="flexGrid"></div>

</div>

CSS

#flexGrid {
  height: 300px;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.ordersDetail(100),
  columns: [
    { header: 'No', binding: 'No', width: 60 },
    { header: '分類名', binding: '分類名', width: 140, visible: false },
    { header: '商品名', binding: '商品名', width: 200, visible: false },
    { header: '受注日', binding: '受注日', width: 100 },
    { header: '金額', binding: '金額', format: 'c', width: 80 },
    { header: '値引', binding: '値引', width: 60 }
  ]
});
var filter = new wijmo.grid.filter.FlexGridFilter(flexGrid, {
  showFilterIcons: false
});
var groupPanel = new wijmo.grid.grouppanel.GroupPanel('#groupPanel', {
  placeholder: 'ここに列をドラッグするとグループを作成します',
  grid: flexGrid,
  filter: filter
});
var cv = flexGrid.collectionView;
cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('分類名'));
cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription('商品名'));

document.getElementById('groupPanelFilter').addEventListener('change', function(e) {
  groupPanel.filter = e.target.checked ? filter : null;
});