?
Solved

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

Posted on 2009-02-20
6
Medium Priority
?
875 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:carlkelley
  • 3
  • 2
6 Comments
 
LVL 12

Expert Comment

by:CB_Thirumalai
ID: 23697973
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
 
LVL 20

Expert Comment

by:informaniac
ID: 23699540
Does it align in the centre? or at the top? Have u written any css for the grid?
0
 

Author Comment

by:carlkelley
ID: 23700571
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:carlkelley
ID: 23700583
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
 
LVL 12

Assisted Solution

by:CB_Thirumalai
CB_Thirumalai earned 500 total points
ID: 23702650
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
 

Accepted Solution

by:
carlkelley earned 0 total points
ID: 23703612
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Integration Management Part 2
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Suggested Courses
Course of the Month14 days, 8 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question