Grid 仮想化とパフォーマンス

Ignite UI for Angular の IgxGrid コントロールは、igxForOf ディレクティブを使用し、水平および垂直方向にコンテンツを仮想化します。

デモ


仮想化の有効化

igxForOf ディレクティブは、ビューポートに表示されているデータのみを描画し、ユーザーがスクロール時に表示データを切り替えた際に @@ が DOM 描画およびメモリ使用を最適化します。IgxGridwidthheight は、デフォルトが 100% で表示コンテンツが使用可能なスペースにフィットしない場合、水平または垂直のスクロールバーが必要になります。ただし、Grid の width および/または heightnull に設定することが可能で、関連するディメンションが内部の項目サイズの合計で決定されます。スクロールバーが表示されず、すべての項目が相対するディメンション (widthnull 値の場合は列で、height が null 値の場合は行) に描画されます。

データのサイズは以下によって決定されます。

  • 垂直 (行) 仮想化の行の高さ。rowHeight オプションで決定されますがデフォルトは 50(px) です。
  • 水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する Grid の columnWidth オプションを設定できます。

ディメンションを設定せずにグリッドでデフォルト動作を適用する場合、ほとんどの場合は望ましいレイアウトになります。列幅は列カウント、幅が設定された列、および Grid コンテナの計算幅に基づいて決定されます。グリッドは、割り当てる幅が 136px 未満になる以外はすべての列を利用可能なスペースに合わせようとします。その場合、割り当てられない幅を持つ列は 136px の最小幅に設定され、水平方向スクロールバーが表示されます。グリッドは水平方向に仮想化されます。

列幅をパーセンテージ (%) で明示的に設定する場合、ほとんどの場合に水平スクロールバーがない水平方向に仮想化されないグリッドを作成します。

リモート仮想化

IgxGrid は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される igxForOf ディレクティブで実装された動作を公開します。

リモートの仮想化デモ


この機能を使用するには、onDataPreLoad 出力にサブスクライブし、取得した引数に基づいて適切な要求を行い、パブリックIgxGrid プロパティ totalItemCount とサービスの各情報を設定します。

<igx-grid #grid [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [autoGenerate]='false' (onDataPreLoad)="processData(false)"
    (onSortingDone)="processData(true)">
    <igx-column [field]="'ProductID'" [sortable]="true"></igx-column>
    <igx-column [field]="'ProductName'" [sortable]="true"></igx-column>
    <igx-column [field]="'UnitPrice'" [dataType]="'number'" [formatter]="formatCurrency" [sortable]="true"></igx-column>
    ...
</igx-grid>
public ngAfterViewInit() {
    this._remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, (data) => {
            this.grid.totalItemCount = data["@odata.count"];
    });
}

public processData() {
    if (this.prevRequest) {
        this.prevRequest.unsubscribe();
    }

    this._prevRequest = this._remoteService.getData(this.grid.virtualizationState,
        this.grid.sortingExpressions[0], reset, () => {
        ...
        this.cdr.detectChanges();
    });
}

データを要求時、IForOfState インターフェイスを使用する必要があり、 startIndexchunkSize を提供します。

注: 最初の chunkSize は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。

リモートの並べ替え/フィルタリングの仮想化

リモート並べ替えとフィルタリングは、onDataPreLoad, onSortingDone, onFilteringDone アウトプットにサブスクライブする必要があるため、引数に基づいて適切に要求し、。IgxGrid プロパティ [totalItemCount] を設定します。

リモートデータを要求する際にフィルタリング処理で大文字と小文字を区別することに注意してください。


仮想化の制限

  • Mac OS で 「Show scrollbars only when scrolling」システム オプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、Grid の行コンテナーで、overflow が hidden に設定されているためです。オプションを "Always"に変更するとスクロールが表示されます。

FAQ

仮想化で Gridでディメンションを設定する必要があるのはなぜですか?

描画する前にコンテナーおよび項目のサイズの情報がない場合に Grid でランダムな位置にスクロールすると、スクロールバーの幅や高さの設定、表示項目の決定で誤りが発生します。ディメンションの推測がスクロールバーの誤操作となり、ユーザー エクスペリエンスを低下させます。そのため、仮想化を有効にするには、関連ディメンションを設定する必要があります。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。