如何正确对齐一个Gridview列的标题

时间:2012-10-09 15:34:29

标签: asp.net gridview header right-align

有人知道如何右对齐gridview的一列标题。一直在搜索网络,仍然无法找到解决方案。

Horizo​​ntalAlign ='Right'适用于数据,但不适用于标题。我不想右对齐所有列,只需要一个。

以下是代码的摘录:

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

感谢任何帮助。谢谢!

尼基

7 个答案:

答案 0 :(得分:7)

1您可以在控件上定义GridView

<HeaderStyle HorizontalAlign="Right" />

注意:从项目中删除您的标记。他必须在你的GridView控件上

所以

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

2或者您可以在商品上定义

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

注意:使用此解决方案删除<HeaderStyle HorizontalAlign="Right" />(必须在GridView中不是项目)

答案 1 :(得分:2)

我们有同样的问题,但我设法克服它。

这是我的解决方案: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>

答案 2 :(得分:1)

在我看到的examples中,使用以下内容为特定列设置了列标题对齐:

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

但这可能与您在模板中使用的内容相同:

<HeaderStyle HorizontalAlign="Right" />

如果这不起作用,问题可能不是您的标题未对齐,而是your header's content被拉伸到列的整个宽度,因此对齐无关紧要。

例如,如果您的单元格标题包含带有text-align:left的标题,并且标题的宽度是其容器的100%,则容器的水平对齐不会影响它:

enter image description here

作为一项实验,请尝试将HeaderStyle Width属性设置为较小的值并查看是否会影响对齐:

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

enter image description here

您可能需要收缩标头的容器以适合列标题文本,以使标题的Horizo​​ntalAlign生效。

答案 3 :(得分:1)

嗯,Horizo​​ntalAlignment对我来说效果很好。

我刚刚把这个快速测试放在一起。请注意,第二列在字段标记中使用Headerstyle-Horizo​​ntalAlign,而第三列使用带有Horizo​​ntalAlign的单独HeaderStyle标记。两者都运作良好。

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

我认为你有正确的想法,你只是在某些细节上犯了错误。或许,您是否定义了不可覆盖的主题?

答案 4 :(得分:1)

我知道我的答案为时已晚,但对那些仍在寻找这个问题答案的新人有帮助。

基本上我们可以使用以下任何选项

<asp:TemplateField HeaderStyle-HorizontalAlign=Right>

<HeaderStyle HorizontalAlign="Right" />

DOM会将其创建为<th align="right" scope="col">Quantity</th>。由于某些原因,这个align = right属性不起作用,需要分析才能知道正确的原因。

但是你可以通过创建一个类来使特定的标题正确对齐并确保为标题设置Horizo​​ntalAlign属性来实现这一点。

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

答案 5 :(得分:0)

试试这个..

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

答案 6 :(得分:0)

对于可能在 Gridview 上使用 AutoGenerateColumns=True 的人,这是上面未涵盖的答案。例如,如果您想从代码隐藏中填充 Gridview,并且还想从代码隐藏中以编程方式创建标题行:

在填充 Gridview 和调用 DataBind() 之后的代码中,添加以下代码:

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

这将使包含“Price”的标题单元格宽度为 100%,并在单元格中右对齐“Price”一词。显然,“grid”是我的 GridView 控件的 ID。标题行中的每个单元格都是托管代码上下文中的一个 TableCell 元素。

我在研究这个主题时的观察是,所有的答案似乎都假设您在页面的 HTML 中使用模板方法,这当然,OP 是,但我不是,也许你们中的一些人不是

此外,我在这个主题上看到的大多数答案都没有指出我们只想在一个特定的标题单元格上设置对齐方式,而不是整个标题行中的所有单元格。就我而言,我希望所有标题单元格都左对齐,但我希望右对齐的“价格”标题单元格除外。

人们可能不想在 HTML 中创建标题,而是在代码隐藏方法中创建标题是有原因的。如果这描述了您的情况,我的回答将使您能够设置每个标题单元格的对齐方式。

干杯, -=卡梅隆