Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Match width of column heading in row with GridView BoundFields in

Reply
Thread Tools

Match width of column heading in row with GridView BoundFields in

 
 
JB
Guest
Posts: n/a
 
      10-20-2009
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>
<aspanel 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}"
HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
Time" SortExpression="Caller2 Time" DataFormatString="{0}"
HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
<asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
Time" SortExpression="ResolvedDateTime" DataFormatString="{0}"
HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
</Columns>
</asp:GridView>
</aspanel>
</td>
</tr>
</table>

JB







--
JB
 
Reply With Quote
 
 
 
 
Alexey Smirnov
Guest
Posts: n/a
 
      10-21-2009
On Oct 21, 12:12*am, JB <(E-Mail Removed)> 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>
> * * <aspanel 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}"
> HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> * * * * * * <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
> Time" SortExpression="Caller2 Time" DataFormatString="{0}"
> HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
> * * * * * * <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
> Time" SortExpression="ResolvedDateTime" DataFormatString="{0}"
> HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> * * * * * * </Columns>
> * * * * *</asp:GridView>
> * * </aspanel> * * *
> * * </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>
<aspanel.....

or define colspan attribute for the second row's cell

<tr>
<td colspan="4">
<aspanel...

Hope this helps

 
Reply With Quote
 
 
 
 
JB
Guest
Posts: n/a
 
      10-21-2009
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 <(E-Mail Removed)> 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>
> > <aspanel 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}"
> > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> > <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
> > Time" SortExpression="Caller2 Time" DataFormatString="{0}"
> > HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
> > <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
> > Time" SortExpression="ResolvedDateTime" DataFormatString="{0}"
> > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> > </Columns>
> > </asp:GridView>
> > </aspanel>
> > </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>
> <aspanel.....
>
> or define colspan attribute for the second row's cell
>
> <tr>
> <td colspan="4">
> <aspanel...
>
> Hope this helps
>
> .
>

 
Reply With Quote
 
Alexey Smirnov
Guest
Posts: n/a
 
      10-21-2009
On Oct 21, 4:16*pm, JB <(E-Mail Removed)> 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 <(E-Mail Removed)> 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>
> > > * * <aspanel 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}"
> > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> > > * * * * * * <asp:BoundField DataField="Caller2 Time" HeaderText="Caller2
> > > Time" SortExpression="Caller2 Time" DataFormatString="{0}"
> > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left"/>
> > > * * * * * * <asp:BoundField DataField="Caller3 Time" HeaderText="Caller3
> > > Time" SortExpression="ResolvedDateTime" DataFormatString="{0}"
> > > HtmlEncode="false" ItemStyle-HorizontalAlign="Left" />
> > > * * * * * * </Columns>
> > > * * * * *</asp:GridView>
> > > * * </aspanel> * * *
> > > * * </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>
> > <aspanel.....

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

>
> > <tr>
> > * * <td colspan="4">
> > * * <aspanel...

>
> > Hope this helps

>
> > .- Hide quoted text -

>
> - Show quoted text -


oh, sorry, there are 9.

Did you try <td colspan="9"> ?
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Resize Gridview width (not column width) based on size of databrought back. Hartman_Ralph@Hotmail.com ASP .Net Web Controls 1 06-13-2009 10:21 AM
Dynamically Resize Gridview Width Property (NOT Column Width) Hartman_Ralph@Hotmail.com ASP .Net 0 06-02-2009 03:59 PM
GridView ASP.NET 2.0 Column Heading Justification dm1608 ASP .Net 1 02-19-2006 09:33 AM
DG Column Width vs Table Column Width Carl Howarth ASP .Net Datagrid Control 1 10-24-2004 08:48 AM
CSS Heading Width Question Dennis M. Marks HTML 5 04-02-2004 03:13 PM



Advertisments