Gridの表示レスポンスまでの処理時間の多くはデータ表示におけるHTML DOM作成のための処理時間となっております。HTML DOM作成時間はデータ件数に比例します。そのため、HTML DOM作成対象となるデータ件数を少なくすることで、Gridの表示レスポンスの改善が期待できます。

■手法1 仮想スクロールを使用する

この方法はスクロール領域を設定し、表示領域に表示されるデータのみHTML DOMを作成することで表示レスポンスの改善を狙うアプローチです。例えば100行のデータを表示するグリッドにおいて、20行のデータが表示できるスクロール領域を作成した場合、ページ表示時のHTML DOM作成対象はこの20行分のみとなり、表示レスポンスの向上を期待できます。
ただし、残りの行についてはスクロール時にHTML DOMが新しく自動的に作成されますので、仮想スクロールを行わない場合に比べてスクロール処理は若干遅くなります。

【サンプルコード】
$("#element").height(300).wijgrid({
　　// 垂直方向、水平方向ともにスクロールを有効とする
　　scrollMode: "both",
　　// 仮想スクロールを使用する
　　allowVirtualScrolling: true,
　　…
});

■手法2 ページング機能を使用する

この方法は1ページに表示するデータ件数を制御し、HTML DOMの作成時間を削減することで表示レスポンスの改善を狙うアプローチです。例えば100行のデータを20行×5ページに分けた場合、1ページあたりのHTML DOM作成時間は20件分となり、表示レスポンスの向上を期待できます。

【サンプルコード】
$("#element").wijgrid({
　　// ページングを使用する
　　allowPaging: true,
　　// 1ページに20行表示する
　　pageSize: 20
　　…
});

■手法3 エディタに必要なコードを最小限にとどめる

この方法はセル編集を行うグリッドが対象となります。セル編集を行うエディタはwijgridのcellFormatterフィールドで設定する方法とカスタムエディタを作成する方法があります。
コンボボックスにてセルの入力を行う場合、cellFormatterフィールドで設定する方法ではデータ件数分のコンボボックスのHTML DOMを作成しグリッドに表示します。
カスタムエディタを使用した場合は、編集中となったセルに共通で使用されるコンボボックスを表示します。そのため、HTMLコードとしてはひとつ分のHTML DOMとなります。
カスタムエディタを使用した場合はHTML DOMが削減され表示レスポンスの向上を期待できます。ただし、cellFormatterで作成されたセルは直接入力が可能ですが、カスタムエディタの場合はセルのダブルクリックするなどのアクションによって編集中の状態へ切り替える必要があります。

【サンプルコード】
$("#datagrid").wijgrid({
　　editingMode: "cell",
　　beforeCellEdit: onBeforeCellEdit,
　　afterCellEdit: onAfterCellEdit,
　　…
});

function onBeforeCellEdit(e, args) {
　　…
}

function onAfterCellEdit(e, args) {
　 …
}