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.

Answer 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

Answer 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