_1.png)
This topic shows how to setup multi-column footers in the WebHierarchicalDataGrid ™ .
The following table lists the topics required as a prerequisite to understanding this topic.
This topic contains the following sections:
The multi-column footer functionality allows you to merge multiple columns footers. This means that the text of the footer of one column is spread across several columns.
Configuring multi-column footers involves creating a GridField or its descendant instance and setting the Footer property object. The Footer property object is of class GridFieldFooterCaption and has ColSpan property. This property is responsible for configuring multi-column footers. After setting this property all you need to do is to set the footer text in the Text property of the Footer.
Unlike the multi-column header functionality there is no nesting of footers into group. When configuring multi-column footers, you need to keep in mind the following:
Merging is done left to right.
When there is overlapping of merged columns, the rule for the left column has precedence over the rule for the right column and, as a result, the rule for right is discarded.
Column span cannot go beyond the fixed region.
When using multi-column footer with column fixing, the column span cannot go beyond the fixed region. For example, if there are 2 columns fixed and you define a footer span of 3 columns, the result will be only 2 column spans
Colum spanning affects only visible columns.
This means that columns are covered in the visible order rather than in their order in the collection. For example, if you have a visible column with column span 2, then a hidden column, and then another visible column, the second visible column will be included in the column span.
Column spanning cannot go past the end of the grid.
For example, if there are 2 columns on the right of the grid and you define a 3-column span, the result will be a 2-column span.
Web Hierarchical DataGrid bound to data with ShowFooter property set to true.
The following table lists the aspects in which multi-column footers can be configured and maps them to the respective properties that manage them.
In this example, the Web Hierarchical DataGrid is bound to Suppliers and Products tables in Northwind sample database. In order to display multi-column footers, column footers are enabled for the grid and column spans are defined for two of the columns in Suppliers table and two of the columns in Products table. These are SupplierID and Address columns for Suppliers table and ProductName and UnitPrice for Products table.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
A WebHierarchicalDataGrid bound to Suppliers and Products tables in Northwind database.
This topic takes you step-by-step toward configuring Multi-Column Footers in WebHierarchicalDataGrid . The following is a conceptual overview of the process:
The following steps demonstrate how to configure Multi-Column Footers in WebHierarchicalDataGrid .
In order to show the footer set Show Footer property to true. The value will be inherited in the bands.
In ASPX:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGridView" runat="server" ShowFooter="True" >
</ig:WebHierarchicalDataGrid>In C#:
WebHierarchicalDataGridView.ShowFooter = true;1 . Define fields for the container grid .
_2.png)
In 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>In 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 . Define fields for the grid bands .
In 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>In 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);
}Add footers to SupplierID and Address columns
image::images/Configuring_Multi-Column_Footers.docx(WHDG)3.png[] 1 . Add footer to _SupplierID column and set ColSpan to 2 .
In ASPX:
<ig:BoundDataField DataFieldName="SupplierID" Key="SupplierID">
<Header Text="SupplierID" />
<Footer Text="SupplierID and Company Name footer" ColSpan="2" />
</ig:BoundDataField>In 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 . Add footer to Address column and set ColSpan to 3 .
In ASPX:
<ig:BoundDataField DataFieldName="Address" Key="Address">
<Header Text="Address" />
<Footer Text="Address and City and Postal Code footer" ColSpan="3" />
</ig:BoundDataField>In 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);Add footers to ProductName and UnitPrice columns 1 . Add footer to ProductName column and set ColSpan to 2 .
In ASPX:
<ig:BoundDataField DataFieldName="ProductName" Key="ProductName">
<Header Text="Product Name" />
<Footer Text="This is Product Name and SupplierID footer" ColSpan="2" />
</ig:BoundDataField>In 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 . Add footer to UnitPrice column and set ColSpan to 3 .
In ASPX:
<ig:BoundDataField DataFieldName="UnitPrice" Key="UnitPrice">
<Header Text="UnitPrice" />
<Footer Text="This is UnitPrice and UnitsInStock and UnitsOnOrder footer" ColSpan="3" />
</ig:BoundDataField>In 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);The following topics provide additional information related to this topic.
The following samples provide additional information related to this topic.