このトピックでは、コード例を用いて、igGrid
™ の列移動機能を構成する方法について説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
列移動の概要: このトピックは、igGrid
コントロールの列移動機能およびこの機能が提供する機能性について概念的に説明します。
列移動の有効化: このトピックでは、コード例を用いて、igGrid
の列移動機能を有効にする方法について説明します。
このトピックは、以下のセクションで構成されます。
以下の表は、igGrid
列移動の構成可能な要素を示しています。このメソッドについては、表の下にある解説も参照してください。
構成可能な項目 | 詳細 | プロパティ | |
---|---|---|---|
モード | デフォルトでは列移動モードは即時です。代わりに遅延モードを構成できます。 | ||
タイプ | デフォルトでは列移動タイプは DOM 操作です。代わりにグリッドの再レンダリングをタイプに構成できます。 タイプは、ブラウザーによって機能パフォーマンスに異なった影響を与えます。 | ||
列 | どの列の移動を許可するかを指定できます。 | ||
インターフェイス | 有効化/無効化 | グリッドの列移動インターフェイスを有効または無効にします。 | |
列の移動 ダイアログのルック アンド フィール | ダイアログの幅、高さおよびドラッグ アニメーション期間を構成できます。 |
デフォルトでは列移動モードは即時です。代わりに遅延モードを構成できます。
列移動モードは、列移動機能の mode
プロパティから構成されます。
以下の表では、目的の構成をプロパティ設定にマップしています。
以下のコードは、列移動モードを遅延に設定する方法を示します。
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 に関する詳細は、「列移動の概要」トピックを参照してください)
以下の表では、目的の構成をプロパティ設定にマップしています。
以下のコードは、列移動タイプをグリッドの再レンダリングに設定します。
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 で列に対する列の移動を無効化するには、機能の columnSettings
プロパティを配列に設定します。オブジェクトは列識別子からなり、その列に対して allowMoving
プロパティが設定されます。
列移動機能の columnSettings
プロパティを使用して、1 つ以上の列の移動を無効にします。columnSettings は配列のため、列構成オブジェクトの任意の数を保持できます。各列の構成オブジェクトは columnKey
または columnIndex
および allowMoving
プロパティから構成されます。columnKey
および columnIndex
プロパティは構成する列を示します。allowMoving
プロパティは true に設定されると、列の移動が可能になります (これはデフォルトのビヘイビアーであるため allowMoving
を true に設定する必要はありません)。
allowMoving
を false に設定すると、列の移動が無効になります。グリッド列をキーで参照する場合は、 columnKey
プロパティを使用します。最初のグリッド列構成をインデックスで参照する場合は、 columnIndex
プロパティを使用します。
チェーン メソッドでビューにグリッドを構成時に 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())
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
コードによる列の移動: このトピックは、列移動 API を使用して列を移動する方法をコード例を用いて説明します。
プロパティ リファレンス: このトピックは、igGrid
の列移動機能 API の一部のプロパティに関する参考情報を提供します。
このトピックについては、以下のサンプルも参照してください。
igGrid
の列移動の構成を示します。オンラインで表示: GitHub