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.

Elizabeth Gee Simple ASP.Net Recipes 1

How to programmatically add FooterTemplate to a GridView control

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.

protected void grdViewHistory_RowCreated(object sender, GridViewRowEventArgs e)

{

Add the following code to this method:

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

Elizabeth Gee Simple ASP.Net Recipes 2

How to programmatically add FooterTemplate to a GridView control
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Right;
}
//else if this is the footer,

else if (e.Row.RowType == DataControlRowType.Footer)

{
//add checkbox to all the columns except the first two
for (Int32 i = 2; i < cellCnt; i++)
{
//Instantiate a new checkbox for each cell.
CheckBox chkFooter = new CheckBox();
//Add this checkbox as a control to the footer cell
e.Row.Cells[i].Controls.Add(chkFooter);
//center the checkbox in the cell
e.Row.Cells[i].HorizontalAlign = HorizontalAlign.Center;
}
}
}

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

'else if this is the footer,

ElseIf (e.Row.RowType = DataControlRowType.Footer) Then
'add checkbox to all the columns except the first two
For i As Integer = 2 To cellCnt
'Instantiate a new checkbox for each cell.
Dim chkFooter As New CheckBox()
'Add this checkbox as a control to the footer cell
e.Row.Cells(i).Controls.Add(chkFooter)
'center the checkbox in the cell
e.Row.Cells(i).HorizontalAlign = HorizontalAlign.Center
Next
End If
End Sub

Elizabeth Gee Simple ASP.Net Recipes 3

How to programmatically add FooterTemplate to a GridView control

Next we are going to add an event to the footer checkboxes.

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.

Adding two lines of code to the GridView RowCreated event sets

• AutoPostBack = True
• Adds an attribute which contains the column index for the year.
• Add an event handler

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,

else if (e.Row.RowType == DataControlRowType.Footer)

{
//add checkbox to all the columns except the first two
for (Int32 i = 2; i < cellCnt; i++)
{
//Instantiate a new checkbox for each cell.
CheckBox chkFooter = new CheckBox();

//Add AutoPostBack
chkFooter.AutoPostBack = true;
//Add an attribute for the column index
chkFooter.Attributes.Add("year", i.ToString());

Elizabeth Gee Simple ASP.Net Recipes 4

How to programmatically add FooterTemplate to a GridView control
//Add an event handler
chkFooter.CheckedChanged += chkFooter_CheckedChanged;

//Add this checkbox as a control to the footer cell

e.Row.Cells[i].Controls.Add(chkFooter);
//center the checkbox in the cell
e.Row.Cells[i].HorizontalAlign = HorizontalAlign.Center;
}
}
}

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

'else if this is the footer,

ElseIf (e.Row.RowType = DataControlRowType.Footer) Then
'add checkbox to all the columns except the first two
For i As Integer = 2 To cellCnt
'Instantiate a new checkbox for each cell.
Dim chkFooter As New CheckBox()

'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)

'Add this checkbox as a control to the footer cell

e.Row.Cells(i).Controls.Add(chkFooter)
'center the checkbox in the cell
e.Row.Cells(i).HorizontalAlign = HorizontalAlign.Center
Next
End If

End Sub

Elizabeth Gee Simple ASP.Net Recipes 5

How to programmatically add FooterTemplate to a GridView control

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;

//the sender is the chkFooter that was clicked

CheckBox chkFooter = (CheckBox)sender;

//get the "year" attribute of the chkFooter and append a "|" as a

delimiter
string idx = chkFooter.Attributes["year"].ToString() + "|";

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

'the sender is the chkFooter that was clicked

Dim chkFooter As CheckBox = DirectCast(sender, CheckBox)

Elizabeth Gee Simple ASP.Net Recipes 6

How to programmatically add FooterTemplate to a GridView control
'get the "year" attribute of the chkFooter and append a "|" as a delimiter
Dim idx As String = chkFooter.Attributes("year").ToString() & "|"

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:

Elizabeth Gee Simple ASP.Net Recipes 7

How to programmatically add FooterTemplate to a GridView control

C#
public string AddCommas(Int32 value)
{
return value.ToString("N0");
}

public Int32 RemoveCommas(string value)

{
value = value.Replace(",", "");
return Convert.ToInt32(value);
}

Visual Basic
Public Function AddCommas(ByVal value) As String
Return value.ToString("N0");
End Function

Public Function RemoveCommasInt32(ByVal value As String) As Int32

value = value.Replace(",", "")
Return Convert.ToInt32(value)
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;

for (int r = 0; r < rows; r++)

{
GridViewRow gridRow = grdViewHistory.Rows[r];
Int32 total = 0;
for (int c = 2; c < years; c++)
{
if (gridRow.Cells[c].ForeColor != System.Drawing.Color.Silver)
{
total += Convert.ToInt32(RemoveCommas(gridRow.Cells[c].Text));
}
}
gridRow.Cells[1].Text = AddCommas(total);
}
}

Visual Basic
Protected Sub TotalYearColumns()
Dim years As Integer = grdViewHistory.Rows(0).Cells.Count
Dim rows As Integer = grdViewHistory.Rows.Count

For r As Integer = 0 To rows - 1

Dim gridRow As GridViewRow = grdViewHistory.Rows(r)
Dim total As Int32 = 0

Elizabeth Gee Simple ASP.Net Recipes 8

How to programmatically add FooterTemplate to a GridView control
For c As Integer = 2 To years - 1
If gridRow.Cells(c).ForeColor <> System.Drawing.Color.Silver Then
total += Convert.ToInt32(RemoveCommas(gridRow.Cells(c).Text))
End If
Next
gridRow.Cells(1).Text = AddCommas(total)
Next
End Sub

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#

