Styling the GridView

Last post 12-13-2009 5:48 AM by bartekm. 6 replies.

Sort Posts:

  • Styling the GridView

    06-21-2006, 1:32 PM
    • Member
      732 point Member
    • amrinders87
    • Member since 06-08-2005, 9:48 PM
    • CA
    • Posts 151
    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
    • All-Star
      86,764 point All-Star
    • ecbruck
    • Member since 12-30-2005, 7:39 PM
    • Des Moines, IA
    • Posts 9,209
    • Moderator

    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
    • Member
      732 point Member
    • amrinders87
    • Member since 06-08-2005, 9:48 PM
    • CA
    • Posts 151
    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
    • Member
      45 point Member
    • stuckish
    • Member since 07-02-2002, 3:18 AM
    • Sweden
    • Posts 30
    Thanx for this tips!
  • Email [Email] Re: Styling the GridView

    06-08-2009, 1:59 AM
    • Member
      2 point Member
    • prashant_1312
    • Member since 06-08-2009, 5:47 AM
    • Mumbai
    • Posts 1

    Thanks for GridView styles ED,

    from,

    Prashant_1312 sr. web desinger, cnpl, mumbai.

    Thanks & Regards,

    Prashant_1312
    sr. web designer, cnpl, mumbai.
  • Re: Styling the GridView

    12-13-2009, 12:33 AM
    • Member
      25 point Member
    • LtCmdrData
    • Member since 11-29-2009, 6:11 PM
    • Posts 17

    Thanks so much. This help me out of a jam.  Laughing 

    Data
    ----------------------------------------------------
    Please remember to click “Mark as Answer” on the post(s) that help(s) you even if they were for the same person.
    Also remember to close the thread by selecting “Resolved”,you will find it in your first post.
  • Re: Styling the GridView

    12-13-2009, 5:48 AM
    • Member
      154 point Member
    • bartekm
    • Member since 05-01-2007, 7:50 AM
    • Sydney
    • Posts 56

    This link may help you as well:

    Creating a great looking Gridview with filtering

    ASP.NET Development Blog:
    http://blog.evonet.com.au
Page 1 of 1 (7 items)