バージョン

複数列ヘッダーの構成

トピックの概要

目的

このトピックでは、 WebHierarchicalDataGrid における複数列ヘッダーのセットアップ方法を示します。

前提条件

以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。

トピック 目的

このトピックでは、 WebHierarchicalDataGrid を Northwind データベースにバインドする方法について説明します。

複数列ヘッダーの構成 - 概念的概要

複数列ヘッダーの構成の概要

複数レベルのヘッダーを作成する必要のある場合や、ヘッダーを複数のカテゴリにグループ分けする必要のある場合には、複数列ヘッダーを有効にすると、こうしたことが可能になります。 GroupField オブジェクトは、その列コレクションに他の列を入れることのできるフィールドです。列コレクションの列の上に GroupField のヘッダーが表示されます。グリッドのサイズ変更/並べ替え/選択/フィルター処理/移動の各動作は、この新しいレイアウトのニーズに合わせてデザインしなおされています。

要件

データにバインドされた Web Hierarchical DataGrid

プロパティ設定

以下の表に、複数列ヘッダーの設定可能な項目と、それを管理するための該当するプロパティへのマッピングを示します。

構成可能な項目 プロパティ

複数列ヘッダー

複数列ヘッダーの構成 - コード例

概要

この例では、連絡先情報フィールドをグループ化する GroupField オブジェクトを定義します。その後、2 つの BoundDataField オブジェクトをフィールドの Columns コレクションに追加します。これらのフィールドには、列データ ContactName および ContactTitle が保持されます。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

Configuring Multi Column Headers(WHDG) 1.png

要件

手順を完了するためには、 Northwind サンプル データベースのサプライヤー テーブルにバインドされた WebHierarchicalDataGrid が必要です。

概要

このトピックでは、 WebHierarchicalDataGrid の複数列ヘッダーの構成について順を追って説明します。以下はプロセスの概念的概要です。

手順

以下の手順は、複数列ヘッダーの構成方法を示します。

1.GroupField の定義

GroupField は、他の列と同様に定義されます。データにはバインドされませんが、他の列と同じようにキーが必要です。

ASPX の場合:

<ig:GroupField Key="ContactInfo">
</ig:GroupField>

C# の場合:

GroupField groupField = new GroupField();
groupField.Key = "ContactInfo";
this.WebHierarchicalDataGridView.Columns.Add(groupField);

2.ヘッダー テキストの構成

ヘッダー テキストは、その列に表示されるテキストです。これは、GridField の Header オブジェクトの Text プロパティで構成します。

ASPX の場合:

<Header Text="Contact Information" />

C# の場合:

groupField.Header.Text = "Contact Information";

3.GroupField の列コレクションへの列の追加

子列を表示するには、子列を GroupField の Columns コレクションに追加します。

ASPX の場合:

<Columns>
    <ig:BoundDataField DataFieldName="ContactName" Key="ContactName">
        <Header Text="Contact" />
    </ig:BoundDataField>
    <ig:BoundDataField DataFieldName="ContactTitle" Key="ContactTitle">
        <Header Text="Title" />
    </ig:BoundDataField>
</Columns>

C# の場合:

/* Creating a  BoundDataField * /
BoundDataField field = new BoundDataField();
field.DataFieldName = "ContactName";
field.Key = "ContactName";
field.Header.Text = "Contact";
/* Adding the BoundDataField to be under the GroupedField
* which was created above
*/
groupField.Columns.Add(field);
/* Creating a  BoundDataField * /
field = new BoundDataField();
field.DataFieldName = "ContactTitle";
field.Key = "ContactTitle";
field.Header.Text = "Title";
/* Adding the BoundDataField to be under the GroupedField
* which was created above
*/
groupField.Columns.Add(field);

関連内容

トピック

以下のトピックでは、このトピックに関連する情報を提供しています。

トピック 目的

このトピックでは、 WebHierarchicalDataGrid を Northwind データベースにバインドする方法について説明します。

このトピックでは、 WebHierarchicalDataGrid で構成可能な動作の一覧を示します。

サンプル

以下のサンプルでは、このトピックに関連する情報を提供しています。

サンプル 目的

このサンプルでは、 WebHierarchicalDataGrid で複数列ヘッダーを構成する方法を示します。