バージョン

複数列フッターの構成

トピックの概要

目的

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

前提条件

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

トピック 目的

このトピックでは、 WebHierarchicalDataGrid の機能について説明します。

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

本トピックの内容

このトピックには次のセクションがあります。

複数列フッターの構成 - 概念的概要

複数列フッターの構成の概要

複数列フッター機能によって、複数列フッターを結合できます。つまり、ひとつの列のフッター テキストが複数列に及ぶことになります。

複数列フッターの構成には、 GridField またはその子孫インスタンスの作成、および Footer プロパティ オブジェクトの設定が伴います。 Footer プロパティ オブジェクトは GridFieldFooterCaption クラスであり、 ColSpan プロパティを持っています。このプロパティは、複数列フッターの構成を行います。このプロパティの設定後に必要なことは、 Footer の Text プロパティでのフッター設定のみです。

複数列ヘッダー機能とは異なり、グループ内にフッターのネスティングはありません。複数列フッターを構成する場合、以下に留意してください。

  • 結合は左から右へ行います。

結合された列の重複がある場合、左列のルールが右列のルールに優先し、その結果、右のルールは破棄されます。

  • 列のスパンは固定領域を超えることはできません。

列の固定と共に複数列フッターを使用する場合は、列のスパンは固定領域を超えることはできません。たとえば、2 列が固定されており、3 列のフッター スパンを定義した場合、2 列のみがスパンすることになります

  • 列のスパンは、表示された列にのみ影響を与えます。

つまり、列は、コレクション内の順序ではなく、表示された順序で処理されます。たとえば、列スパン 2 を持つ表示された列、非表示の列、別の表示された列の順序の場合、2 番目の表示された列が列スパンに含まれます。

  • 列のスパンは、グリッドの終わりを超えることはできません。

たとえば、グリッドの右側に 2 列あり、3 列スパンを定義した場合、結果は 2 列スパンになります。

注: GridField インスタンスまたはその子孫でフッターをスパンできます。

要件

true に設定された ShowFooter プロパティを使用してデータにバインドされた、 Web Hierarchical DataGrid 。

プロパティ設定

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

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

列の数

複数列フッターの構成 - コード例

概要

この例では、 Web Hierarchical DataGrid は、 Northwind サンプル データベース内の Suppliers および Products テーブルにバインドされます。複数列フッターを表示するには、列フッターをグリッドに対して有効にし、列スパンを、 Suppliers テーブルの 2 列および Products テーブルの 2 列に対して定義します。これらは、 Suppliers テーブルの SupplierID と Address 列、および Products テーブルの ProductName と UnitPrice です。

プレビュー

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

Configuring Multi Column Footers.docx(WHDG) 1.png

要件

  • 手順を完了するには、以下が必要です:

    • Northwind データベースの Suppliers および Products テーブルにバインドされた WebHierarchicalDataGrid 。

概要

このトピックでは、 WebHierarchicalDataGrid の複数列フッターの構成について、ステップごとに説明します。以下はプロセスの概念的概要です。

1.フッターの表示状態を構成します

2.グリッドのフィールドを定義します

3.コンテナー グリッドの複数列フッターを構成します

4.バンドの複数列フッターを構成します (オプション)

手順

以下のステップは、 WebHierarchicalDataGrid における複数列フッターの構成方法を示します。

1.フッターの表示状態を構成します

フッター セットを表示するには、Show Footer プロパティを true に設定します。値はバンド内で継承されます。

ASPX の場合:

<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGridView" runat="server" ShowFooter="True" >
</ig:WebHierarchicalDataGrid>

C# の場合:

WebHierarchicalDataGridView.ShowFooter = true;

2.グリッドのフィールドを定義します

1.コンテナー グリッドのフィールドを定義します。

Configuring Multi Column Footers.docx(WHDG) 2.png

ASPX の場合:

<Columns>
    <ig:BoundDataField DataFieldName="SupplierID" Key="SupplierID">
        <Header Text="SupplierID" />
    </ig:BoundDataField>
    <ig:BoundDataField DataFieldName="CompanyName" Key="CompanyName">
        <Header Text="Company" />
    </ig:BoundDataField>
    <ig:BoundDataField DataFieldName="Address" Key="Address">
        <Header Text="Address" />
    </ig:BoundDataField>
    <ig:BoundDataField DataFieldName="City" Key="City">
        <Header Text="City" />
    </ig:BoundDataField>
    <ig:BoundDataField DataFieldName="PostalCode" Key="PostalCode">
        <Header Text="Postal Code" />
    </ig:BoundDataField>
</Columns>

C# の場合:

BoundDataField supplierId = new BoundDataField();
supplierId.DataFieldName = "SupplierID";
supplierId.Key = "SupplierID";
supplierId.Header.Text = "SupplierID";
WebHierarchicalDataGridView.Columns.Add(supplierId);
BoundDataField companyName = new BoundDataField();
companyName.DataFieldName = "CompanyName";
companyName.Key = "CompanyName";
companyName.Header.Text = "Company";
WebHierarchicalDataGridView.Columns.Add(companyName);
BoundDataField address = new BoundDataField();
address.DataFieldName = "Address";
address.Key = "Address";
address.Header.Text = "Address";
WebHierarchicalDataGridView.Columns.Add(address);
BoundDataField city = new BoundDataField();
city.DataFieldName = "City";
city.Key = "City";
city.Header.Text = "City";
WebHierarchicalDataGridView.Columns.Add(city);
BoundDataField postalCode = new BoundDataField();
postalCode.DataFieldName = "PostalCode";
postalCode.Key = "PostalCode";
postalCode.Header.Text = "Postal Code";
WebHierarchicalDataGridView.Columns.Add(postalCode);

