WijmoでnewRowAtTopを有効にし、新規行を上から追加する方法【FlexGrid対応】

WijmoのFlexGridでは、新しい行は通常、表の最下部に追加されます。newRowAtTopプロパティをtrueに設定すると、新規行テンプレートは表の先頭に表示されるようになりますが、実際に追加される行は依然として最下行となるため、表示と挙動にズレが生じます。

本記事では、このギャップを解消し、新規行を上から追加する方法を丁寧に解説します。

新規行を先頭に追加する実装手順
なぜ collectionView に明示的な通知が必要なのか？
まとめ：FlexGridでの行追加位置を柔軟に制御しよう

新規行を先頭に追加する実装手順

まず、rowAddedイベントを活用して、実際に新規行が追加された際にその位置を操作します。itemsSourceの最後に追加された行を先頭に移動させる実装です。


var theGrid = new FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'id', header: 'ID', width: 80 },
        { binding: 'country', header: '国' },
        { binding: 'downloads', header: 'DL数', width: 80 },
        { binding: 'sales', header: '売上', width: 80 },
        { binding: 'expenses', header: '費用', width: 80 },
    ],
    itemsSource: data,
    allowAddNew: true,
    newRowAtTop: true,
    frozenRows: 1,
});

theGrid.rowAdded.addHandler((s, e) => {
    s.itemsSource.unshift(s.itemsSource.pop());
    s.collectionView.onCollectionChanged(e);
});

ここでのポイントは以下の2点です：