_1.png)
このトピックは、コード例を示して、 WebDataGrid™ で複数列フッターを構成する方法を説明します。
以下の表に、このトピックを理解するための前提条件として求められるトピックをリストします。
このトピックには次のセクションがあります。
複数列フッター機能によって、複数列フッターを結合できます。つまり、ひとつの列のフッター テキストが複数列に及ぶことになります。
複数列フッターの構成には、 GridField またはその子孫インスタンスの作成、および Footer プロパティ オブジェクトの設定が伴います。 Footer プロパティ オブジェクトは GridFieldFooterCaption クラスであり、 ColSpan プロパティを持っています。このプロパティは、複数列フッターの構成を行います。このプロパティの設定後に必要なことは、 Footer の Text プロパティでのフッター設定のみです。
複数列ヘッダー機能とは異なり、グループ内にフッターのネスティングはありません。複数列フッターを構成する場合、以下に留意してください。
結合は左から右へ行います。
結合された列の重複がある場合、左列のルールが右列のルールに優先し、その結果、右のルールは破棄されます。
列のスパンは固定領域を超えることはできません。
列の固定と共に複数列フッターを使用する場合は、列のスパンは固定領域を超えることはできません。たとえば、2 列が固定されており、3 列のフッター スパンを定義した場合、2 列のみがスパンすることになります
列のスパンは、表示された列にのみ影響を与えます。
つまり、列は、コレクション内の順序ではなく、表示された順序で処理されます。たとえば、列スパン 2 を持つ表示された列、非表示の列、別の表示された列の順序の場合、2 番目の表示された列が列スパンに含まれます。
列のスパンは、グリッドの終わりを超えることはできません。
たとえば、グリッドの右側に 2 列あり、3 列スパンを定義した場合、結果は 2 列スパンになります。
注: GridField インスタンスまたはその子孫でフッターをスパンできます。
true に設定された ShowFooter プロパティを使用してデータにバインドされた WebDataGrid 。
以下の表に、複数列フッターの設定可能な項目と、それを管理するための該当するプロパティへのマッピングを示します。
この例では、 WebDataGrid は、 Northwind サンプル データベース内の Suppliers テーブルにバインドされます。複数列フッターを表示するには、列フッターはグリッドに対して有効になり、列スパンは、列の内の 2 列に対して定義されます。これらは SupplierID および Address 列です。
以下のスクリーンショットは最終結果のプレビューです。
手順を完了するには、以下が必要です:
Northwind サンプル データベースの Suppliers テーブルにバインドされた WebDataGrid 。
このトピックでは、 WebDataGrid の複数列フッターの構成について、ステップごとに説明します。以下はプロセスの概念的概要です。
以下のステップは、 WebDataGrid における複数列フッターの構成方法を示します。
フッター セット ShowFooter プロパティを true に設定する方法。
ASPX の場合:
<ig:WebDataGrid ID="WebDataGridView" runat="server" ShowFooter="True" >
</ig:WebDataGrid>C# の場合:
WebDataGridView.ShowFooter = true;グリッドのフィールドを定義します。
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";
WebDataGridView.Columns.Add(supplierId);
BoundDataField companyName = new BoundDataField();
companyName.DataFieldName = "CompanyName";
companyName.Key = "CompanyName";
companyName.Header.Text = "Company";
WebDataGridView.Columns.Add(companyName);
BoundDataField address = new BoundDataField();
address.DataFieldName = "Address";
address.Key = "Address";
address.Header.Text = "Address";
WebDataGridView.Columns.Add(address);
BoundDataField city = new BoundDataField();
city.DataFieldName = "City";
city.Key = "City";
city.Header.Text = "City";
WebDataGridView.Columns.Add(city);
BoundDataField postalCode = new BoundDataField();
postalCode.DataFieldName = "PostalCode";
postalCode.Key = "PostalCode";
postalCode.Header.Text = "Postal Code";
WebDataGridView.Columns.Add(postalCode);フッターをそれぞれの列に追加します。この例では、フッターは SupplierID および Address 列に追加されます。 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;
WebDataGridView.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;
WebDataGridView.Columns.Add(address);以下のトピックでは、このトピックに関連する情報を提供しています。
以下のサンプルでは、このトピックに関連する情報を提供しています。