列固定の構成 (igGrid)

トピックの概要

目的

このトピックではコード例を使用して、列固定領域の配置、列固定の初期状態、固定解除列領域の最小幅など igGrid™ コントロールの列固定機能を構成する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

• igGrid の概要: このトピックでは、igGrid コントロールとその機能の概念的な概要を提供し、HTML ページへの追加方法をコードを用いて説明します。

• igGrid/igDataSource アーキテクチャの概要: このトピックでは、igGrid コントロールのインナー作用およびデータ ソース コンポーネントとの相互作用を説明します (igDataSource™)。

• 列固定の概要 (igGrid): このトピックでは、サポートされているユーザー インストラクションおよび主な構成オプションなど、igGrid の列固定機能の概要を説明します。

• 列固定の有効化 (igGrid): このトピックではコード例を使用して、JavaScript と ASP.NET MVC で igGrid の列固定機能を有効にする方法を説明します。

このトピックの内容

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

• 列固定の構成の概要
• 列固定方向の構成
  • プロパティ設定
  • 例: 右側の固定方向の構成
• 列固定の初期状態の構成
  • 概要
  • プロパティ設定
  • 例
• 列に対する列固定の無効化
  • 概要
  • プロパティ設定
  • 例
• 固定できない列領域の最小幅の構成
  • プロパティ設定
  • 例
• 関連コンテンツ
  • トピック
  • サンプル

列固定の構成の概要

以下の表に、igGrid 列固定の構成可能な要素を示します。このメソッドについては、表の下にある解説も参照してください。

グリッドでの固定列の配置の構成

デフォルトでは、固定列 (固定列領域) は左側に、固定解除列 (固定解除列領域) は右側に配置されます。固定列と固定解除列の位置はスワップ (固定列を右側、固定解除列を左側に配置) できます。

固定列領域と固定解除列領域との位置関係は、列固定機能の fixingDirection プロパティによって管理されます。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、以下の設定の結果、グリッドの右側に配置される固定列領域を示します。

以下のコードはこの例を実装します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            fixingDirection: "right"
        }
    ]
});

ASPX の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnFixing().FixingDirection(ColumnFixingDirection.Right))
.DataBind()
.Render())

列固定の初期状態の構成

概要

グリッドの最初の初期化設定時に固定する列、および固定解除の列を指定できます。デフォルトで、すべての列の初期値は固定解除です。最初の固定列の構成は、各列で個別に行われます。

グリッドの初期化設定時に列を固定するには、列を (列キーまたは列インデックスである列識別子で) 指定し、isFixed プロパティを true に設定する必要があります。

• JavaScript の場合は、列固定機能の columnSettings プロパティを配列に設定します。その配列のオブジェクトは、列識別子および、その列の isFixed プロパティの設定で構成されます。
• ASP.NET MVC の場合、チェーン メソッドでビュー内にグリッドを構成する場合、列固定機能の ColumnSettings メソッドを使用します。

列に対して列固定が無効になると、その列に対する列ヘッダー ピン固定ボタンが非表示になります。

プロパティ設定

以下の表は、初期の列の固定を有効にするプロパティとその設定を示します。

例

以下のスクリーンショットは、以下の設定の結果、igGrid の初期化設定時に固定される Product Name 列 (列キーは "Name") を示します。

以下のコードはこの例を実装します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            columnSettings: [
                {
                    columnKey: "Name",
                    isFixed: true
                }
            ]
        }
    ]});

ASPX の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => 
    f.ColumnFixing()
    .ColumnSettings(cs => cs.ColumnSetting().ColumnKey("Name").IsFixed(true)))
.DataBind()
.Render())

列に対する列固定の無効化

概要

固定を許可する列と許可しない列を指定できます。デフォルトで、グリッド内のすべての列に対して、列固定は有効です。列固定の無効化は、各列で個別に実行されます。

列の固定を無効にするには、列を (列キーまたは列インデックスである列識別子で) 指定し、allowFixing プロパティを false に設定する必要があります。

• JavaScript の場合は、機能の columnSettings プロパティを配列に設定します。その配列のオブジェクトは、列識別子および、その列の allowFixing プロパティの設定で構成されます。
• ASP.NET MVC の場合、チェーン メソッドでビュー内にグリッドを構成する場合、列固定機能の ColumnSettings を使用します。

列に対して列固定が無効になると、その列に対する列ヘッダー ピン固定ボタン が非表示になります。

プロパティ設定

以下の表は、列の固定を無効にするプロパティとその設定を示します。

例

以下のスクリーンショットは、以下の設定の結果、列固定が無効化された Product Name 列 (列キーは "Name") 示します。

以下のコードはこの例を実装します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            columnSettings: [
                {
                    columnKey: "Name",
                    allowFixing: false
                }
            ]
        }
    ]});

ASPX の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => 
    f.ColumnFixing()
    .ColumnSettings(cs => cs.ColumnSetting().ColumnKey("Name").AllowFixing(false)))
.DataBind()
.Render())

固定解除列領域の最小幅の構成

固定解除列領域 は、水平スクロールバーで、列が固定された時に自動的に縮小します。その結果、固定解除列領域が非常に狭くなる場合があります。そのために、最小のしきい値幅を設定し、スクロールバーが引き続き操作できるようにします。最小のしきい値の幅に達した場合、columnFixingRefused イベントが発生し、すでに固定されている複数の列の固定解除をするまで、列を固定できないことを通知します。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、以下の設定の結果、非固定列の最小幅の外観がどのようになるか示しています。

以下のコードはこの例を実装します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnFixing",
            minimalVisibleAreaWidth: 100
        }
    ]
});

ASPX の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnFixing().MinimalVisibleAreaWidth(100)
.DataBind()
.Render())

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• メソッドの参照 (列固定、igGrid): このトピックは、igGrid コントロールの列固定機能に関するメソッドの参照情報を提供します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• 列の固定: このサンプルは、デフォルトで列を固定に設定する方法や列の固定を防止する方法など、igGrid の列固定の基本機能を紹介します。