[FlexGrid] 列ヘッダをクリックして、列単位で選択する方法

by Wijmo5_jp

HTML

<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.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<div id="FlexGrid"></div>

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#FlexGrid');
flexGrid.itemsSource = createData(5);
flexGrid.allowSorting = false;

flexGrid.hostElement.addEventListener('click', function (e) {
    var ht = flexGrid.hitTest(e.pageX, e.pageY);
    if (ht.cellType == wijmo.grid.CellType.ColumnHeader) {
        flexGrid.selection = new wijmo.grid.CellRange(0, ht.col, flexGrid.rows.length - 1, ht.col);
    }
});

function createData(count) {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];

    for (var i = 0; i < count; i++) {
        data.push({
            id: i + 1,
            country: countries[i % countries.length],
            date: new Date(2017, i % 12, i % 28 + 1),
            amount: Math.random() * 10000,
            active: i % 4 == 0
        });
    }

    return data;
}