2.グリッド バンドのフィールドを定義します。

ASPX の場合:

<ig:Band Key="Products" DataMember="AccessDataSource2_Products" DataKeyFields="SupplierID" AutoGenerateColumns=" DefaultColumnWidth="100px">
    <Columns>
        <ig:BoundDataField DataFieldName="ProductName" Key="ProductName">
            <Header Text="Product Name" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="SupplierID" Key="SupplierID">
            <Header Text="SupplierID" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="UnitPrice" Key="UnitPrice">
            <Header Text="UnitPrice" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="UnitsInStock" Key="UnitsInStock">
            <Header Text="UnitsInStock" />
        </ig:BoundDataField>
        <ig:BoundDataField DataFieldName="UnitsOnOrder" Key="UnitsOnOrder">
            <Header Text="UnitsOnOrder" />
        </ig:BoundDataField>
    </Columns>
</ig:Band>

C# の場合:

if (!IsPostBack)
{
    Band band = WebHierarchicalDataGridView.Bands["Products"];
    BoundDataField supplierID = new BoundDataField();
    supplierID.DataFieldName = "SupplierID";
    supplierID.Key = "SupplierID";
    supplierID.Header.Text = "SupplierID";
    band.Columns.Add(supplierID);
    BoundDataField productName = new BoundDataField();
    productName.DataFieldName = "ProductName";
    productName.Key = "ProductName";
    productName.Header.Text = "Product Name";
    band.Columns.Add(productName);
    BoundDataField unitPrice = new BoundDataField();
    unitPrice.DataFieldName = "UnitPrice";
    unitPrice.Key = "UnitPrice";
    unitPrice.Header.Text = "UnitPrice";
    band.Columns.Add(unitPrice);
    BoundDataField unitsInStock = new BoundDataField();
    unitsInStock.DataFieldName = "UnitsInStock";
    unitsInStock.Key = "UnitsInStock";
    unitsInStock.Header.Text = "UnitsInStock";
    band.Columns.Add(unitsInStock);
    BoundDataField unitsInOrder = new BoundDataField();
    unitsInOrder.DataFieldName = "UnitsOnOrder";
    unitsInOrder.Key = "UnitsOnOrder";
    unitsInOrder.Header.Text = "UnitsOnOrder";
    band.Columns.Add(unitsInOrder);
    WebHierarchicalDataGridView.Bands.Add(band);
}

3.コンテナー グリッドの複数列フッターを構成します

フッターを SupplierID および Address 列に追加します

image::images/Configuring_Multi-Column_Footers.docx(WHDG)3.png[] 1.フッターを _SupplierID 列に追加し、 ColSpan を 2 に設定します。

ASPX の場合:

<ig:BoundDataField DataFieldName="SupplierID" Key="SupplierID">
    <Header Text="SupplierID" />
    <Footer Text="SupplierID and Company Name footer" ColSpan="2" />
</ig:BoundDataField>

C# の場合:

BoundDataField supplierId = new BoundDataField();
supplierId.DataFieldName = "SupplierID";
supplierId.Key = "SupplierID";
supplierId.Header.Text = "SupplierID";
supplierId.Footer.Text = "SupplierID and Company Name footer";
supplierId.Footer.ColSpan = 2;
WebHierarchicalDataGridView.Columns.Add(supplierId);

2.フッターを Address 列に追加し、 ColSpan を 3 に設定します。

ASPX の場合:

<ig:BoundDataField DataFieldName="Address" Key="Address">
    <Header Text="Address" />
    <Footer Text="Address and City and Postal Code footer" ColSpan="3" />
</ig:BoundDataField>

C# の場合:

BoundDataField address = new BoundDataField();
address.DataFieldName = "Address";
address.Key = "Address";
address.Header.Text = "Address";
address.Footer.Text = "Address and City and Postal Code footer";
address.Footer.ColSpan = 3;
WebHierarchicalDataGridView.Columns.Add(address);

4.バンドの複数列フッターを構成します (オプション)

フッターを ProductName および UnitPrice 列に追加します 1.フッターを ProductName 列に追加し、 ColSpan を 2 に設定します。

ASPX の場合:

<ig:BoundDataField DataFieldName="ProductName" Key="ProductName">
    <Header Text="Product Name" />
    <Footer Text="This is Product Name and SupplierID footer" ColSpan="2" />
</ig:BoundDataField>

C# の場合:

BoundDataField productName = new BoundDataField();
productName.DataFieldName = "ProductName";
productName.Key = "ProductName";
productName.Header.Text = "Product Name";
productName.Footer.Text = "This is Product Name and SupplierID footer";
productName.Footer.ColSpan = 2;
band.Columns.Add(productName);

2 . フッターを UnitPrice 列に追加し、 ColSpan を 3 に設定します。

ASPX の場合:

<ig:BoundDataField DataFieldName="UnitPrice" Key="UnitPrice">
    <Header Text="UnitPrice" />
    <Footer Text="This is UnitPrice and UnitsInStock and UnitsOnOrder footer" ColSpan="3" />
</ig:BoundDataField>

C# の場合:

BoundDataField unitPrice = new BoundDataField();
unitPrice.DataFieldName = "UnitPrice";
unitPrice.Key = "UnitPrice";
unitPrice.Header.Text = "UnitPrice";
unitPrice.Footer.Text = "This is UnitPrice and UnitsInStock and UnitsOnOrder footer";
unitPrice.Footer.ColSpan = 3;
band.Columns.Add(unitPrice);

関連内容

トピック

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

トピック 目的

このトピックでは、 Web Hierarchical DataGrid における複数列ヘッダーの構成方法を示します。

サンプル

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

サンプル 目的

このサンプルは、複数列フッターを使用した WebHierarchicalDataGrid の構成を示しています。