作成日: 2014/12/15 最終更新日: 2014/12/15
文書種別
制限事項
詳細
仮想スクロールを有効にして、スクロールしてからGridの高さを大きい値に変更すると、変更前のデータしか表示されず、その他のデータが表示されなくなります。
この現象は制限事項です。仮想スクロールを有効にしている場合、サイズが変更されても自動的に再描画されません。高さを変更後に、wijgrid.doRefreshメソッドを実行して明示的に再描画を行う必要があります。
【再現手順】
1. サンプルコードを実行します。
2. 「スクロールバーの表示」をチェックします。
3. Gridを一番下までスクロールします。
4. 「スクロールバーの表示」のチェックを外します。
結果: 上の方のデータが表示されなくなります。
【サンプルコード】
<script type="text/javascript">
$(document).ready(function () {
$('#wijgrid').wijgrid({
data: (function () {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({ ID: i, Name: 'Name' + i });
}
return data;
})(),
scrollMode: "auto",
allowVirtualScrolling: true
});
$('#wijgrid').wijgrid('setSize','','500px');
});
function ChangeHeight(sender) {
if (sender.checked) {
$('#wijgrid').wijgrid('setSize','','300px');
} else {
$('#wijgrid').wijgrid('setSize','','500px');
// 回避方法
//$('#wijgrid').wijgrid('doRefresh');
}
}
</script>
<label><input type="checkbox" onclick="ChangeHeight(this)">スクロールバーの表示</label>
<table id="wijgrid"></table>
この現象は制限事項です。仮想スクロールを有効にしている場合、サイズが変更されても自動的に再描画されません。高さを変更後に、wijgrid.doRefreshメソッドを実行して明示的に再描画を行う必要があります。
【再現手順】
1. サンプルコードを実行します。
2. 「スクロールバーの表示」をチェックします。
3. Gridを一番下までスクロールします。
4. 「スクロールバーの表示」のチェックを外します。
結果: 上の方のデータが表示されなくなります。
【サンプルコード】
<script type="text/javascript">
$(document).ready(function () {
$('#wijgrid').wijgrid({
data: (function () {
var data = [];
for (var i = 0; i < 20; i++) {
data.push({ ID: i, Name: 'Name' + i });
}
return data;
})(),
scrollMode: "auto",
allowVirtualScrolling: true
});
$('#wijgrid').wijgrid('setSize','','500px');
});
function ChangeHeight(sender) {
if (sender.checked) {
$('#wijgrid').wijgrid('setSize','','300px');
} else {
$('#wijgrid').wijgrid('setSize','','500px');
// 回避方法
//$('#wijgrid').wijgrid('doRefresh');
}
}
</script>
<label><input type="checkbox" onclick="ChangeHeight(this)">スクロールバーの表示</label>
<table id="wijgrid"></table>
回避方法
高さを変更した後で、wijgrid.doRefreshメソッドを実行することで、再描画してすべてのデータを表示することができます。
旧文書番号
81105