Run Fast: Ignite UI グリッドの仮想化機能を使用

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

• npm install
• npm start

npm install コマンドを実行することで全ての依存する項目がインストールされます。npm start コマンドを実行することで Angular アプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行され、グリッドが表示されます。

スターター プロジェクトには、大量のデータセットを使用して作成されたグリッドが含まれています。グリッドでは仮想化がまだ有効になっていないため、グリッドはすべてのレコードをレンダリングするのに時間がかかっています。さらに、すべての行を一度にレンダリングします。5000 行の場合、グリッドは 5000 行分の要素を DOM に作成しているため、アプリケーションの実行速度が遅くなり、効率が低下します。データの大規模なセットにもかかわらず、アプリケーションを高速に実行するには、グリッド上で仮想化を構成する必要があります。

また、このレッスンのスタートプロジェクトには、Angular アプリケーションで REST API を使用し、大きなデータ セットを作成するコードが含まれています。REST API とサーバー通信を使用するために、Angular は http クラスを提供します。

http クラスと Angular におけるサーバー通信についてはこちらをご覧ください。

手順 1: 固定仮想化を有効化

仮想化を有効化させるためには下記のプロパティを設定する必要があります。

1. virtualizationMode
2. virtualization
3. height

仮想化を使用する場合、必ず height プロパティが必要になります。設定されていない場合は、エラーが発生します。

行と列の両方の仮想化を有効にするには、virtualization プロパティの値を true に設定します。virtualization プロパティは数値を設定することもでき、この場合はデータソース内のレコードが指定された数よりも多い場合に、仮想化が有効になります。

固定仮想化を有効化する場合は下記の設定を行います。

• virtualization : true
• virtulizationMode : “fixed”
• height : ピクセルでの高さの値 (ここでは “300px”)

仮想化に必要なオプション設定を行うため、grid.component.ts ファイルを開き、getGridOptions() 関数を下記のように変更します。

getGridOptions() {
  return {
    width: "100%",
    autoGenerateColumns: false,
    height: "300px",
    virtulization: true,
    virtualizationMode: "fixed",
    columns: [
      { headerText: "ID", key: "Id", dataType: "string",width:"10%" },
      { headerText: "CLOSE", key: "Close", dataType: "number",width:"15%" },
      { headerText: "DATE", key: "Date", dataType: "string",width:"15%" },
      { headerText: "HIGH", key: "High", dataType: "number",width:"15%" },
      { headerText: "LOW", key: "Low", dataType: "number",width:"15%" },
      { headerText: "OPEN", key: "Open", dataType: "number",width:"15%" },
      { headerText: "VOLUME", key: "Volume", dataType: "number",width:"15%"}
    ]
  };
}

アプリケーションを実行し下にスクロールを行うと、固定仮想化が有効化されたグリッドを確認できます。

手順 2: 連続仮想化を有効化

連続仮想化を有効化する場合は下記の設定を行います。

• rowVirtualization : true
• virtulizationMode : “continuous”
• height : ピクセルでの高さの値 (ここでは “300px”)

連続仮想化に必要なオプション設定を行うため、grid.component.ts ファイルを開き、getGridOptions() 関数を下記のように変更します。

getGridOptions() {
  return {
    width: "100%",
    autoGenerateColumns: false,
    height: "300px",
    rowVirtualization: true,
    virtualizationMode: "continuous",
    columns: [
      { headerText: "ID", key: "Id", dataType: "string" },
      { headerText: "CLOSE", key: "Close", dataType: "number" },
      { headerText: "DATE", key: "Date", dataType: "string" },
      { headerText: "HIGH", key: "High", dataType: "number" },
      { headerText: "LOW", key: "Low", dataType: "number" },
      { headerText: "OPEN", key: "Open", dataType: "number" },
      { headerText: "VOLUME", key: "Volume", dataType: "number" }
    ]
  };
}

アプリケーションを実行し下にスクロールを行うと、連続仮想化が有効化されたグリッドを確認できます。

連続仮想化では、データソース内の行の一部だけが DOM に表示されます。ユーザーがグリッド上で上下にスクロールすると、仮想化機能によって、現在の行が行の次/前の部分を表示するのに十分であるかどうかが判断されます。新しい行が必要な場合は、行の現在の部分が削除され、新しい行の部分が作成されます。