バージョン

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

トピックの概要

目的

このトピックは、コード例を示して、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()
 %>

以下のサンプルは連続仮想化を紹介します。

関連コンテンツ

トピック

このトピックに関連する追加情報については、以下のトピックを参照してください。

オンラインで表示: GitHub