Components List

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

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

デモ

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxHierarchicalGridModule } from "igniteui-angular";
import { HierarchicalGridLoDSampleComponent } from "./hierarchical-grid/hierarchical-grid-lod/hierarchical-grid-lod.component";
import { RemoteLoDService } from "./services/remote-lod.service";
import { HttpClientModule } from "@angular/common/http";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	HierarchicalGridLoDSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxHierarchicalGridModule,
	HttpClientModule
],
  providers: [RemoteLoDService],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import {
    IGridCreatedEventArgs,
    IgxHierarchicalGridComponent,
    IgxRowIslandComponent
} from 'igniteui-angular';
import { IDataState, RemoteLoDService } from '../../services/remote-lod.service';

@Component({
    providers: [RemoteLoDService],
    selector: 'app-hierarchical-grid-lod',
    styleUrls: ['./hierarchical-grid-lod.component.scss'],
    templateUrl: './hierarchical-grid-lod.component.html'
})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
    @ViewChild('hGrid', { static: true })
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }

    public ngAfterViewInit() {
        const dataState: IDataState = {
            key: 'Customers',
            parentID: '',
            parentKey: '',
            rootLevel: true
        };
        this.hGrid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                this.hGrid.isLoading = false;
                this.hGrid.data = data;
                this.hGrid.cdr.detectChanges();
            },
            (error) => {
                this.hGrid.emptyGridMessage = error.message;
                this.hGrid.isLoading = false;
                this.hGrid.cdr.detectChanges();
            }
        );
    }

    public dateFormatter(val: string) {
        return new Intl.DateTimeFormat('en-US').format(new Date(val));
    }

    public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
        const dataState: IDataState = {
            key: event.owner.key,
            parentID: event.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        event.grid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                event.grid.isLoading = false;
                event.grid.data = data;
                event.grid.cdr.detectChanges();
            },
            (error) => {
                event.grid.emptyGridMessage = error.message;
                event.grid.isLoading = false;
                event.grid.cdr.detectChanges();
            }
        );
    }
}
ts

<div class="grid__wrapper">
    <igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'580px'" [width]="'100%'">
        <igx-column field="CustomerID" [hidden]="true"></igx-column>
        <igx-column field="CompanyName"></igx-column>
        <igx-column field="ContactName"></igx-column>
        <igx-column field="ContactTitle"></igx-column>
        <igx-column field="Country"></igx-column>
        <igx-column field="Phone"></igx-column>
        <igx-row-island [height]="null" [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false"  (gridCreated)="gridCreated($event, 'CustomerID')" [width]="'100%'">
            <igx-column field="OrderID" [hidden]="true"></igx-column>
            <igx-column field="ShipCountry"></igx-column>
            <igx-column field="ShipCity"></igx-column>
            <igx-column field="ShipAddress"></igx-column>
            <igx-column field="OrderDate" [formatter]="dateFormatter"></igx-column>
            <igx-row-island [height]="null" [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" (gridCreated)="gridCreated($event, 'OrderID')">
                <igx-column field="ProductID" [hidden]="true"></igx-column>
                <igx-column field="Quantity"></igx-column>
                <igx-column field="UnitPrice"></igx-column>
                <igx-column field="Discount"></igx-column>
            </igx-row-island>
        </igx-row-island>
    </igx-hierarchical-grid>
</div>
html

.grid__wrapper{
    padding: 16px;
}scss

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

仮想化の有効化

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

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

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

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

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

仮想化の制限

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

FAQ

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

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

API リファレンス

その他のリソース

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