バージョン

列移動の有効化 (igGrid)

トピックの概要

目的

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

前提条件

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

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

このトピックの内容

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

列移動 - 概要

igGrid は、デフォルトでは列移動はサポートしません。このため、明示的に有効にする必要があります。これは、JavaScript と ASP.NET MVC では異なります。

以下において列移動を有効にするには 以下を実行します。
JavaScript ファイル グリッドの features 配列において列移動構成を定義します。
ASP.NET MVC グリッドの Features メソッドに渡されるデリゲートで列移動機能をインスタンス化します。

列移動 - コード例

以下は、このトピックで使用したコード例を示しています。

JavaScript で列移動を有効にする (コード例)

以下のコードは、AdventureWorks データベースからの製品表データにバインドされる igGrid インスタンスを作成します。列は自動生成されます。列移動は、デフォルト構成で有効化されます。

JavaScript の場合:

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

ASP.NET MVCで列移動を有効にする (コード例)

以下のコードは、ビューモデルとして定義されるカスタム Product オブジェクト コレクションにバインドされる igGrid インスタンスを作成します。列は自動生成されます。列移動は、デフォルト構成で有効化されます。

C# の場合:

Code
@model IQueryable<Sample.Models.Product>
@(Html.Infragistics()
    .Grid(Model)
    .AutoGenerateColumns(true)
    .Features(feature =>
    {
        feature.ColumnMoving();
    })
    .DataBind()
    .Render())

関連コンテンツ

トピック

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

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

  • コードによる列の移動: このトピックは、列移動 API を使用して列を移動する方法をコード例を用いて説明します。

  • プロパティ リファレンス: このトピックは、igGrid の列移動機能 API の一部のプロパティに関する参考情報を提供します。

サンプル

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

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

オンラインで表示: GitHub