このトピックは、コード例を示して、igGrid
™ で仮想化機能を有効化して構成する方法を説明します。
このトピックは、以下のセクションで構成されます。
次の表は、仮想化機能の構成可能な設定をリストして、設定を管理するためのプロパティにマップします。
設定 | プロパティ | 説明 |
---|---|---|
行仮想化 | rowVirtualization | 行のみで仮想化を有効/無効にします。 |
列仮想化 | columnVirtualization | 列仮想化を有効/無効にします。列仮想化は固定行仮想化に依存関係があり、明示的に有効されていない場合、暗示的に有効されます。 |
行仮想化および列仮想化 | virtualization | 単一のオプションにより rowVirtualization および columnVirtualization を設定します。 |
仮想化モード | virtualizationMode | 行仮想化モードを決定します。 |
平均の行の高さ | avgRowHeight | 固定行仮想化で使用されます。描画する行の数を計算するために使用されるピクセル単位の平均値を決定します。すべての行の高さは自動的にこの値に設定されます。 |
列の平均幅 | avgColumnWidth | 列仮想化で使用されます。これは列幅の平均値 (ピクセル単位) です。 |
固定行仮想化は、igGrid
コントロールの rowVirtualization
オプションを true
に設定することで有効化します。
以下のオプションを設定する必要があります:
固定行仮想化を使用する場合、すべての行の高さは同じです。その高さは avgRowHeight
オプションで設定されます。このオプションを計算する方法の詳細については、「平均の行の高さの構成」セクションを参照してください。
注: 行の平均高さを正しく設定しないと、最後の行がグリッドから切り落とされる (表示されない) 可能性があります。
固定仮想化の構成で重要な点として、avgRowHeight
プロパティの値の決定プロセスがあります。avgRowHeight
プロパティは、グリッドの表示行の平均高さを決定します。
このオプションの設定の一般則として、常に avgRowHeight
をグリッドの高さの値で均等に分割できる値に設定します。
デフォルトで、グリッドは "30px" の行の高さを設定しますが、テキストの折り返しのため、より大きい avgRowHeight
値を設定する場合があります。
例:
グリッド高さ: 600px => avgRowHeight
: 30、または 15、または 60。
以下の表は、固定行仮想化を構成する方法を紹介します。
プロパティ | 値 |
---|---|
rowVirtualization | true |
virtualizationMode (オプション) | "fixed" (デフォルト値) |
height | "600px" |
avgRowHeight (オプション) | "30px" (デフォルト値) |
次のコードで、例の設定を構成します。
JavaScript の場合:
$("#grid1").igGrid({
rowVirtualization: true,
virtualizationMode: "fixed",
height: "600px",
avgRowHeight: "30px"
});
ASPX の場合:
<%=Html.Infragistics().Grid(Model).ID("grid1")
.LoadOnDemand(false)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.PrimaryKey("ProjectID")
.Columns(column =>
{
column.For(x => x.ProjectID).HeaderText("ProjectID");
column.For(x => x.Name).HeaderText("Name");
column.For(x => x.StartDate).HeaderText("StartDate");
column.For(x => x.EndDate).HeaderText("EndDate");
})
.Height("600px")
.RowVirtualization(true)
.VirtualizationMode(VirtualizationMode.Fixed)
.AvgRowHeight("30px")
}).DataBind().Render() %>
以下のサンプルは固定仮想化を紹介します。
列仮想化は、igGrid
コントロールの columnVirtualization
オプションを true
に設定することで有効化します。有効な場合、固定行仮想化も有効にします。
以下のオプションを設定する必要があります:
列の仮想化が有効な場合、表示列の幅の合計がグリッドの幅と等しい必要があります。等しい場合は、表示されているすべての列がビューポートで表示されます。
水平方向のスクロールバーの幅が正しく、最後の表示列までのスクロールを許可するには、avgColumnWidth
オプションも計算し、設定します。
次のセクションは avgColumnWidth
オプションを計算する方法を説明します。
avgColumnWidth
オプションは、グリッドで定義される列の平均幅を決定します。このオプションを現在のグリッド構成にある列の平均幅にピクセル単位で設定します。
例:
グリッドの幅: 300px、4 列の幅の例: 100px, 200px, 100px, 200px => avgColumnWidth
: 150
以下の表は、列仮想化を構成する方法を紹介します。
プロパティ | 値 |
---|---|
columnVirtualization | true |
virtualizationMode (オプション) | "fixed" (デフォルト値) |
width | "400px" |
defaultColumnWidth | "200px" |
avgColumnWidth | "200px" |
height | "600px" |
avgRowHeight (オプション) | "30px" (デフォルト値) |
注:
defaultColumnWidth
の代わりに各列に指定した幅を定義できます。
次のコードで、例の設定を構成します。
JavaScript の場合:
$("#grid1").igGrid({
columnVirtualization: true,
width: "400px",
height: "600px",
defaultColumnWidth: "200px",
avgColumnWidth: "200px",
avgRowHeight: "30px"
});
ASPX の場合:
<%=Html.Infragistics().Grid(Model).ID("grid1")
.LoadOnDemand(false)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.PrimaryKey("ProjectID")
.Columns(column =>
{
column.For(x => x.ProjectID).HeaderText("ProjectID");
column.For(x => x.Name).HeaderText("Name");
column.For(x => x.StartDate).HeaderText("StartDate");
column.For(x => x.EndDate).HeaderText("EndDate");
})
.Width("400px")
.Height("600px")
.DefaultColumnWidth("200px")
.ColumnVirtualization(true)
.AvgRowHeight("30px")
.AvgColumnWidth("200px")
}).DataBind().Render() %>
グリッド ビューポートでは一度に 2 列のみ描画されます。
igGrid コントロールの rowVirtualization オプションを true
に設定し、virtualizationMode を "continuous" にすることで、仮想化が継続的になります。
以下のオプションを設定する必要があります:
注: 列仮想化は連続仮想化でサポートされていません。
次の表は、行の高さが 400 ピクセルの行と列に対し、継続的な仮想化を設定する方法を示します。
プロパティ | 値 |
---|---|
rowVirtualization | true |
virtualizationMode | "continuous" |
height | "400px" |
次のコードで、例の設定を構成します。
JavaScript の場合:
$("#grid1").igGrid({
rowVirtualization: true,
virtualizationMode: "continuous",
height: "400px"
});
ASPX の場合:
<%=Html.Infragistics().Grid(Model).ID("grid1")
.LoadOnDemand(false)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.PrimaryKey("ProjectID")
.Columns(column =>
{
column.For(x => x.ProjectID).HeaderText("ProjectID");
column.For(x => x.Name).HeaderText("Name");
column.For(x => x.StartDate).HeaderText("StartDate");
column.For(x => x.EndDate).HeaderText("EndDate");
})
.RowVirtualization(true)
.VirtualizationMode(VirtualizationMode.Continuous)
.Height("400px")
.DataBind().Render()
%>
以下のサンプルは連続仮想化を紹介します。
このトピックに関連する追加情報については、以下のトピックを参照してください。
igGrid
コントロールの仮想化機能を紹介します。igGrid
の機能を同時に有効にした場合の機能間の互換性を示しています。オンラインで表示: GitHub