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[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; }




Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s