Match width of column heading in row with GridView BoundFields in

Discussion in 'ASP .Net' started by JB, Oct 20, 2009.

  1. JB

    JB Guest

    Hello

    In my ASP.NET application on the web page, I have a table that contains 2
    rows. One rows is for the header and the other row is for the GridView
    <asp:BoundFields> result set of data.

    The second row contains the GridView <asp:BoundFields>.
    I set the width for each BoundFields in the GridView by setting the
    <ItemStyle Width="SomeNumberpx" /> property. And it works!

    It is the first row however that contains the column headings which I am
    having 2 problems with. As you know when you have any kind of table the data
    gets displayed beneath its corresponding column heading. So my questions are:

    -How can I set the width of the column headings in the first row to the same
    size as the widths of the <asp:Boundfields> in the GridView beneath it on the
    second row?

    -How do I align the width of the column headings in the first row above the
    <asp:Boundfields> in the GridView in the second row?

    Below is the table;

    <table id="tblwhol" width="1000px" cellspacing="0";>
    <tr>
    <td>Prob #</td><td> Type</td><td >p1</td>
    <td>p2 </td><td>Problem</td>
    <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    <td>Caller3 Time</td>
    </tr>
    <tr>
    <td>
    <asp:panel ID="sitecont" runat="server" height="175px"
    Width="1000px" ScrollBars="Vertical" >
    <asp:GridView ID="siteGrid" BorderStyle="Solid"
    AutoGenerateColumns="false" ShowHeader="False"
    OnPageIndexChanging="siteGrid_PageIndexChanged"
    RowStyle-VerticalAlign="Bottom" Font-Bold="False"
    OnRowDataBound="siteGrid_RowDataBound"
    font-size="Small"
    runat="server">

    <Columns>
    <asp:BoundField DataField="Prob ID#" HeaderText="Prob #"
    SortExpression="ProblemID" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="60px" /></asp:BoundField>
    <asp:BoundField DataField="TypeID" HeaderText="Call Type"
    SortExpression="CallTypeID" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="60px" /></asp:BoundField>
    <asp:BoundField DataField="ED" HeaderText="ED"
    SortExpression="p1" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="60px" /></asp:BoundField>
    <asp:BoundField DataField="AD" HeaderText="AD"
    SortExpression="p2" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="60px" /></asp:BoundField>
    <asp:BoundField DataField="Problem" HeaderText="Problem"
    SortExpression="Description" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="200px" /></asp:BoundField>
    <asp:BoundField DataField="Comments" HeaderText="Comments"
    SortExpression="IComments" ItemStyle-HorizontalAlign="Left">
    <ItemStyle Width="400px" /></asp:BoundField>
    <asp:BoundField DataField="Caller1 Time" HeaderText="Caller1
    Time" SortExpression="Caller1 Time" DataFormatString="{0:D}"
    HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
    Time" SortExpression="Caller2 Time" DataFormatString="{0:D}"
    HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
    <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
    Time" SortExpression="ResolvedDateTime" DataFormatString="{0:D}"
    HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    </Columns>
    </asp:GridView>
    </asp:panel>
    </td>
    </tr>
    </table>

    JB







    --
    JB
     
    JB, Oct 20, 2009
    #1
    1. Advertising

  2. Re: Match width of column heading in row with GridView BoundFields in

    On Oct 21, 12:12 am, JB <> wrote:
    > Hello
    >
    > In my ASP.NET application on the web page, I have a table that contains 2
    > rows.  One rows is for the header and the other row is for the GridView
    > <asp:BoundFields> result set of data.
    >
    > The second row contains the GridView <asp:BoundFields>.
    > I set the width for each BoundFields in the GridView by setting the
    > <ItemStyle Width="SomeNumberpx" /> property.  And it works!
    >
    > It is the first row however that contains the column headings which I am
    > having 2 problems with. As you know when you have any kind of table the data
    > gets displayed beneath its corresponding column heading. So my questions are:
    >
    > -How can I set the width of the column headings in the first row to the same
    > size as the widths of the <asp:Boundfields> in the GridView beneath it on the
    > second row?
    >
    > -How do I align the width of the column headings in the first row above the
    > <asp:Boundfields> in the GridView in the second row?
    >
    > Below is the table;
    >
    >     <table id="tblwhol" width="1000px" cellspacing="0";>
    >     <tr>
    >         <td>Prob #</td><td> Type</td><td >p1</td>
    >         <td>p2 </td><td>Problem</td>
    >         <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    >         <td>Caller3 Time</td>
    >     </tr>
    >     <tr>
    >     <td>
    >     <asp:panel ID="sitecont" runat="server" height="175px"
    >         Width="1000px" ScrollBars="Vertical"  >
    >         <asp:GridView ID="siteGrid" BorderStyle="Solid"
    >             AutoGenerateColumns="false" ShowHeader="False"
    >             OnPageIndexChanging="siteGrid_PageIndexChanged"
    >             RowStyle-VerticalAlign="Bottom" Font-Bold="False"  
    >             OnRowDataBound="siteGrid_RowDataBound"
    >             font-size="Small"
    >             runat="server">
    >
    >             <Columns>
    >             <asp:BoundField DataField="Prob ID#" HeaderText="Prob #"
    > SortExpression="ProblemID" ItemStyle-HorizontalAlign="Left">
    >             <ItemStyle Width="60px" /></asp:BoundField>
    >             <asp:BoundField DataField="TypeID" HeaderText="Call Type"
    > SortExpression="CallTypeID" ItemStyle-HorizontalAlign="Left">
    >             <ItemStyle Width="60px" /></asp:BoundField>
    >             <asp:BoundField DataField="ED" HeaderText="ED"
    > SortExpression="p1" ItemStyle-HorizontalAlign="Left">
    >             <ItemStyle Width="60px" /></asp:BoundField>
    >             <asp:BoundField DataField="AD" HeaderText="AD"
    > SortExpression="p2" ItemStyle-HorizontalAlign="Left">
    >             <ItemStyle Width="60px" /></asp:BoundField>
    >             <asp:BoundField DataField="Problem" HeaderText="Problem"
    > SortExpression="Description" ItemStyle-HorizontalAlign="Left">  
    >             <ItemStyle Width="200px" /></asp:BoundField>
    >             <asp:BoundField DataField="Comments" HeaderText="Comments"
    > SortExpression="IComments" ItemStyle-HorizontalAlign="Left">
    >             <ItemStyle Width="400px" /></asp:BoundField>
    >             <asp:BoundField DataField="Caller1 Time" HeaderText="Caller1
    > Time" SortExpression="Caller1 Time" DataFormatString="{0:D}"
    > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    >             <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
    > Time" SortExpression="Caller2 Time" DataFormatString="{0:D}"
    > HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
    >             <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
    > Time" SortExpression="ResolvedDateTime" DataFormatString="{0:D}"
    > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    >             </Columns>
    >          </asp:GridView>
    >     </asp:panel>      
    >     </td>
    >     </tr>
    >     </table>  
    >
    >     JB  
    >
    > --
    > JB


    Your table has wrong layout. You have defined 4 cells in the first row
    and only 1 in the second row. Either try to close <table> tag before
    the Panel control:

    <table id="tblwhol" width="1000px" cellspacing="0";>
    <tr>
    <td>Prob #</td><td> Type</td><td >p1</td>
    <td>p2 </td><td>Problem</td>
    <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    <td>Caller3 Time</td>
    </tr>
    </table>
    <asp:panel.....

    or define colspan attribute for the second row's cell

    <tr>
    <td colspan="4">
    <asp:panel...

    Hope this helps
     
    Alexey Smirnov, Oct 21, 2009
    #2
    1. Advertising

  3. JB

    JB Guest

    Re: Match width of column heading in row with GridView BoundFields

    Hello Alexey

    There are 9 cells in the first row, you are only looking at the first
    <td> on the row, there are more than one <td> on the rows following the first
    <td> that you see. Only the last row has one <td>. So the question remains
    how to set the widths and line them up.

    JB
    --
    JB


    "Alexey Smirnov" wrote:

    > On Oct 21, 12:12 am, JB <> wrote:
    > > Hello
    > >
    > > In my ASP.NET application on the web page, I have a table that contains 2
    > > rows. One rows is for the header and the other row is for the GridView
    > > <asp:BoundFields> result set of data.
    > >
    > > The second row contains the GridView <asp:BoundFields>.
    > > I set the width for each BoundFields in the GridView by setting the
    > > <ItemStyle Width="SomeNumberpx" /> property. And it works!
    > >
    > > It is the first row however that contains the column headings which I am
    > > having 2 problems with. As you know when you have any kind of table the data
    > > gets displayed beneath its corresponding column heading. So my questions are:
    > >
    > > -How can I set the width of the column headings in the first row to the same
    > > size as the widths of the <asp:Boundfields> in the GridView beneath it on the
    > > second row?
    > >
    > > -How do I align the width of the column headings in the first row above the
    > > <asp:Boundfields> in the GridView in the second row?
    > >
    > > Below is the table;
    > >
    > > <table id="tblwhol" width="1000px" cellspacing="0";>
    > > <tr>
    > > <td>Prob #</td><td> Type</td><td >p1</td>
    > > <td>p2 </td><td>Problem</td>
    > > <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    > > <td>Caller3 Time</td>
    > > </tr>
    > > <tr>
    > > <td>
    > > <asp:panel ID="sitecont" runat="server" height="175px"
    > > Width="1000px" ScrollBars="Vertical" >
    > > <asp:GridView ID="siteGrid" BorderStyle="Solid"
    > > AutoGenerateColumns="false" ShowHeader="False"
    > > OnPageIndexChanging="siteGrid_PageIndexChanged"
    > > RowStyle-VerticalAlign="Bottom" Font-Bold="False"
    > > OnRowDataBound="siteGrid_RowDataBound"
    > > font-size="Small"
    > > runat="server">
    > >
    > > <Columns>
    > > <asp:BoundField DataField="Prob ID#" HeaderText="Prob #"
    > > SortExpression="ProblemID" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="60px" /></asp:BoundField>
    > > <asp:BoundField DataField="TypeID" HeaderText="Call Type"
    > > SortExpression="CallTypeID" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="60px" /></asp:BoundField>
    > > <asp:BoundField DataField="ED" HeaderText="ED"
    > > SortExpression="p1" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="60px" /></asp:BoundField>
    > > <asp:BoundField DataField="AD" HeaderText="AD"
    > > SortExpression="p2" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="60px" /></asp:BoundField>
    > > <asp:BoundField DataField="Problem" HeaderText="Problem"
    > > SortExpression="Description" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="200px" /></asp:BoundField>
    > > <asp:BoundField DataField="Comments" HeaderText="Comments"
    > > SortExpression="IComments" ItemStyle-HorizontalAlign="Left">
    > > <ItemStyle Width="400px" /></asp:BoundField>
    > > <asp:BoundField DataField="Caller1 Time" HeaderText="Caller1
    > > Time" SortExpression="Caller1 Time" DataFormatString="{0:D}"
    > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    > > <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
    > > Time" SortExpression="Caller2 Time" DataFormatString="{0:D}"
    > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
    > > <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
    > > Time" SortExpression="ResolvedDateTime" DataFormatString="{0:D}"
    > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    > > </Columns>
    > > </asp:GridView>
    > > </asp:panel>
    > > </td>
    > > </tr>
    > > </table>
    > >
    > > JB
    > >
    > > --
    > > JB

    >
    > Your table has wrong layout. You have defined 4 cells in the first row
    > and only 1 in the second row. Either try to close <table> tag before
    > the Panel control:
    >
    > <table id="tblwhol" width="1000px" cellspacing="0";>
    > <tr>
    > <td>Prob #</td><td> Type</td><td >p1</td>
    > <td>p2 </td><td>Problem</td>
    > <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    > <td>Caller3 Time</td>
    > </tr>
    > </table>
    > <asp:panel.....
    >
    > or define colspan attribute for the second row's cell
    >
    > <tr>
    > <td colspan="4">
    > <asp:panel...
    >
    > Hope this helps
    >
    > .
    >
     
    JB, Oct 21, 2009
    #3
  4. Re: Match width of column heading in row with GridView BoundFields

    On Oct 21, 4:16 pm, JB <> wrote:
    > Hello Alexey
    >
    >     There are 9 cells in the first row, you are only looking at the first
    > <td> on the row, there are more than one <td> on the rows following the first
    > <td> that you see.  Only the last row has one <td>.  So the question remains
    > how to set the widths and line them up.
    >
    > JB
    > --
    > JB
    >
    >
    >
    > "Alexey Smirnov" wrote:
    > > On Oct 21, 12:12 am, JB <> wrote:
    > > > Hello

    >
    > > > In my ASP.NET application on the web page, I have a table that contains 2
    > > > rows.  One rows is for the header and the other row is for the GridView
    > > > <asp:BoundFields> result set of data.

    >
    > > > The second row contains the GridView <asp:BoundFields>.
    > > > I set the width for each BoundFields in the GridView by setting the
    > > > <ItemStyle Width="SomeNumberpx" /> property.  And it works!

    >
    > > > It is the first row however that contains the column headings which I am
    > > > having 2 problems with. As you know when you have any kind of table the data
    > > > gets displayed beneath its corresponding column heading. So my questions are:

    >
    > > > -How can I set the width of the column headings in the first row to the same
    > > > size as the widths of the <asp:Boundfields> in the GridView beneath it on the
    > > > second row?

    >
    > > > -How do I align the width of the column headings in the first row above the
    > > > <asp:Boundfields> in the GridView in the second row?

    >
    > > > Below is the table;

    >
    > > >     <table id="tblwhol" width="1000px" cellspacing="0";>
    > > >     <tr>
    > > >         <td>Prob #</td><td> Type</td><td >p1</td>
    > > >         <td>p2 </td><td>Problem</td>
    > > >         <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    > > >         <td>Caller3 Time</td>
    > > >     </tr>
    > > >     <tr>
    > > >     <td>
    > > >     <asp:panel ID="sitecont" runat="server" height="175px"
    > > >         Width="1000px" ScrollBars="Vertical"  >
    > > >         <asp:GridView ID="siteGrid" BorderStyle="Solid"
    > > >             AutoGenerateColumns="false" ShowHeader="False"
    > > >             OnPageIndexChanging="siteGrid_PageIndexChanged"
    > > >             RowStyle-VerticalAlign="Bottom" Font-Bold="False"  
    > > >             OnRowDataBound="siteGrid_RowDataBound"
    > > >             font-size="Small"
    > > >             runat="server">

    >
    > > >             <Columns>
    > > >             <asp:BoundField DataField="Prob ID#" HeaderText="Prob #"
    > > > SortExpression="ProblemID" ItemStyle-HorizontalAlign="Left">
    > > >             <ItemStyle Width="60px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="TypeID" HeaderText="Call Type"
    > > > SortExpression="CallTypeID" ItemStyle-HorizontalAlign="Left">
    > > >             <ItemStyle Width="60px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="ED" HeaderText="ED"
    > > > SortExpression="p1" ItemStyle-HorizontalAlign="Left">
    > > >             <ItemStyle Width="60px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="AD" HeaderText="AD"
    > > > SortExpression="p2" ItemStyle-HorizontalAlign="Left">
    > > >             <ItemStyle Width="60px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="Problem" HeaderText="Problem"
    > > > SortExpression="Description" ItemStyle-HorizontalAlign="Left">  
    > > >             <ItemStyle Width="200px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="Comments" HeaderText="Comments"
    > > > SortExpression="IComments" ItemStyle-HorizontalAlign="Left">
    > > >             <ItemStyle Width="400px" /></asp:BoundField>
    > > >             <asp:BoundField DataField="Caller1 Time" HeaderText="Caller1
    > > > Time" SortExpression="Caller1 Time" DataFormatString="{0:D}"
    > > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    > > >             <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
    > > > Time" SortExpression="Caller2 Time" DataFormatString="{0:D}"
    > > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
    > > >             <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
    > > > Time" SortExpression="ResolvedDateTime" DataFormatString="{0:D}"
    > > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
    > > >             </Columns>
    > > >          </asp:GridView>
    > > >     </asp:panel>      
    > > >     </td>
    > > >     </tr>
    > > >     </table>  

    >
    > > >     JB  

    >
    > > > --
    > > > JB

    >
    > > Your table has wrong layout. You have defined 4 cells in the first row
    > > and only 1 in the second row. Either try to close <table> tag before
    > > the Panel control:

    >
    > > <table id="tblwhol" width="1000px" cellspacing="0";>
    > >     <tr>
    > >         <td>Prob #</td><td> Type</td><td >p1</td>
    > >         <td>p2 </td><td>Problem</td>
    > >         <td>Comments</td><td>Caller1 Time</td><td>Caller2 Time</td>
    > >         <td>Caller3 Time</td>
    > >     </tr>
    > > </table>
    > > <asp:panel.....

    >
    > > or define colspan attribute for the second row's cell

    >
    > > <tr>
    > >     <td colspan="4">
    > >     <asp:panel...

    >
    > > Hope this helps

    >
    > > .- Hide quoted text -

    >
    > - Show quoted text -


    oh, sorry, there are 9.

    Did you try <td colspan="9"> ?
     
    Alexey Smirnov, Oct 21, 2009
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dm1608
    Replies:
    1
    Views:
    1,617
    Eliyahu Goldin
    Feb 19, 2006
  2. Dennis M. Marks

    CSS Heading Width Question

    Dennis M. Marks, Apr 2, 2004, in forum: HTML
    Replies:
    5
    Views:
    610
    Dennis M. Marks
    Apr 2, 2004
  3. Replies:
    0
    Views:
    939
  4. Carl Howarth

    DG Column Width vs Table Column Width

    Carl Howarth, Oct 22, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    271
    Eliyahu Goldin
    Oct 24, 2004
  5. Replies:
    1
    Views:
    1,540
Loading...

Share This Page