Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Changing Grid View header and footer at run time
Posted By Sarin on Sep 08, 2012     RSS Feeds     Latest Hinduism news
6075 Views

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




Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Changing Grid View header and footer at run time
showing row details on button click of silver light datagrid
What is Silverlight,its features and how it works
Binding Database columns with apostrophe
JQuery FAQ and Jquery Effects
Working with silver light datagrid
How to sort an ObservableCollection
Simple Ajax client server Example
How Silverlight works internally
How AJAX Works, advantages and disadvantages

Post Comment