グリッドコントロールはパフォーマンスを向上させるために行と列を仮想化する機能を有しています。仮想化が有効となっている場合、グリッドはユーザーに表示されているセルのDOM要素のみを生成します。また、垂直および水平のスクロールによって表示領域が変わると、新たに表示されたセルのDOM要素を生成／更新します。

FlexGridではデフォルトで仮想化が有効となっていますが、virtualizationThresholdプロパティを使用して、行、列それぞれに対して仮想化を有効とするか無効とするかのしきい値を設定することができます。

virtualizationThresholdは、グリッドにバインドされているデータの全行数または全列数に対するしきい値です。（このしきい値の数だけのDOM要素を生成するという意味ではないことにご注意ください。）

• 全行数(または全列数) ≦ しきい値 の場合：
  行(または列)の仮想化が無効となり、常に全行(または全列)のセルのDOM要素が生成されます。
  
  
• 全行数(または全列数) ＞ しきい値 の場合：
  行(または列)の仮想化が有効となり、表示されている行(または列)のセルのDOM要素だけが生成されます。

virtualizationThresholdは、以下のように単一の数値、または数値配列で設定します。

• 単一の数値を設定した場合：
  行、列の仮想化のしきい値がどちらも指定された同じ値に設定されます。
  
  
• 数値配列を設定した場合：
  行、列の仮想化のしきい値がそれぞれ設定されます。

※例えば、virtualizationThreshold = 50 は virtualizationThreshold = [50, 50] と同等です。

サンプル

グリッドにバインドするデータ数とvirtualizationThresholdの値を変更して動作を確認することができます。

仮想化が有効の場合、実行環境によっては、スクロールバーを高速に操作するとセルが瞬間的に空白となり、DOM要素を生成するのに時間を要していることが確認できます。仮想化が無効の場合、設定直後に大量のDOM要素を生成するため、実行環境によってはブラウザが固まったり、処理が遅くなる現象がみられます。

データ数 = [60行 40列]

• virtualizationThreshold = 0, 25　：行、列、共に仮想化が有効となります。
• virtualizationThreshold = 50, [50,50]　：行は仮想化が有効、列は仮想化が無効となります。
• virtualizationThreshold = [80, 30]　：行は仮想化が無効、列は仮想化が有効となります。
• virtualizationThreshold = 100,  [100, 100]　：行、列、共に仮想化が無効となります。

データ数 = [80行 80列]

• virtualizationThreshold = 0, 25, 50, [50,50]　：行、列、共に仮想化が有効となります。
• virtualizationThreshold = [80, 30]　：行は仮想化が無効、列は仮想化が有効となります。
• virtualizationThreshold = 100, [100, 100]　：行、列、共に仮想化が無効となります。

 

[補足]

• 仮想化はグリッドコントロールのサイズ（height／width）が設定されている場合にのみ有効となります。データ数がvirtualizationThresholdのしきい値を超えていても、サイズが設定されていない場合は仮想化は有効となりません。
  参考：デモ ＞ グリッド ＞ サイズ ＞ 概要
  
  
• virtualizationThresholdプロパティは、グリッドが描画される際に使用されるプロパティです。そのため、既にグリッドを描画した状態から、任意のタイミングでvirtualizationThresholdを変更してその変更値が適用されたグリッドを表示するには、グリッドの再描画が必要となります。
  再描画を実行するには、例えば以下の方法があります。
  例1)  refreshメソッドを実行する
  例2)  手動でスクロールバーを操作する
  例3)  グリッドのセルを編集する
  
  
• 生成されている行数、列数は、以下のように確認することができます。

  grid.cells.hostElement.querySelectorAll(".wj-row").length;// 行数
  grid.cells.hostElement.querySelectorAll(".wj-row")[0].querySelectorAll(".wj-cell").length;// 列数