Merge columns in GridView footer and add a line


Merge columns in the footer is not that straightforward. Here is another solution other than through CSS to put an <hr> in the footer:

<asp:GridView ID="GridView1" ShowFooter="true"  OnRowDataBound="GridView1_OnRowDataBound" …>

 

protected void GridView1_OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.Footer)
        {
            //remove all cells but one, so GridView1.Columns.Count-1
            for (int i = 0; i < GridView1.Columns.Count-1; i++)
            {
                e.Row.Cells.RemoveAt(0);
            }
           
           e.Row.Cells[0].ColumnSpan = GridView1.Columns.Count;
           e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
           e.Row.Cells[0].Text = " <hr style='color:yellow; height: 5px' />";

        }
        
    }
 CSS way:

Add a bottom border style to your gridview(you may not need your footer):

  <asp:GridView ID="GridView1" CssClass="bottomBorder".......................>

<

head runat="server">

<title>Your Page</title>

 <style type="text/css">
.bottomBorder {border-bottom: black medium solid; }
</style>

</head>

 

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s