asp:GridView column headers not aligned at bottom of header row

I have the following GridView on an ASP.NET page.  The column headings are not vertically alligned at the bottom of the header row even though the headerstyle says so.  What do I have to do to make it happen?
<asp:gridview ID="dgvOpportunities" runat="server" AllowPaging="True" AllowSorting="True"
                            AutoGenerateColumns="False" CellPadding="4" DataKeyNames="OpportunityID" ForeColor="Black"
                            GridLines="None" OnRowDataBound="dgvOpportunities_RowDataBound" OnRowCommand="dgvOpportunities_OnRowCommand"
                            OnPageIndexChanging="dgvOpportunities_OnPageIndexChanging">
                            <rowstyle BackColor="White" ForeColor="Black" />
                            <columns>
                                <asp:commandfield ShowDeleteButton="False" ShowEditButton="False" ShowSelectButton="True"
                                    FooterStyle-ForeColor="Navy" />
                                <asp:boundfield DataField="CloseDate" HeaderText="Close Date" SortExpression="CloseDate"
                                    DataFormatString="{0:yyyy-MM}" ItemStyle-Width="50px" />
                                <asp:boundfield DataField="ForecastAmount" HeaderText="Forecast Amount" SortExpression="ForecastAmount"
                                    DataFormatString="{0:$0,0}" />
                                <asp:boundfield DataField="SalesRepFullName" HeaderText="Forecasted By" ReadOnly="True"
                                    SortExpression="SalesRepFullName" />
                                <asp:hyperlinkfield HeaderText="Quote" DataTextField="QuoteNumber" DataNavigateUrlFields="QuoteID"
                                    DataNavigateUrlFormatString="../rpt_quote.aspx?quote_id={0}" Target="_quote" />
                                <asp:boundfield DataField="DealerRepFullName" HeaderText="Dealer Rep" ReadOnly="True"
                                    SortExpression="DealerRepFullName" />
                                <asp:boundfield DataField="OpportunityName" HeaderText="Sales Opp Name" SortExpression="OpportunityName" />
                                <asp:boundfield DataField="OpportunityID" Visible="false" HeaderText="Opp Id" ReadOnly="True"
                                    SortExpression="OpportunityID" />
                                <asp:boundfield DataField="QuoteID" Visible="false" />
                            </columns>
                            <footerstyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                            <pagerstyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                            <selectedrowstyle BackColor="#FFFFDC" Font-Bold="True" ForeColor="Black" />
                            <headerstyle BackColor="#87a1d8" Font-Bold="True" ForeColor="White" VerticalAlign="Bottom"
                                Font-Size="10pt" />
                            <editrowstyle BackColor="#FFFFDC" />
                            <alternatingrowstyle BackColor="#F2F6FC" ForeColor="Black" />
                        </asp:gridview>

Open in new window

carlkelleyAsked:
Who is Participating?
 
carlkelleyConnect With a Mentor Author Commented:
CB_Thirumalai,

The solution appears below in the OnRowCreated handler.  Your suggestion to add the attribute put me onto the winner: adding the appropriate style.  The valign attribute did not work.
        protected void dgvQuotes_OnRowCreated(Object sender, GridViewRowEventArgs e)
        {
 
            // Use the RowType property to determine whether the 
            // row being created is the header row. 
            if (e.Row.RowType == DataControlRowType.Header)
            {
                foreach (DataControlFieldHeaderCell cell in e.Row.Cells)
                {
                    cell.Attributes.Add("style", "vertical-align:bottom;");
                }
            }
        }

Open in new window

0
 
CB_ThirumalaiCommented:
In the RowDataBound event, just add an attribute to the header row cells to set the valign attribute to "bottom" as
if (e.Row.RowType == DataControlRowType.Header)
{
// set attribute here
}
0
 
Obadiah ChristopherCommented:
Does it align in the centre? or at the top? Have u written any css for the grid?
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
carlkelleyAuthor Commented:
I tried the following code in both the RowDataBound and RowCreate event handlers and it had no effect.  I used the debugger to make sure that the code was executed.  All of the properties set in the headerstyle tag are taking effect except VerticalAlign.  
if (e.Row.RowType == DataControlRowType.Header)
{
    foreach (TableCell cell in e.Row.Cells)
    {
       cell.VerticalAlign = VerticalAlign.Bottom;
    }
}

Open in new window

0
 
carlkelleyAuthor Commented:
I then tried assigning a CSS class with vertical-align:bottom to the headerstyle element.  That didn't work either.  The reasons may be found in the HTML that was generated (below).
<tr class="clsTableHeading" valign="bottom" style="color:White;background-color:#87A1D8;font-size:10pt;font-weight:bold;">
	<th scope="col">&nbsp;</th>
	<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgvOpportunities','Sort$CloseDate')" style="color:White;">Close Date</a></th>
	<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgvOpportunities','Sort$ForecastAmount')" style="color:White;">Forecast Amount</a></th>
	<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgvOpportunities','Sort$SalesRepFullName')" style="color:White;">Forecasted By</a></th>
	<th scope="col">Quote</th>
	<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgvOpportunities','Sort$DealerRepFullName')" style="color:White;">Dealer Rep</a></th>
	<th scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$dgvOpportunities','Sort$OpportunityName')" style="color:White;">Sales Opp Name</a></th>
</tr>

Open in new window

0
 
CB_ThirumalaiConnect With a Mentor Commented:
Can you try this?
if (e.Row.RowType == DataControlRowType.Header)
{
    foreach (TableCell cell in e.Row.Cells)
    {
       cell.Attributes.Add("valign","bottom");
    }
}
 
OR
 
e.Row.Attributes.Add("valign", "bottom");

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.