[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" class="grid"></div>

CSS

.grid {
    height: 250px;
    width: 450px;
}

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#FlexGrid');
flexGrid.itemsSource = createData(20);
flexGrid.allowResizing = wijmo.grid.AllowResizing.None;

var tmpScrollPosition = new wijmo.Point();
flexGrid.scrollPositionChanged.addHandler(function (s, e) {
    if (tmpScrollPosition.x != flexGrid.scrollPosition.x) {
        if (flexGrid.scrollPosition.x == 0) {
            console.log("左端")
        }
        else if (-(flexGrid.scrollPosition.x) + flexGrid.clientSize.width == flexGrid.scrollSize.width) {
            console.log('右端');
        }
    }

    if (tmpScrollPosition.y != flexGrid.scrollPosition.y) {
        if (flexGrid.scrollPosition.y == 0) {
            console.log('上端');
        }
        else if (-(flexGrid.scrollPosition.y) + flexGrid.clientSize.height == flexGrid.scrollSize.height) {
            console.log('下端');
        }
    }

    tmpScrollPosition = flexGrid.scrollPosition;
});

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,
            data1: 'data1',
            data2: 'data2',
            data3: 'data3',
            data4: 'data4',
            data5: 'data5'
        });
    }

    return data;
}