[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/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.detail.min.js"></script>
<div id="FlexGrid"></div>
<input type="button" value="全詳細行の開閉" onclick="openClese();" />

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data1 = [];
for (var i = 0; i < 3; i++) {
    data1.push({
        id: i,
        country: countries[i % countries.length],
        date: new Date(Date.now() - (Math.random() * 1000000000)),
        amount: Math.random() * 10000,
        active: i % 4 === 0
    });
}

var grid = new wijmo.grid.FlexGrid('#FlexGrid');
grid.itemsSource = data1;

var dp = new wijmo.grid.detail.FlexGridDetailProvider(grid);
dp.detailVisibilityMode = wijmo.grid.detail.DetailVisibilityMode.ExpandMulti;

dp.createDetailCell = function (row) {
    var cell = document.createElement('div');
    var detailGrid = new wijmo.grid.FlexGrid(cell);
    detailGrid.itemsSource = getData();
    return cell;
}

function getData() {
    var data2 = [];
    data2.push({
        date: new Date(Date.now() - (Math.random() * 1000000000)),
        amount: Math.random() * 10000,
        active: i % 4 === 0
    });
    return data2;
}

function openClese() {
    if (dp.isDetailVisible(0)) {
        for (i = 0; i < grid.rows.length; i++)
            dp.hideDetail(i);
    }
    else {
        for (i = 0; i < grid.rows.length; i++)
            dp.showDetail(i);
    }
};