Run Fast: Ignite UIグリッドの仮想化機能を使用
仮想化の必要性
仮想化は、エンドユーザーに大量のレコードを表示する際に役立つツールです。仮想化されたグリッドは、大量のレコードバインドをサポートし、グリッドにおける高速スクロール機能と併用することでエンドユーザーに対して高い応答性を提供します。
Ignite UI igGridは 2 種類の仮想化機能をサポートしています。
- 連続仮想化
- 固定仮想化
固定仮想化は、可視行のみがグリッドに表示されます。連続仮想化では、あらかじめ定義された行数がグリッドに表示されます。Ignite UIグリッドは、列の仮想化、行の仮想化、またはその両方を設定できます。行の仮想化は、データ行が仮想化され、列の仮想化では、データ ソースの列が仮想化されます。データソースに多数の列がある場合は、列の仮想化を有効にすることを選択できます。
このレッスンを終えることで仮想化機能が有効化されたグリッドがAngularアプリケーションに追加されます。Ignite UI for jQueryをAngularで使用するための詳細についてはIgnite UI for jQuery Angular ラッパー ページをご覧ください。
レッスンの目的
- 固定仮想化を設定
- 連続仮想化を設定
コントロールの詳細については Ignite UIデータ グリッドをご覧ください
プロジェクトのセット アップ
こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)
ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。
- npm install
- npm start
npm installコマンドを実行することで全ての依存する項目がインストールされます。npm startコマンドを実行することでAngularアプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行され、グリッドが表示されます。

スターター プロジェクトには、大量のデータセットを使用して作成されたグリッドが含まれています。グリッドでは仮想化がまだ有効になっていないため、グリッドはすべてのレコードをレンダリングするのに時間がかかっています。さらに、すべての行を一度にレンダリングします。5000 行の場合、グリッドは 5000 行分の要素を DOM に作成しているため、アプリケーションの実行速度が遅くなり、効率が低下します。データの大規模なセットにもかかわらず、アプリケーションを高速に実行するには、グリッド上で仮想化を構成する必要があります。
また、このレッスンのスタートプロジェクトには、AngularアプリケーションでREST APIを使用し、大きなデータ セットを作成するコードが含まれています。REST APIとサーバー通信を使用するために、Angularは httpクラスを提供します。
http クラスと Angular におけるサーバー通信についてはこちらをご覧ください。
手順 1: 固定仮想化を有効化
仮想化を有効化させるためには下記のプロパティを設定する必要があります。
- virtualizationMode
- virtualization
- 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に表示されます。ユーザーがグリッド上で上下にスクロールすると、仮想化機能によって、現在の行が行の次/前の部分を表示するのに十分であるかどうかが判断されます。新しい行が必要な場合は、行の現在の部分が削除され、新しい行の部分が作成されます。
結びに
業務アプリケーションでは、何千ものレコードをグリッドにレンダリングする必要があります。アプリケーションが何千ものレコードをレンダリングしている場合においても、グリッドはユーザーが急にスクロールした際に反応しなければなりません。これを実現するには、グリッドの仮想化機能を有効にします。このレッスンでは、固定および継続的な仮想化のためのグリッドの構成について学習しました。