_1.png)
This topic demonstrates, with code examples, how to configure multi-column footers in the WebDataGrid™.
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 a 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.
The WebDataGrid 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 WebDataGrid is bound to the Suppliers table in the 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. These are the SupplierID and Address columns.
The following screenshot is a preview of the final result.
To complete the procedure, you need the following:
A WebDataGrid bound to the Suppliers table of the Northwind sample database.
This topic takes you step-by-step toward configuring Multi-Column Footers in WebDataGrid . The following is a conceptual overview of the process:
*1* *.* <<Configure_footer_visibility, Configure the footer visibility. >>
*2* *.* <<Define_fields, Define the fields for the grid. >>
*3* *.* <<Configure_Multi_column_footer, Configure the multi-column footer. >>
The following steps demonstrate how to configure Multi-Column Footers in WebDataGrid .
In order to set the footer set ShowFooter property to true .
In ASPX:
<ig:WebDataGrid ID="WebDataGridView" runat="server" ShowFooter="True" >
</ig:WebDataGrid>In C#:
WebDataGridView.ShowFooter = true;Define fields for the grid.
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";
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);Add footers to the respective columns. In this example, the footers are added to the SupplierID and Address columns. 1 . Add a foo ter to the SupplierID column and set the ColSpan property 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;
WebDataGridView.Columns.Add(supplierId);2 . Add a footer to the Address column and set the ColSpan property 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;
WebDataGridView.Columns.Add(address);The following topics provide additional information related to this topic.
The following samples provide additional information related to this topic.