How to right align the header of just one Gridview column

Question

Does anybody knows how to right-align a header of just one column of a gridview. Been searching the web and still cannot find a solution for it.

The HorizontalAlign='Right' works for the data, but not for the header. I do not want to right-align all columns but just one.

Here's an excerpt of the code:

<asp:GridView ID="gvCustomer" AutoGenerateColumns="False" runat="server">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />

               (other fields here)

                <asp:TemplateField HeaderText="Contact Name" HeaderStyle-HorizontalAlign="Right" >
                    <ItemTemplate>
                            <asp:Label runat="server" ID="lblContactName" Text='<%# Eval("ContactName") %>' />
                    </ItemTemplate>
                    <ItemStyle HorizontalAlign="Right" />
                    <HeaderStyle HorizontalAlign="Right" />
                </asp:TemplateField>
    </Columns>
</asp:GridView>

Any help is appreciated. Thanks!

Niki

Solution 1

1 You can define on your control GridView

<HeaderStyle HorizontalAlign="Right" />

Note: delete your tag from item. he must be on your GridView control

So

<asp:GridView ID="gvCustomer" AutoGenerateColumns="False" runat="server">
    <HeaderStyle  HorizontalAlign="Right" />
    .....
</asp:GridView>

2 Or you can define on your Item

<asp:TemplateField HeaderStyle-HorizontalAlign="Right">

Note: with this solution delete <HeaderStyle HorizontalAlign="Right" /> (must be inside your GridView not item)

Solution 2

we have same problem but i manage to overcome it.

here is my solution :D

<asp:TemplateField>
     <HeaderStyle Width="100px"/><ItemStyle Width="100px" />
     <HeaderTemplate>
         <div style="text-align:right;">Contact Name</div>
     </HeaderTemplate>
     <ItemTemplate>
        <asp:Label runat="server" ID="lblContactName" Text='<%# Eval("ContactName") %>' />
     </ItemTemplate>
</asp:TemplateField>

Solution 3

I know my answer is too late, but would help for new people who is still searching answer for this question.

Basically we can use any of the following options

<asp:TemplateField HeaderStyle-HorizontalAlign=Right>

or

<HeaderStyle HorizontalAlign="Right" />

DOM will create this as <th align="right" scope="col">Quantity</th>. For some reasons this align = right attribute will not work, need to analyze to know correct reason.

But you can achieve this by creating a class to make a particular header to be aligned right and ensure that HorizontalAlign attribute is also set for headers.

th[align="right"] { text-align:right; }

Solution 4

In examples I've seen, the column header alignment has been set for a specific column using:

<asp:BoundField DataField="CustomerId" HeaderStyle-HorizontalAlign="Right" />

But that might be equivalent to what you've already used in the template:

<HeaderStyle HorizontalAlign="Right" />

If that doesn't work, the problem might not be that your header is not aligned, but that your header's content is stretched to the full width of the column, so the alignment doesn't matter.

For example, if your cell header contains a caption with text-align: left, and that caption's width is 100% of its container, then the container's horizontal align will not affect it:

As an experiment, try setting the HeaderStyle Width property to something small and see if that impacts the alignment:

<HeaderStyle HorizontalAlign="Right" Width="50px" />

You might have to shrinkwrap the header's container to fit the column caption text so that the HorizontalAlign of the header takes effect.

Solution 5

Hmm, HorizontalAlignment works just fine for me.

I just put together this quick test. Note the second column uses Headerstyle-HorizontalAlign in the field tag while the third uses a separate HeaderStyle tag with a HorizontalAlign. Both worked fine.

<asp:GridView ID="gvThings" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="text" HeaderText="Text" ItemStyle-Width="200" />
        <asp:BoundField DataField="number1" HeaderText="Number 1" ItemStyle-Width="200" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" />
        <asp:TemplateField HeaderText="Number 2" ItemStyle-Width="200" ItemStyle-HorizontalAlign="Right">
            <HeaderStyle HorizontalAlign="Right" />
            <ItemTemplate>
                <asp:Label ID="lblNumber2" runat="server" Text='<%# Eval("number2")%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
 </asp:GridView>

I think you've got the right idea, you're just making a mistake on some detail. Do you, perhaps, have a non-overridable theme defined?

View more solutions

Comments

[Alain]

The code excerpt posted by the asker already contains <HeaderStyle HorizontalAlign="Right" />...

[Aghilas Yakoub]

<HeaderStyle HorizontalAlign="Right" /> must be inside GridView not in your template item

[Aghilas Yakoub]

Or you can use <asp:TemplateField HeaderStyle-HorizontalAlign=Right> but you must delete <HeaderStyle HorizontalAlign="Right" /> inside your item

[Alain]

See I thought this worked too, which is what makes me think that maybe his column header template specifies a container which has it's own text alignment and is stretching to fit the column-header container, circumventing the column-header alignment.

[Jay]

Or his header has a bunch of trailing spaces, or something silly like that. In any case, I think this isn't a "how do I do it" problem, but a bug in some nitnoid detail.

[niki b]

sorry got caught up with work. tried both HeaderStyle-HorizontalAlign="Right" on the Boundfield and the HorizontalAlign="Right" on the HeaderStyle and both did not work. I also added Width as per your suggestion but that did not work too.

[niki b]

i need to just right align the header on a separate column and not for the entire gridview. I did not realize that HeaderStyle is not supposed to be in the template item. i did your suggestion though with deleting <HeaderStyle HorizontalAlign="Right" /> and using <asp:TemplateField HeaderStyle-HorizontalAlign=Right> instead but the header is still left aligned.

[niki b]

There are no trailing or preceding spaces in the header. I even tested in the gridview rowdatabound: code protected void gvgvCustomer_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { txtTest.Text = '(' + e.Row.Cells[3].Text + ')'; }code

[niki b]

I was suspecting a css file is overriding the settings, so I put this on the page <style type="text/css"> table.gvHeaderRightAlign th { text-align:right; } </style> and applied it: <asp:TemplateField HeaderText="ContactName" ShowHeader="True" HeaderStyle-CssClass="gvHeaderRightAlign" > <ItemTemplate> <asp:Label runat="server" ID="lblContactName" Text='<%# Eval("ContactName") %>' /> </ItemTemplate> <ItemStyle HorizontalAlign="Right" /> </asp:TemplateField> but it still did not work.

[Jay]

Do you have a theme? A theme can set things that are not overridable. If you do, try removing the theme and see if it works then. Failing that, try (a) looking at the generated HTML and seeing what it actually put in there, maybe that will give you a clue. (b) Use IE's developer tools or the equivalent in whatever browser you use to see what styles are actually being applied and where they come from. You might have a style higher up that's overriding what the gridview is trying to set.