如何在网格视图中设置 TemplateField 列的宽度？

Posted 2023-03-06

【中文标题】如何在网格视图中设置 TemplateField 列的宽度？

【英文标题】：How to set the width of TemplateField column in Grid view?

【发布时间】：2014-06-14 22:08:46

【问题描述】：

您好，我正在使用 c# 和 asp.net 开发一个网站。但是我的网格视图仅在一页上没有正确显示。我是否使用相同的 css 类但输出仍然很奇怪。

这是我得到的输出：

这是我的网格设计视图代码：

     <div style="width: 800px; align-content: center;">

    <asp:GridView ID="gvMv" runat="server" AutoGenerateColumns="False" 
        OnRowDataBound="gvMv_RowDataBound" CssClass="Grid" ShowFooter="True">
        <FooterStyle Height="25" />
        <RowStyle />
        <PagerStyle />
        <HeaderStyle />
        <Columns>
            <asp:BoundField DataField="day" HeaderText="Day" HeaderStyle-Width="150" ItemStyle-Height="25" HeaderStyle-Height="30">

                <HeaderStyle Height="30px" Width="150px"></HeaderStyle>

                <ItemStyle Height="25px"></ItemStyle>

            </asp:BoundField>
            <asp:TemplateField HeaderText="0.30"></asp:TemplateField>

            <asp:TemplateField HeaderText="1.00"></asp:TemplateField>
            <asp:TemplateField HeaderText="2.00"></asp:TemplateField>
            <asp:TemplateField HeaderText="2.50"></asp:TemplateField>

            <asp:TemplateField HeaderText="4.00"></asp:TemplateField>
            <asp:TemplateField HeaderText="5.00"></asp:TemplateField>

            <asp:TemplateField HeaderText="1.50"></asp:TemplateField>
            <asp:TemplateField HeaderText="Total" ItemStyle-ForeColor="#0099FF">
                <ItemStyle ForeColor="#0099FF"></ItemStyle>
            </asp:TemplateField>


        </Columns>
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" Font-Size="Smaller" />
        <RowStyle CssClass="rSty" BackColor="#F7F7DE" />
        <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="true" ForeColor="White" />
        <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
        <HeaderStyle CssClass="hSty" BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>

  </div>

我希望所有列的宽度相同。谁能帮我解决这个问题？

谢谢。

【参考方案1】：

这是一个示例：

<asp:TemplateField HeaderText="used">
<HeaderStyle Width="100" />
<ItemStyle Width="100" />
</asp:TemplateField>

您可以使用 ItemStyle 为您的模板字段列设置属性

【讨论】：

这对我不起作用，大小没有变化，我什至有一个 css 文件 .CssFieldInvisible visibility :hidden;宽度：0px； 但只有可见性有效果！！

【参考方案2】：

我遇到了同样的问题，这对我有用

<asp:TemplateField ItemStyle-Width="150px" HeaderText="ABC" ItemStyle-HorizontalAlign="center">
    <ItemTemplate>
     <asp:Label ID="ABC" runat="server" Text ='<%# Eval("ABC")%>' ></asp:Label>
     </ItemTemplate>
           <HeaderTemplate>
              <asp:TextBox ID="txtBusinessGroup" runat="server" onkeyup="filter_BusinessGroup(this)" CssClass="texbox_header" Width="130px" placeholder="ABC" Text="" ToolTip="TYPE IN THE ABC PLEASE"></asp:TextBox>
            </HeaderTemplate>
          <ItemStyle HorizontalAlign="Center" Width="150px" />
       </asp:TemplateField>

我在您可以删除的标题文本中显示文本字段。 我从

更改的字段的宽度

    <ItemStyle HorizontalAlign="Center" Width="150px" /> 

或实际使用的文本框或模板字段

 <asp:TemplateField ItemStyle-Width="150px" HeaderText="ABC" ItemStyle-HorizontalAlign="center">

我希望这对您有所帮助，并为您或任何可能最终来到这里的人工作。

谢谢

【参考方案3】：

``如果以上所有代码都可以增加gridview header的宽度，那么你可以试试这个，它也肯定会工作。只需在YourText putt html space tag that is  之后，你有多少空间想要。

**HeaderText="YourText     "**

【参考方案4】：

我也有同样的经历。 ItemStyle 不工作！使用 HeaderStyle。

GridView1.Columns[2].HeaderStyle.Width = 20;

【参考方案5】：

尝试使用此模板代码：

<asp:TemplateField HeaderText="ABC">
    <ItemTemplate>
          <asp:Label ID="lblABC" runat="server" 
            Text='<%#DataBinder.Eval(Container.DataItem, "ABCId") %>'>
          </asp:Label>
    </ItemTemplate>
    <ItemStyle Width="20px" />
    <HeaderStyle  Width="20px" />
    <FooterStyle Width="20px" />                                                   
    <EditItemTemplate>
          <asp:Label ID="lblEditABC" runat="server" 
            Text='<%#DataBinder.Eval(Container.DataItem, "ABCId") %>'>
          </asp:Label>
    </EditItemTemplate>
</asp:TemplateField>