Data Presentation Controls

Re: Styling the GridView

prashant_1312 — Mon, 08 Jun 2009 05:59:08 GMT

Thanks for GridView styles ED,

from,

Prashant_1312 sr. web desinger, cnpl, mumbai.

Re: Styling the GridView

stuckish — Thu, 12 Oct 2006 13:33:39 GMT

Thanx for this tips!

Re: Styling the GridView

amrinders87 — Wed, 21 Jun 2006 18:40:56 GMT

Well, the rowstyle defines the style for the tr but I need to style the td. I know how do specify the class for the td but I have to do it for everty node in columns.

I was able to solve this issue in my css file. I first specified a css class for RowStyle and AlternatingRowStyle. Then in the css I created a new style like this

.GridViewRowStyle td, .GridViewAlternatingRowStyle td
{
    /* style for the td*/
}

The reason I wanted to this was because the way asp.net renders the GridView, it does not look the same in all browsers. So I wanted to skin it using pure css so it would look the same in all browsers and now it does. Below is the css code and the skin code that I used if anyone else is having this issue.

.GridViewStyle
{
    border-right: 2px solid #A7A6AA;
    border-bottom: 2px solid #A7A6AA;
    border-left: 2px solid white;
    border-top: 2px solid white;
    padding: 4px;
}

.GridViewStyle a
{
    color: #FFFFFF;
}

.GridViewHeaderStyle th
{
    border-left: 1px solid #EBE9ED;
    border-right: 1px solid #EBE9ED;
}

.GridViewHeaderStyle
{
    background-color: #5D7B9D;
    font-weight: bold;
    color: White;
}

.GridViewFooterStyle
{
    background-color: #5D7B9D;
    font-weight: bold;
    color: White;
}

.GridViewRowStyle
{
    background-color: #F7F6F3;
    color: #333333;
}

.GridViewAlternatingRowStyle
{
    background-color: #FFFFFF;
    color: #284775;
}

.GridViewRowStyle td, .GridViewAlternatingRowStyle td
{
    border: 1px solid #EBE9ED;
}

.GridViewSelectedRowStyle
{
    background-color: #E2DED6;
    font-weight: bold;
    color: #333333;
}

.GridViewPagerStyle
{
    background-color: #284775;
    color: #FFFFFF;
}

.GridViewPagerStyle table /* to center the paging links*/
{
    margin: 0 auto 0 auto;
}

Skin file:
<asp:GridView CssClass="GridViewStyle" runat="server" >
    <FooterStyle CssClass="GridViewFooterStyle" />
    <RowStyle CssClass="GridViewRowStyle" />
    <SelectedRowStyle CssClass="GridViewSelectedRowStyle" />
    <PagerStyle CssClass="GridViewPagerStyle" />
    <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
    <HeaderStyle CssClass="GridViewHeaderStyle" />
</asp:GridView>

Re: Styling the GridView

ecbruck — Wed, 21 Jun 2006 18:31:45 GMT

Doesn't GridView.RowStyle accomplish the same thing? If all of the items in a row are formatted the same, then I would just set class of the <RowStyle> tag as so:

<asp:gridview runat="server" cellpadding="5" cssclass="GridView" gridlines="None">
	<headerstyle cssclass="GridViewHeader" forecolor="#ffffff" verticalalign="Bottom" />
	<rowstyle cssclass="GridViewRow" verticalalign="Top" />
	<alternatingrowstyle cssclass="GridViewAlternatingRow" verticalalign="Top" />
	<editrowstyle cssclass="GridViewEditRow" verticalalign="Top" />
	<selectedrowstyle cssclass="GridViewSelectedRow" verticalalign="Top" />
	<footerstyle cssclass="GridViewFooter" />
	<pagerstyle cssclass="GridViewPager" />
</asp:gridview>

If you're wanting to format the BoundFields differently than the TemplateFields then I don't know.

Styling the GridView

amrinders87 — Wed, 21 Jun 2006 17:32:18 GMT

Is there anyway to set the BoundField's ItemStyle-CssClass using Skin file? Because now I have to set it in my aspx page for each <asp:BoundField ItemStyle-CssClass="className"...

But how can I specify it in the Skin file so I dont have to do it for each BoundField of every GridView?