protected void ToggleYearColumns(Int32 idx, bool isChecked)

{

Elizabeth Gee Simple ASP.Net Recipes 9

How to programmatically add FooterTemplate to a GridView control
int years = grdViewHistory.Rows[0].Cells.Count;
int rows = grdViewHistory.Rows.Count;
for (int r = 0; r < rows; r++)
{
if (isChecked)
{
grdViewHistory.Rows[r].Cells[idx].ForeColor =
System.Drawing.Color.Silver;
}
else
{
grdViewHistory.Rows[r].Cells[idx].ForeColor =
grdViewHistory.Rows[r].Cells[1].ForeColor;
}
}

protected void chkFooter_CheckedChanged(object sender, EventArgs e)

{
//Changes the Checkbox1 forecolor to MediumBlue
CheckBox1.ForeColor = System.Drawing.Color.MediumBlue;

//the sender is the chkFooter that was clicked

CheckBox chkFooter = (CheckBox)sender;

//get the "year" attribute of the chkFooter and append a "|" as a

delimiter
Int32 index = Convert.ToInt32(chkFooter.Attributes["year"]);
string idx = index.ToString() + "|";

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

Elizabeth Gee Simple ASP.Net Recipes 10

How to programmatically add FooterTemplate to a GridView control
End Sub

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

'the sender is the chkFooter that was clicked

Dim chkFooter As CheckBox = DirectCast(sender, CheckBox)

'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.

Elizabeth Gee Simple ASP.Net Recipes 11

How to programmatically add FooterTemplate to a GridView control

Adding a Footer Caption and Black Gridlines

In a dynamically generated grid, you can add a footer caption / header in the RowCreated
method. You might want to add vertical colored gridlines which in Design mode is set in the
ItemStyle, however when dynamically adding columns to a grid, the ItemStyle can be added in
the RowCreated method.

First add a class in your style sheet:

<style type="text/css">
.wgi
{ border-right: solid 1px black;}
</style>
Next add some code to the RowCreated method as highlighted in yellow below.

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;

//add gridline Css for all rows including header

for (int i = 0; i < cellCnt; i++)
{
e.Row.Cells[i].CssClass = "wgi";
}

//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,

else if (e.Row.RowType == DataControlRowType.Footer)

{
TableCell footerCell = e.Row.Cells[0];
footerCell.Text = "Exclude year(s)";
footerCell.HorizontalAlign = HorizontalAlign.Right;

//add checkbox to all the columns except the first two

for (Int32 i = 2; i < cellCnt; i++)
{
//Instantiate a new checkbox for each cell.
CheckBox chkFooter = new CheckBox();
//Add AutoPostBack
chkFooter.AutoPostBack = true;
//Add an attribute for the column index
chkFooter.Attributes.Add("year", i.ToString());
//Add an event handler
chkFooter.CheckedChanged += chkFooter_CheckedChanged;

Elizabeth Gee Simple ASP.Net Recipes 12

How to programmatically add FooterTemplate to a GridView control

//Add this checkbox as a control to the footer cell

e.Row.Cells[i].Controls.Add(chkFooter);
//center the checkbox in the cell
e.Row.Cells[i].HorizontalAlign = HorizontalAlign.Center;
e.Row.Cells[i].CssClass = "wgi";
}
}
}

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

'add gridline Css for all rows including header

For i As Integer = 0 To cellCnt - 1
e.Row.Cells(i).CssClass = "wgi"
Next

'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

'else if this is the footer,

ElseIf (e.Row.RowType = DataControlRowType.Footer) Then

Dim footerCell As TableCell = e.Row.Cells(0)

footerCell.Text = "Exclude year(s)"
footerCell.HorizontalAlign = HorizontalAlign.Right

'add checkbox to all the columns except the first two

For i As Integer = 2 To cellCnt
'Instantiate a new checkbox for each cell.
Dim chkFooter As New CheckBox()

'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)

'Add this checkbox as a control to the footer cell

e.Row.Cells(i).Controls.Add(chkFooter)
'center the checkbox in the cell
e.Row.Cells(i).HorizontalAlign = HorizontalAlign.Center
e.Row.Cells(i).CssClass = "wgi"
Next
End If

End Sub

Elizabeth Gee Simple ASP.Net Recipes 13

How to programmatically add FooterTemplate to a GridView control

Calculating without the button

If you want to re-calculate the totals when you click the footer checkboxes instead of using the
additional Calculate button, move the call to TotalYearColumns() to the
chkFooter_CheckChanged event.

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;

//the sender is the chkFooter that was clicked

CheckBox chkFooter = (CheckBox)sender;

//get the "year" attribute of the chkFooter and append a "|" as a

delimiter
Int32 index = Convert.ToInt32(chkFooter.Attributes["year"]);
//string idx = index.ToString() + "|";

//if (chkFooter.Checked)
//{
// CheckBox2.Text += idx; //add the idx
//}
//else
//{
// CheckBox2.Text = CheckBox2.Text.Replace(idx,""); //remove the idx
//}
ToggleYearColumns(index, chkFooter.Checked);
TotalYearColumns();
}

Elizabeth Gee Simple ASP.Net Recipes 14

How to programmatically add FooterTemplate to a GridView control

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

'the sender is the chkFooter that was clicked

Dim chkFooter As CheckBox = DirectCast(sender, CheckBox)

'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)
TotalYearColumns()
End Sub

Elizabeth Gee Simple ASP.Net Recipes 15