Changing Grid View header and footer at run time
This article describes how to change the attributes of grid view header or footer at runtime. This is very significant since many customers’ demands for summary information at the bottom of the grid or many times, we feel the need of changing header attributes at runtime.
Let us see this scenario with a very simple example:
I will use the same grid which I have used in my previous article. Initially, my grid view looks like:
A very simple requirement would be to change the header of first column from ‘Name’ to ‘Person Name’ and show the tooltip as ‘Name’
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[1].HorizontalAlign = HorizontalAlign.Center;
e.Row.Cells[1].Text = "Person Name";
e.Row.Cells[1].ToolTip = "Name";
}
}
As shown above, we handled the GridView1_RowDataBound event and changed the text and tooltip of second column after filtering out the header row from all rows of the datagrid.
So, now the grid looks like(Notice the change in second header column
Note that all attributes of header column can be changed at runtime and we are not limited to changing only text and tooltip.
For example, let us see a simple example of changing foreground and background color of header columns alternatively
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
int iColumnIndex = 0;
foreach (TableCell cell in e.Row.Cells)
{
cell.Text = String.Format("{0}_{1}", cell.Text, (++iColumnIndex));
if (iColumnIndex % 2 == 0)
{
cell.HorizontalAlign = HorizontalAlign.Center;
cell.BackColor = SystemColors.WindowText;
cell.Style["color"] = "#c04901";
}
else
{
cell.HorizontalAlign = HorizontalAlign.Right;
cell.BackColor = System.Drawing.Color.YellowGreen;
cell.ForeColor= Color.Wheat;
}
}
}
As shown in above code we loop through the columns and change the background and foreground of odd and even columns (Notice the change in header text too)
Similar to changing Header Columns dynamically, we may need to change columns of gridview footer rows dynamically. Let us first add a simple footer to our grid View.
To add Footer, simply set Show Footer attribute of grid as true. So our grid declaration looks like
<asp:GridView ID="GridView1" runat="server" ShowFooter="true" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" GridLines="None" Width="75%">
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<FooterStyle BackColor="#336699" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
</asp:GridView>
And the output is
Let us show summary data in this footer label. Since the first four columns has string value, I would show their summary as total length while for salary column , I would show the total salary in footer row. So, the code would look like.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
fTotalLength += e.Row.Cells[0].Text.Length;
sTotalLength += e.Row.Cells[1].Text.Length;
tTotalLength += e.Row.Cells[2].Text.Length;
foTotalLength += e.Row.Cells[3].Text.Length;
fiTotalLength += int.Parse(e.Row.Cells[4].Text);
}
if (e.Row.RowType == DataControlRowType.Footer)
{
e.Row.Cells[0].Text = "Length: " + fTotalLength.ToString();
e.Row.Cells[1].Text = "Length: " + sTotalLength.ToString();
e.Row.Cells[2].Text = "Length: " + tTotalLength.ToString();
e.Row.Cells[3].Text = "Length: " + foTotalLength.ToString();
e.Row.Cells[4].Text = "Total Price: " + fiTotalLength.ToString();
}
}
As shown above, we loop through each data row to calculate the total value of each column and then display that total value in footer row columns.
So, the output would like
What if we want to show or change the values of either header or footer on some user events and not on initial load of grid or GridView1_RowDataBound event?
Let us see how to handle this scenario. Let us consider the case where the user wants to see the footer row with total values on click of a button.
First I would disable displaying the footer row on initial grid load by changing showfooter attribute to false
<asp:GridView ID="GridView1" runat="server" ShowFooter="false" OnRowDataBound="GridView1_RowDataBound" CellPadding="4" GridLines="None" Width="75%">
</asp:GridView>
Let us add a button and click event of that button
<asp:Button ID="btnChange" Text="Change Header Footer" runat="server" onclick="btnChange_Click" />
protected void btnChange_Click(object sender, EventArgs e)
{
GridView1.ShowFooter = true;
GridView1.FooterRow.Visible = true;
if (GridView1.Rows.Count > 0)
{
GridView1.HeaderRow.Cells[4].Text = "Monthly Salary";
GridView1.FooterRow.Cells[0].Text = "Length: " + fTotalLength.ToString();
GridView1.FooterRow.Cells[1].Text = "Length: " + sTotalLength.ToString();
GridView1.FooterRow.Cells[2].Text = "Length: " + tTotalLength.ToString();
GridView1.FooterRow.Cells[3].Text = "Length: " + foTotalLength.ToString();
GridView1.FooterRow.Cells[4].Text = "Total Price: " + fiTotalLength.ToString();
}
}
On initial load, Screen would look like
On clicking button, we would see the footer row as shown below:
Hope this article was useful to you and you enjoyed reading this article.
here
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
How AJAX Works, advantages and disadvantages
Working with wrap panel in silverlight
Get Data of other page on current page
What is Silverlight,its features and how it works
Binding Database columns with apostrophe
Jquery features, Advantages and disadvantages
Working with silver light datagrid
JQuery FAQ and Jquery Effects
How Silverlight works internally
How to sort an ObservableCollection
Post Comment