Gridview caption style

  • Thread starter Thread starter Tim Cartwright
  • Start date Start date
T

Tim Cartwright

I am trying to figure out how to change the gridview caption style, but I
can not figure out how. I added

table caption {
background-color: #5D7B9D;
color: White;
font-size: 16pt;
}

to my CSS, yet when the page renders, the grids style take precendence, as
it becomes an inline style.
 
Tim,

Remove the in-line style. And set all the grid's styling with your style
sheet.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
 
Hmmmm, what I figured, but not an option that I cared for. IMHO the caption
style should be configurable through the skin OR the css. Looks like a
uh-uh, missed that one to me.
 
Tim,

Don't rule it out yet. I'm hoping someone else who's used the new 2.0
version chimes in here.

I'm not positive that my suggestion is the only way to do this, but it's the
only way I know of so far...

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
 
Actually, I figured out a compromise. Here is the gridview format in the skin file :

<asp:GridView runat="server" CssClass="tableView" CellPadding="1" AutoGenerateColumns="False" EmptyDataText="no data">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass=".tableFooter" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

The gridview tag actually only sets the class name. Then in the css :

..tableView {
color:#333333;
border-collapse:separate;
white-space:nowrap;
}
..tableView caption {
background-color: #5D7B9D;
color: White;
font-size: 16pt;
font-weight:bold;
}
 
Tim,

Very cool. Thanks for letting us know.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
Actually, I figured out a compromise. Here is the gridview format in the skin file :

<asp:GridView runat="server" CssClass="tableView" CellPadding="1" AutoGenerateColumns="False" EmptyDataText="no data">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass=".tableFooter" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

The gridview tag actually only sets the class name. Then in the css :

.tableView {
color:#333333;
border-collapse:separate;
white-space:nowrap;
}
.tableView caption {
background-color: #5D7B9D;
color: White;
font-size: 16pt;
font-weight:bold;
}
 
Actually, I converted all of the styles to css classes because of the fact that the styles generated from the skin become inline styles in the grid output, really bloating the size of the grid html output.Thus I would only control the class name from the skin file. Here is my changes :

SKIN FILE:
<asp:GridView runat="server" CssClass="tableView" GridLines="None" AutoGenerateColumns="False" EmptyDataText="no data">
<HeaderStyle CssClass="tableViewHeader" />
<FooterStyle CssClass="tableViewFooter" />
<RowStyle CssClass="tableViewRow" />
<EditRowStyle CssClass="tableViewEditRow" />
<SelectedRowStyle CssClass="tableViewSelectedRow" />
<PagerStyle CssClass="tableViewPager" />
<AlternatingRowStyle CssClass="tableViewAlternatingRow" />
</asp:GridView>

CSS:

..tableView {
color:#333333;
border-collapse:collapse;
white-space:nowrap;
}
..tableView caption {
background-color: #5D7B9D;
color: White;
font-size: 16pt;
font-weight:bold;
}
..tableView td{
padding-right: 3px;
white-space:nowrap;
}
..tableViewHeader, .tableViewFooter{
background-color:#5D7B9D;
color:White;
font-weight:bold;
}
..tableViewRow{
background-color:#F7F6F3;
color:#333333;
}
..tableViewEditRow{
background-color:#999999;
}
..tableViewSelectedRow{
background-color:#E2DED6;
font-weight:bold;
color:#333333;
}
..tableViewPager{
background-color:#284775;
color:White;
text-align:center;
}
..tableViewAlternatingRow{
background-color:White;
color:#284775;
}
Tim,

Very cool. Thanks for letting us know.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
Actually, I figured out a compromise. Here is the gridview format in the skin file :

<asp:GridView runat="server" CssClass="tableView" CellPadding="1" AutoGenerateColumns="False" EmptyDataText="no data">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" CssClass=".tableFooter" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>

The gridview tag actually only sets the class name. Then in the css :

.tableView {
color:#333333;
border-collapse:separate;
white-space:nowrap;
}
.tableView caption {
background-color: #5D7B9D;
color: White;
font-size: 16pt;
font-weight:bold;
}
 
Back
Top