Page view counter

Styling the GridView

Last post 06-08-2009 1:59 AM by prashant_1312. 4 replies.

Sort Posts:

  • Styling the GridView

    06-21-2006, 1:32 PM
    • Loading...
    • amrinders87
    • Joined on 06-08-2005, 9:48 PM
    • CA
    • Posts 151
    • Points 732
    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?
  • Re: Styling the GridView

    06-21-2006, 2:31 PM
    • Loading...
    • ecbruck
    • Joined on 12-30-2005, 2:39 PM
    • Des Moines, IA
    • Posts 9,159
    • Points 85,497
    • Moderator
      TrustedFriends-MVPs

    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.
    Thanks, Ed

    Microsoft MVP - ASP/ASP.NET

  • Re: Styling the GridView

    06-21-2006, 2:40 PM
    • Loading...
    • amrinders87
    • Joined on 06-08-2005, 9:48 PM
    • CA
    • Posts 151
    • Points 732
    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

    10-12-2006, 9:33 AM
    • Loading...
    • stuckish
    • Joined on 07-02-2002, 3:18 AM
    • Sweden
    • Posts 30
    • Points 45
    Thanx for this tips!
  • Email [Email] Re: Styling the GridView

    06-08-2009, 1:59 AM
    • Loading...
    • prashant_1312
    • Joined on 06-08-2009, 1:47 AM
    • Mumbai
    • Posts 1
    • Points 2

    Thanks for GridView styles ED,

    from,

    Prashant_1312 sr. web desinger, cnpl, mumbai.

    Thanks & Regards,

    Prashant_1312
    sr. web designer, cnpl, mumbai.
Page 1 of 1 (5 items)