仮想化の有効化と構成 (igGrid)

トピックの概要

目的

このトピックは、コード例を示して、igGrid™ で仮想化機能を有効化して構成する方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 仮想化の構成 - 概要
• 固定行の仮想化の有効化と構成
  • 行の高さの構成
  • 固定行の仮想化の例
• 列の仮想化の有効化と構成
  • 列幅の構成
  • 列仮想化の例
• 連続行の仮想化の有効化と構成
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック

仮想化の構成 - 概要

次の表は、仮想化機能の構成可能な設定をリストして、設定を管理するためのプロパティにマップします。

固定行の仮想化の有効化と構成

固定行仮想化は、igGrid コントロールの rowVirtualization オプションを true に設定することで有効化します。

以下のオプションを設定する必要があります:

• height
• avgRowHeight

固定行仮想化を使用する場合、すべての行の高さは同じです。その高さは avgRowHeight オプションで設定されます。このオプションを計算する方法の詳細については、「平均の行の高さの構成」セクションを参照してください。 注: 行の平均高さを正しく設定しないと、最後の行がグリッドから切り落とされる (表示されない) 可能性があります。

平均の行高さの構成

固定仮想化の構成で重要な点として、avgRowHeight プロパティの値の決定プロセスがあります。avgRowHeight プロパティは、グリッドの表示行の平均高さを決定します。 このオプションの設定の一般則として、常に avgRowHeight をグリッドの高さの値で均等に分割できる値に設定します。 デフォルトで、グリッドは "30px" の行の高さを設定しますが、テキストの折り返しのため、より大きい avgRowHeight 値を設定する場合があります。

例:

グリッド高さ: 600px => avgRowHeight: 30、または 15、または 60。

固定行の仮想化の例

以下の表は、固定行仮想化を構成する方法を紹介します。

コード

次のコードで、例の設定を構成します。

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 に設定することで有効化します。有効な場合、固定行仮想化も有効にします。

以下のオプションを設定する必要があります:

• width
• defaultColumnWidth または各列の列 width。
• avgColumnWidth
• height (行仮想化の自動有効化のため)
• avgRowHeight (行仮想化の自動有効化のため)

列の仮想化が有効な場合、表示列の幅の合計がグリッドの幅と等しい必要があります。等しい場合は、表示されているすべての列がビューポートで表示されます。 水平方向のスクロールバーの幅が正しく、最後の表示列までのスクロールを許可するには、avgColumnWidth オプションも計算し、設定します。 次のセクションは avgColumnWidth オプションを計算する方法を説明します。

列の平均幅の構成

avgColumnWidth オプションは、グリッドで定義される列の平均幅を決定します。このオプションを現在のグリッド構成にある列の平均幅にピクセル単位で設定します。

例:

グリッドの幅: 300px、4 列の幅の例: 100px, 200px, 100px, 200px => avgColumnWidth: 150

列仮想化の例

以下の表は、列仮想化を構成する方法を紹介します。

注: 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" にすることで、仮想化が継続的になります。

以下のオプションを設定する必要があります:

• height

注: 列仮想化は連続仮想化でサポートされていません。

例

次の表は、行の高さが 400 ピクセルの行と列に対し、継続的な仮想化を設定する方法を示します。

コード

次のコードで、例の設定を構成します。

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):このトピックは、igGrid の機能を同時に有効にした場合の機能間の互換性を示しています。