列のサイズ変更 (igGrid)

トピックの概要

目的

このトピックでは、igGrid™ コントロールの列サイズ変更機能について説明します。

このトピックの内容

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

• 概要
  • サイズ変更機能
• サイズ変更を有効にする
  • 要件
  • コード例
• クライアント側イベント
• 列のサイズ変更プロパティ
• 関連トピック

概要

igGrid コントロールの列のサイズ変更機能によりユーザーは、グリッドの列の幅を変更できます。サイズ変更機能は、グリッド全体 (デフォルト) と列ごとの 2 つのレベルで有効にできます。ただし、個々の列をプログラム的に無効または有効にできます。

注: 列サイズ変更はタッチ デバイスでサポートされません。

サイズ変更機能

• 列のサイズ変更の有効化/無効化この機能は allowResizing プロパティから管理されます。

• ダブルクリックで自動サイズ変更を有効にする – 有効になると、列は現在表示されている最も幅が広いセル コンテンツ (ヘッダーおよびフッター セルを含む) の幅にサイズ変更されます。この機能は allowDoubleClickToResize オプションから管理されます。

• 列幅の最大値/最小値 - サイズ変更をする場合に、ユーザーが列の幅を変更できる最小/最大幅。この機能はそれぞれ minimumWidth/maximumWidth プロパティから管理されます。

• 遅延サイズ変更 - ユーザーがサイズ変更を終了するか、直ちに適用するまでサイズ変更は保留されます。この機能は deferredResizing オプションから管理されます。

• 構成可能なサイズ変更ハンドル - サイズ変更可能な列ヘッダーそれぞれの右側にあるサイズ変更ハンドルの幅 (ピクセル単位) がカスタマイズできます。この機能は handleTreshold オプションから管理されます。

• 列キー - 指定された列設定を適用する列を指定します。この機能は columnKey オプションから管理されます。

• 列インデックス - 指定された列設定を適用する列を指定します。この機能は columnIndex オプションから管理されます。

サイズ変更を有効にする

以下は最終結果のプレビューです。

要件

リスト 1: アプリケーションへの組み込みに必要な CSS 参照および JavaScript 参照

HTML の場合:

<link type="text/css" href="infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.core.js"></script>
<script type="text/javascript" src="infragistics.lob.js"></script>

リスト 2: 縮小も結合もしていない CSS 参照および JavaScript 参照の最小セット - サイズ変更にのみ必要

HTML の場合:

<script type="text/javascript" src="infragistics.util.js"></script>
<script type="text/javascript" src="infragistics.util.jquery.js"></script>
<script type="text/javascript" src="infragistics.dataSource.js"></script>
<script type="text/javascript" src="infragistics.ui.shared.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.framework.js"></script>
<script type="text/javascript" src="infragistics.ui.grid.resizing.js"></script>

コード例

リスト 3: 列のサイズ変更を有効にした igGrid コード例

JavaScript の場合:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" }
    ],
dataSource: adventureWorks,
    responseDataKey: 'Records',
    width: "800px",
    height:'400px',
    features: [
        {
            name : 'Resizing',
        }
    ]
});

ASPX(MVC) の場合:

<%= Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Columns(column =>
    {
        column.For(x => x.ProductID).HeaderText("Product ID");
        column.For(x => x.Name).HeaderText("Product Name");
        column.For(x => x.ProductNumber).HeaderText("Product Number");
    }).Features(features => {
        features.Resizing();
    }).Height("400").Width("800").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

リスト 4: 特定の列の列のサイズ変更を無効にするグリッド コード例

JavaScript の場合:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "ProductNumber", key: "ProductNumber", dataType: "string" }
    ],
    dataSource: adventureWorks,
    responseDataKey: 'Records',
    width: "800px",
    height:'400px',
    features: [
        {
            name : 'Resizing',
            columnSettings: [
                { columnKey: "ProductID", allowResizing: false }
            ],
        }
    ]
});

C# の場合:

<%=Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID")
    .Columns(column =>
        {
            column.For(x => x.ProductID).HeaderText("Product ID").Width("100px");
            column.For(x => x.Name).HeaderText("Product Name").Width("200px");
            column.For(x => x.ModifiedDate).HeaderText("Modified Date").Width("200px");
            column.For(x => x.ListPrice).HeaderText("List Price").Width("200px");
        })
    .Features(features => {
        features.Resizing().AllowDoubleClickToResize(true).DeferredResizing(true)
            .ColumnSettings(s =>
            {
                s.ColumnSetting().ColumnKey("ProductID").AllowResizing(false);
            });
    }).Height("500").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

ASPX(MVC) の場合:

<%= Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Columns(column =>
    {
        column.For(x => x.ProductID).HeaderText("Product ID");
        column.For(x => x.Name).HeaderText("Product Name");
        column.For(x => x.ProductNumber).HeaderText("Product Number");
    })
    .Features(features => {
        features.Resizing();
    }).Height("400").Width("800").DataSourceUrl(Url.Action("ColumnResizingGetData"))
    .DataBind().Render()%>

クライアント側イベント

それぞれ、リスト 5 とリスト 6 に記載された 2 種類の方法でハンドラーを Reisizing にバインドできます。

リスト 5: アプリケーションの任意の場所からのクライアント側イベントへのバインド

JavaScript の場合:

    $("#grid1").bind("iggridresizingcolumnresizing", handler);

リスト 6: サイズ変更機能を初期化する場合にイベント名をオプション指定した、クライアント側イベントへのバインド (大文字と小文字を区別)

JavaScript の場合:

$("#grid1").igGrid({
    columns: [
        { headerText: "Product ID", key: "ProductID", dataType: "number" },
        { headerText: "Product Name", key: "Name", dataType: "string" },
        { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
    ],
    width: '500px',
    dataSource: products,
    features: [
        {
            name: 'Resizing',
            columnResizing: handler
        }
    ]
});

//Handler code
function handler(event, args) {

}

注: columnResizing イベントはキャンセルできます。columnResizing イベントをキャンセルするには、その該当イベント ハンドラーは false を返す必要があります。

グリッド列のサイズ変更機能は、表 1 にクライアント側イベントの詳細を公開しています。

表 1: サイズ変更機能の引数オブジェクト定義

列のサイズ変更プロパティ

以下の表は列のサイズ変更機能を管理するプロパティの詳細を記載しています。

関連トピック

以下は、その他の役立つトピックです。

• igGrid の概要
• igGrid の機能