How To Programmatically Add FooterTemplate To A GridView Control
How To Programmatically Add FooterTemplate To A GridView Control
Let’s say you have a table that dynamically changes. If you do not know the number of columns
in the table, you cannot define it at design time.
The GridView control will automatically bind to the table and auto-generate the number of
columns from a DataTable.
Let’s say want to place a checkbox in the footer under each of the columns
Some things you can set at design time, like the stylesheets and the ShowFooter.
Set the ShowFooter = True.
In this example, we are going to show the number of ticket sales that people made each year. In
the figure below, notice the footer is empty.
Click on the Event icon and double click in the event: RowCreated.
This will automatically create a method in the code behind.
C#
protected void grdViewHistory_RowCreated(object sender, GridViewRowEventArgs e)
{
//count the number of cells in this row
Int32 cellCnt = e.Row.Cells.Count;
//if this is the header row, align the first header to the right
Visual Basic
Protected Sub gridViewHistory_RowCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridViewHistory.RowCreated
'count the number of cells in this row
Dim cellCnt As Integer = e.Row.Cells.Count - 1
'if this is the header row, align the first header to the right
If (e.Row.RowType = DataControlRowType.Header) Then
e.Row.Cells(0).HorizontalAlign = HorizontalAlign.Right
In this example, when the user clicks on a checkbox in the footer, it will
• Change the header Checkbox1 to blue
• Display the list of column indexes of the footer checkboxes that are checked.
C#
protected void grdViewHistory_RowCreated(object sender, GridViewRowEventArgs
e)
{
//count the number of cells in this row
Int32 cellCnt = e.Row.Cells.Count;
//if this is the header row, align the first header to the right
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Right;
}
//else if this is the footer,
//Add AutoPostBack
chkFooter.AutoPostBack = true;
//Add an attribute for the column index
chkFooter.Attributes.Add("year", i.ToString());
Visual Basic
Protected Sub gridViewHistory_RowCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridViewHistory.RowCreated
'count the number of cells in this row
Dim cellCnt As Integer = e.Row.Cells.Count - 1
'if this is the header row, align the first header to the right
If (e.Row.RowType = DataControlRowType.Header) Then
e.Row.Cells(0).HorizontalAlign = HorizontalAlign.Right
'Add AutoPostBack
chkFooter.AutoPostBack = True
'Add an attribute for the column index
chkFooter.Attributes.Add("year", i.ToString())
'Add an event handler
AddHandler chkFooter.CheckedChanged, New EventHandler(AddressOf
chkFooter_CheckedChanged)
End Sub
Add another checkbox and a button to the page. In this example CheckBox2 is used to display
the columns selected. We will use the button later for calculating totals.
The next step is two write the event handler for the chkFooter. It references the “year” attribute
which we added in the RowCreated step above.
C#
protected void chkFooter_CheckedChanged(object sender, EventArgs e)
{
//Changes the Checkbox1 forecolor to MediumBlue
CheckBox1.ForeColor = System.Drawing.Color.MediumBlue;
if (chkFooter.Checked)
{
CheckBox2.Text += idx; //add the idx
}
else
{
//remove the idx
CheckBox2.Text = CheckBox2.Text.Replace(idx,"");
}
}
Visual Basic
Protected Sub chkFooter_CheckedChanged(ByVal sender As Object, ByVal e As
System.EventArgs)
'Changes the Checkbox1 forecolor to MediumBlue
CheckBox1.ForeColor = System.Drawing.Color.MediumBlue
If chkFooter.Checked Then
'add the idx
CheckBox2.Text += idx
Else
'remove the idx
CheckBox2.Text = CheckBox2.Text.Replace(idx, "")
End If
End Sub
Next we are going to add functionality to fill the Totals column. The totals column displays the
sum of the year cells in each row. Notice that the numbers are formatted. You can format these
numbers in the DataTable before initially binding to the GridView control.
Below are a couple of functions for numeric formatting of integers with and without commas:
C#
public string AddCommas(Int32 value)
{
return value.ToString("N0");
}
Visual Basic
Public Function AddCommas(ByVal value) As String
Return value.ToString("N0");
End Function
Below are a couple of methods for calculating the totals and changing the font color for the
checked column:
C#
protected void TotalYearColumns()
{
int years = grdViewHistory.Rows[0].Cells.Count;
int rows = grdViewHistory.Rows.Count;
Visual Basic
Protected Sub TotalYearColumns()
Dim years As Integer = grdViewHistory.Rows(0).Cells.Count
Dim rows As Integer = grdViewHistory.Rows.Count
Add this method to the button event for the Calculate button:
C#
protected void btnCalculate_Click(object sender, EventArgs e)
{
TotalYearColumns();
}
Visual Basic
Protected Sub btnCalculate_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btnCalculate.Click
TotalYearColumns()
End Sub
Run the page and click on the button to fill the Totals column:
Next we are going to add the ToggleYearColumns method to the chkFooter_CheckChanged event:
C#
if (chkFooter.Checked)
{
CheckBox2.Text += idx; //add the idx
}
else
{
CheckBox2.Text = CheckBox2.Text.Replace(idx,""); //remove the idx
}
ToggleYearColumns(index, chkFooter.Checked);
}
Visual Basic
Protected Sub ToggleYearColumns(ByVal idx As Int32, ByVal isChecked As Boolean)
Dim years As Integer = grdViewHistory.Rows(0).Cells.Count
Dim rows As Integer = grdViewHistory.Rows.Count
For r As Integer = 0 To rows - 1
If isChecked Then
grdViewHistory.Rows(r).Cells(idx).ForeColor =
System.Drawing.Color.Silver
Else
grdViewHistory.Rows(r).Cells(idx).ForeColor =
grdViewHistory.Rows(r).Cells(1).ForeColor
End If
Next
'get the "year" attribute of the chkFooter and append a "|" as a delimiter
Dim index As Int32 = Convert.ToInt32(chkFooter.Attributes("year"))
Dim idx As String = index.ToString() & "|"
If chkFooter.Checked Then
'add the idx
CheckBox2.Text += idx
Else
'remove the idx
CheckBox2.Text = CheckBox2.Text.Replace(idx, "")
End If
ToggleYearColumns(index, chkFooter.Checked)
End Sub
Run the page and click on the checkboxes in the footer. Notice how the column font color toggles
from Black to Silver.
Click on the Calculate button. Notice how the Totals column only totals the columns that are not
grayed out.
To add the caption to the first cell in the footer, scroll down to the
else if (e.Row.RowType == DataControlRowType.Footer) and add the caption text to Cell[0]
of the footer row.
C#
protected void grdViewHistory_RowCreated(object sender, GridViewRowEventArgs
e)
{
//count the number of cells in this row
Int32 cellCnt = e.Row.Cells.Count;
//if this is the header row, align the first header to the right
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Right;
}
//else if this is the footer,
Visual Basic
Protected Sub gridViewHistory_RowCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridViewHistory.RowCreated
'count the number of cells in this row
Dim cellCnt As Integer = e.Row.Cells.Count - 1
'if this is the header row, align the first header to the right
If (e.Row.RowType = DataControlRowType.Header) Then
e.Row.Cells(0).HorizontalAlign = HorizontalAlign.Right
'Add AutoPostBack
chkFooter.AutoPostBack = True
'Add an attribute for the column index
chkFooter.Attributes.Add("year", i.ToString())
'Add an event handler
AddHandler chkFooter.CheckedChanged, New EventHandler(AddressOf
chkFooter_CheckedChanged)
End Sub
To clean this simple recipe up, you can remove the button and CheckBox2 which were used as
examples. Remember to remove the code which references them
C#
protected void chkFooter_CheckedChanged(object sender, EventArgs e)
{
//Changes the Checkbox1 forecolor to MediumBlue
CheckBox1.ForeColor = System.Drawing.Color.MediumBlue;
//if (chkFooter.Checked)
//{
// CheckBox2.Text += idx; //add the idx
//}
//else
//{
// CheckBox2.Text = CheckBox2.Text.Replace(idx,""); //remove the idx
//}
ToggleYearColumns(index, chkFooter.Checked);
TotalYearColumns();
}
Visual Basic
Protected Sub chkFooter_CheckedChanged(ByVal sender As Object, ByVal e As
System.EventArgs)
'Changes the Checkbox1 forecolor to MediumBlue
CheckBox1.ForeColor = System.Drawing.Color.MediumBlue
'get the "year" attribute of the chkFooter and append a "|" as a delimiter
Dim index As Int32 = Convert.ToInt32(chkFooter.Attributes("year"))
'Dim idx As String = index.ToString() & "|"