Gridview caption style

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

S. Justin Gengo

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
 
T

Tim Cartwright

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

S. Justin Gengo

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
 
T

Tim Cartwright

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;
}
 
S

S. Justin Gengo

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;
}
 
T

Tim Cartwright

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;
}
 
Joined
Jan 3, 2008
Messages
1
Reaction score
0
Need Help with Styling gridviews

Mr Tim Cartwright,

Thank you fro your post. I really appreciate it. I was wondering if you had any suggestions for my problem.

I have a gridview and i have assigned a CssClass for it to display data. But, for one of the columns, i want to have the itemstyle as horizontal-align.

But, it looks like the the gridview cssclass overrides the itemstyle definition and if i remove the cssclass for the gridview, the column becomes center aligned.

But, i would like to have both exist.

Here is the code:

<asp:GridView ID="GridView1" runat="server" CssClass="calculationResults" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Relationship" DataField="RelationshipText" />
<asp:BoundField HeaderText="Percentage" DataField="Percent" />
<asp:BoundField HeaderText="Primary" DataField="Primary" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" />

</Columns>
</asp:GridView>

Any help will be greatly appreciated.

Thanks,
BD.
 
Joined
Dec 18, 2008
Messages
1
Reaction score
0
Quick and dirty way of setting the Caption font

In design view for the GridView, enter the following in the Caption property:

<div style="font-weight: bold">Caption text</div>

where "Caption text" is the desired text, and the required style is specified as attributes to the <div>. I just needed to make the caption bold. Strangely, there seems to be no obvious way of doing this directly via the control's properties.

In source view, the above translates to:

Caption="&lt;div style=&quot;font-weight: bold&quot;&gt;Caption text&lt;/div&gt;"

Thanks to jjbrooks13 for the idea - this is a simplified version, using a <div> instead of <table><tr><td>.

Noel
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top