How to Align Columns in Gridview

Question

1.00/5 (1 vote)

See more:

I am trying to align the columns of my GridView. I have read every article I can find and have gone to the extreme to add horizontalalign="Center" to just about every tag that will accept it. Problem is, that when it runs, everything is aligned to the left. What am I missing?

XML

    <asp:GridView ID="gvAgency" runat="server"
    AutoGenerateColumns="False"
    OnRowEditing="gvAgency_RowEditing"
    OnRowCancelingEdit="gvAgency_RowCancelingEdit"
    OnRowUpdating="gvAgency_RowUpdating"
    OnPageIndexChanging="gvAgency_PageIndexChanging"
    OnRowDataBound="gvAgency_RowDataBound"
    Width="100%" DataKeyNames="Town" BackColor="White"
    BorderColor="#7AC0DA" BorderStyle="Double" BorderWidth="3px"
    CellPadding="4" GridLines="Horizontal"
    UseAccessibleHeader="False" PageSize="7"
    ShowHeaderWhenEmpty="True"
    SortedDescendingHeaderStyle-HorizontalAlign="NotSet"
    HorizontalAlign="Center" AllowPaging="True">
    <RowStyle HorizontalAlign="Center" />
    <AlternatingRowStyle BorderStyle="Solid"
    HorizontalAlign="Center" />
    <Columns>
        <asp:TemplateField HeaderText="Town"
        SortExpression="Town">
            <EditItemTemplate>
                <asp:Label ID="txtTown" runat="server"
                Text='<%# Eval("Town") %>'></asp:Label>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblTown" runat="server"
                Text='<%# Bind("Town") %>'></asp:Label>
            </ItemTemplate>
            <FooterStyle BackColor="#31869B"
            HorizontalAlign="Center" />
            <HeaderStyle BackColor="#31869B" Width="300px"
            HorizontalAlign="Center" />
            <ItemStyle Width="300px" HorizontalAlign="Center" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Lethality Screens">
            <EditItemTemplate>
                <asp:Label ID="txtScreens" runat="server"
                Text='<%# Eval("Danger")%>'></asp:Label>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblScreens" runat="server"
                Text='<%# Eval("Danger")%>'></asp:Label>
            </ItemTemplate>
            <FooterStyle BackColor="#31869B" />
            <HeaderStyle BackColor="#31869B" Width="120px" />
            <ItemStyle Width="120px" HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
    <EditRowStyle HorizontalAlign="Center" />
    <FooterStyle BackColor="#5B5A94" ForeColor="White"
     BorderColor="Black" />
     <HeaderStyle BackColor="#5B5A94" BorderColor="Black"
     Font-Bold="True" ForeColor="White"
     HorizontalAlign="Center" />
    <PagerStyle BackColor="#31869B" ForeColor="White"
     HorizontalAlign="Center" BorderColor="Black"
     Font-Bold="True" />
    <RowStyle BackColor="White" ForeColor="#333333"
     HorizontalAlign="Center" />
     <SelectedRowStyle BackColor="#7AC0DA"
     Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F7F7F7" />
    <SortedAscendingHeaderStyle BackColor="#487575" />
    <SortedDescendingCellStyle BackColor="#E5E5E5" />
    <SortedDescendingHeaderStyle BackColor="#275353" />
</asp:GridView>

Posted 26-Oct-15 11:33am

CopCoder

Updated 22-Sep-20 11:27am

Patrice T

v3

Add a Solution

3 solutions

Solution 1

You should be able to add as an attribute of the TemplateField, e.g.

ASP.NET

<asp:TemplateField ItemStyle-HorizontalAlign="Center" ...></asp:TemplateField>

Or, in code behind, you can set it e.g.

HTML

gvAgency.Columns(N).DefaultCellStyle.Alignment = DataGridViewContentAlignment.MiddleCenter

replacing N with whatever the appropriate column number is

Posted 26-Oct-15 11:44am

Wombaticus

Updated 26-Oct-15 11:46am

v2

Comments

CopCoder 27-Oct-15 16:53pm

Tried to add the attribute, but ItemStyle-HorizontalAlign="Center" gives an error that the attribute isn't compatible. I currently have HorizontalAlign="Center" in each of my items, but this doesn't work either.

I also tried to play with your second option, but DefaultCellStyle and DatagridviewContentAlignment are not properties of Gridview.

Wombaticus 27-Oct-15 17:43pm

What IDE are you using, and what version .NET?

CopCoder 27-Oct-15 22:37pm

VS 2012 with .NET 4.5 writing website with vb.net programming back end.

Wombaticus 28-Oct-15 4:30am

OK, sorry, had the second bit wrong, should be
gvAgency.Columns(N).ItemStyle.HorizontalAlign = HorizontalAlign.Center
but setting
<asp:TemplateField ItemStyle-HorizontalAlign="Center" /><asp:TemplateField>
is OK. Both these methods work for me in VS 2012 and .NET 4.5

Solution 3

<asp:templatefield itemstyle-cssclass="text-center">

Posted 22-Sep-20 11:27am

massnonn

Comments

Richard Deeming 23-Sep-20 4:32am

An unformatted, unexplained code-dump is not a solution.

And there's nothing in the question to suggest the OP is using Bootstrap, or has a custom text-center class defined anywhere.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-10-26T16:33:00

Solution 2

Instead of adding attributes to each element, just use CSS. In worst case, you can add a CSS class attribute to some elements. This is what CSS is designed for.

—SA

Posted 26-Oct-15 16:33pm

Sergey Alexandrovich Kryukov

Comments

CopCoder 27-Oct-15 22:41pm

So I put some code in the style of the individual page to control the gridview align and it worked, almost. It aligns the text cells, but still can't figure the abbreviation to get the commandfield buttons aligned.

/* the style for the normal header cells */
.gridview th {
text-align: center;
}
/* the style for the normal table cells */
.gridview td {
text-align: center;

Any idea what controls the CommandField?

Sergey Alexandrovich Kryukov 28-Oct-15 1:57am

All right. There is a lot of stuff in CSS, but it's not a problem to learn it gradually, not necessarily at once.

How anyone can give you any idea on CommandField is you did not show its definition?

—SA