Match width of column heading in row with GridView BoundFields in

  • Thread starter Thread starter JB
  • Start date Start date
J

JB

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
 
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 onthe
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  
Click to expand...

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











- Show quoted text -
Click to expand...

oh, sorry, there are 9.

Did you try <td colspan="9"> ?
 
Back
Top