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

Why is it that you've asked 9 questions in the last year, and you've never accepted any of them, and have only ever up-voted one answer? — Alain, Oct 09 '12 at 20:08

score 8 · Answer 1 · edited Dec 08 '16 at 13:36

8

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)

edited Dec 08 '16 at 13:36

DOOMDUDEMX

644
1
8
24

answered Oct 09 '12 at 15:39

Aghilas Yakoub

28,516
5
46
51

The code excerpt posted by the asker already contains ``... – Alain Oct 09 '12 at 15:47
must be inside GridView not in your template item – Aghilas Yakoub Oct 09 '12 at 15:50
Or you can use but you must delete inside your item – Aghilas Yakoub Oct 09 '12 at 15:52
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 and using instead but the header is still left aligned. – niki b Oct 09 '12 at 20:17

ayanix · Answer 2 · 2016-04-17T07:03:53.513

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>

Alain · Answer 3 · 2012-10-09T15:58:20.590

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:

enter image description here

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

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

enter image description here

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

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, Oct 09 '12 at 20:13

score 1 · Answer 4 · answered Oct 09 '12 at 16:01

1

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?

answered Oct 09 '12 at 16:01

Jay

26,876
10
61
112

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. – Alain Oct 09 '12 at 16:03
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. – Jay Oct 09 '12 at 17:03
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 Oct 09 '12 at 20:31
I was suspecting a css file is overriding the settings, so I put this on the page and applied it: but it still did not work. – niki b Oct 09 '12 at 20:32
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. – Jay Oct 10 '12 at 17:19

score 1 · Answer 5 · answered Mar 31 '15 at 11:48

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

score 0 · Answer 6 · edited Feb 22 '13 at 06:04

0

try this..

int i=GridView3.HeaderRow.Cells.Count;
    GridView3.HeaderRow.Cells[0].HorizontalAlign = HorizontalAlign.Right;

edited Feb 22 '13 at 06:04

Andrew Barber

39,603
20
94
123

answered Feb 22 '13 at 05:56

Nithin Gopala

1

score 0 · Answer 7 · answered Jul 09 '21 at 16:22

Here is an answer not covered above, for those of you who may be using AutoGenerateColumns=True on your Gridview. For example, if you want to populate the Gridview from the code-behind, and you want to create your header row programmatically from the code-behind as well:

At the point in your code AFTER you have populated the Gridview and AFTER you called DataBind(), add the following code:

        foreach (TableCell cel in grid.HeaderRow.Cells)
        {
            if (cel.Text == "Price")
            {
                cel.Style.Add("width","100%");
                cel.Style.Add("text-align", "right");
            }
        }

This will give the headercell containing "Price" 100% width, and right-align the word "Price" within the cell. Obviously, "grid" is the ID of my GridView control. Each cell in the header row is a TableCell element in the context of managed code.

My observation when researching this topic has been that all of the answers seem to assume you are using the template method in the HTML of your page, which granted, the OP is, but I am not and perhaps some of you are not as well.

Furthermore, most answers I have seen on this topic are missing the point that we want to set alignment on only ONE particular header cell, and not all cells in the entire header row. In my case, I want all header cells to be left-aligned, except for the "Price" header cell, which I want right-aligned.

There are reasons why one might not want to create the headers within the HTML, but rather in a code-behind method. If this describes your situation, my answer will enable you to set alignments per header cell.

Cheers, -=Cameron

How to right align the header of just one Gridview column

7 Answers7