How to set the width of TemplateField column in Grid view?

Question

Hi I am developing a website using c# and asp.net. But my grid view is not showing properly for one page only. Whether I am using the same css class but still the output is something odd.

Here is the output I am getting:

here is my design view code for the grid:

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

    <asp:GridView ID="gvMv" runat="server" AutoGenerateColumns="False" width="400px"
        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>

I want all of the column to be same width. Can anyone please help me on this?

Thank you.

Solution 1

I had the same issue and this is what worked for me

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

I am showing textfield in the headertext which you can remove. The width of the fields i change from

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

or the actual textbox im using or the templatefield

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

I hope this helps you and works for you or anyone else who might end up here.

thank you

Solution 2

Here is an example how you can do it :

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

You can use ItemStyle to set properties for your template field column

Solution 3

``If these all above code will note work to increase the width of gridview header then you can try this one also it will work definitely.Simply after YourText putt HTML space tag that is   that much how much space you want.

**HeaderText="YourText     "**

Solution 4

Try using this template code:

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

Solution 5

i experienced the same. ItemStyle is not working! use HeaderStyle.

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

View more solutions

Comments

[User1162527]

This does not work for me, no change in size, I have even a css file .CssFieldInvisible { visibility :hidden; width:0px; } but only visibility has effect !!