バージョン

列移動の構成 (igGrid)

トピックの概要

目的

このトピックでは、コード例を用いて、igGrid™ の列移動機能を構成する方法について説明します。

前提条件

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

  • 列移動の概要: このトピックは、igGrid コントロールの列移動機能およびこの機能が提供する機能性について概念的に説明します。

  • 列移動の有効化: このトピックでは、コード例を用いて、igGrid の列移動機能を有効にする方法について説明します。

このトピックの内容

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

列移動の構成の概要

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

構成可能な項目 詳細 プロパティ
モード デフォルトでは列移動モードは即時です。代わりに遅延モードを構成できます。
タイプ デフォルトでは列移動タイプは DOM 操作です。代わりにグリッドの再レンダリングをタイプに構成できます。 タイプは、ブラウザーによって機能パフォーマンスに異なった影響を与えます。
列 どの列の移動を許可するかを指定できます。
インターフェイス 有効化/無効化 グリッドの列移動インターフェイスを有効または無効にします。
列の移動 ダイアログのルック アンド フィール ダイアログの幅、高さおよびドラッグ アニメーション期間を構成できます。

列移動モード の構成

デフォルトでは列移動モードは即時です。代わりに遅延モードを構成できます。

列移動モードは、列移動機能の mode プロパティから構成されます。

プロパティ設定

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

目的: 使用するプロパティ: 設定の選択肢:
遅延モードの構成 mode ”deferred”
即時モードの構成 mode "immediate"

例

以下のコードは、列移動モードを遅延に設定する方法を示します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            mode: "deferred"
        }
    ]
});

Razor の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().Mode(MovingMode.Deferred))
.DataBind()
.Render())

列移動タイプ の構成

デフォルトでは列移動タイプは DOM 操作です。代わりにグリッドの再レンダリングをタイプに構成できます。タイプは、ブラウザーによって機能パフォーマンスに異なった影響を与えます。

列移動タイプは、列移動機能の moveType プロパティで管理されます。(列移動 type に関する詳細は、「列移動の概要」トピックを参照してください)

プロパティ設定

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

目的: 使用するプロパティ: 設定の選択肢:
グリッドの再レンダリング タイプの構成 moveType "render"
DOM 操作タイプの構成 moveType “dom”

例

以下のコードは、列移動タイプをグリッドの再レンダリングに設定します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            moveType: "render"
        }
    ]
});

Razor の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().MoveType(MovingType.Render))
.DataBind()
.Render())

列に対する列移動の無効化

概要

ユーザーは、移動を許可される列と許可されない列を指定できます。デフォルトでは、列移動はグリッド内のすべての列で有効になっています。列移動の無効化はそれぞれの列について行います。

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

  • JavaScript の場合: 機能の columnSettings プロパティを配列に設定します。オブジェクトは列識別子からなり、その列に対して allowMoving プロパティが設定されます。詳細は、「JavaScript での列に対する列移動の無効化」ブロックを参照してください。

  • ASP.NET MVC の場合: チェーン メソッドでビュー内でグリッドを構成する場合、機能の ColumnSettings メソッドを使用します。詳細は、「MVC での列に対する列移動の無効化」ブロックを参照してください。

列の移動が無効になると、その列に対する列移動ボタンが非表示になります。

プロパティ設定

以下の表は、列の移動を無効にするプロパティとその設定です。

目的: 使用するプロパティ: 設定の選択肢:
列に対する列移動の無効化 いずれか columnSettings.columnKey または columnSettings.columnIndex それぞれにいずれか
列のキー
または
列のインデックス番号
columnSettings.allowMoving false

JavaScript での列に対する列移動の無効化

JavaScript で列に対する列の移動を無効化するには、機能の columnSettings プロパティを配列に設定します。オブジェクトは列識別子からなり、その列に対して allowMoving プロパティが設定されます。

列移動機能の columnSettings プロパティを使用して、1 つ以上の列の移動を無効にします。columnSettings は配列のため、列構成オブジェクトの任意の数を保持できます。各列の構成オブジェクトは columnKey または columnIndex および allowMoving プロパティから構成されます。columnKey および columnIndex プロパティは構成する列を示します。allowMoving プロパティは true に設定されると、列の移動が可能になります (これはデフォルトのビヘイビアーであるため allowMoving を true に設定する必要はありません)。

allowMoving を false に設定すると、列の移動が無効になります。グリッド列をキーで参照する場合は、 columnKey プロパティを使用します。最初のグリッド列構成をインデックスで参照する場合は、 columnIndex プロパティを使用します。

MVC での列に対する列移動の無効化

チェーン メソッドでビューにグリッドを構成時に ASP.NET MVC でのコラムの列移動を無効にするには、ColumnSettings メソッドを使用します。

ColumnSettings メソッドは、列の設定を表す ラムダ式を承諾します。ラムダ式では、ColumnMovingSettingWrapper オブジェクトを返す ColumnSetting メソッドを呼び出します。このオブジェクトには、ColumnKey、ColumnIndex および AllowMoving の個々の列を構成するメソッドが含まれます。これらのメソッドは、JavaScript の対応する要素の機能を真似たものです。ラムダ式の例については、例 ブロックを参照してください。

例

以下のコードは、以下の設定の結果としてコード内に 製品名列 (列キーは “Name”) 用の列移動を無効化します。

プロパティ 値
columnSettings.columnKey "Name"
columnSettings.allowMoving false

JavaScript の場合:

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

Razor の場合:

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

列移動インターフェイスの無効化

概要

グリッドの列移動インターフェイスを有効または無効にします。列移動インターフェイスを無効にするとユーザーに対して非表示になります。

デフォルトでは列移動機能は有効になっているので、列移動インターフェイス (アクティブ化するためのドロップダウンおよびボタン) も使用可能です。これは、ユーザーがドラッグ アンド ドロップで列を移動できないためタッチ デバイス用の列移動をサポートするためです。このインターフェイスを無効にするよう選択することもできます (その場合、ドロップダウンを開くためのボタンが非表示になります)。列移動インターフェイスを無効にすると、グリッド内のすべての列が影響を受けます。

列移動インターフェイスは、機能の addMovingDropdown プロパティによって管理されます。

注: 列移動インターフェイスは、列移動が無効である列上でも無効です。(詳細は、「列に対する列移動の無効化」を参照。)

プロパティ設定

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

目的: 使用するプロパティ: 設定の選択肢:
列移動インターフェイスの無効化 addMovingDropdown false

例

以下のコード例は、列移動のための列移動ドロップダウンを無効にする方法を示しています。

プロパティ 値
addMovingDropdown false

以下のコード スニペットは、 addMovingDropdown プロパティをコードで使用して列を移動する方法を示します。

JavaScript の場合:

$("#grid").igGrid({
    dataSource: adventureWorks,
    autoGenerateColumns: true,
    features: [
        {
            name: "ColumnMoving",
            addMovingDropdown: false
        }
    ]
});

Razor の場合:

@(Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.ID("grid1")
.Features(f => f.ColumnMoving().AddMovingDropdown(false))
.DataBind()
.Render())

関連コンテンツ

トピック

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

サンプル

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

  • 列移動: このサンプルは、igGrid の列移動の構成を示します。

オンラインで表示: GitHub