CODEWITHSUNDEEP
cssgridviewwebforms
auwall12688
auwall12688

Reputation: 409

Styling a GridView's rows and cells with CSS

I want to use CSS to format my GridView rows.

I've set up my GridView in the aspx like so:

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

I set and bind the data source in the code-behind by calling a method to get my data set from a data access layer.

However, because I set the datasource programmatically, the rows and cells have no id attributes.

How can you use CSS to style and format those rows and cells?

This is the HTML generated currently:

<div>
    <table cellspacing="0" rules="all" border="1" id="ContentPlaceHolderHome_GridView1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">Date</th><th scope="col">Project</th><th scope="col">Amount</th>
        </tr><tr>
            <td>1/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1000.99</td>
        </tr><tr>
            <td>2/1/2011 12:00:00 AM</td><td>ABC Company</td><td>1001.99</td>
        </tr><tr>
            <td>1/3/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1002.99</td>
        </tr><tr>
            <td>4/1/2011 12:00:00 AM</td><td>MY COMPANY</td><td>1003.99</td>
        </tr>
    </table>
</div>

Upvotes: 0

Views: 18994

Answers (5)

Colin Pear
Colin Pear

Reputation: 3100

There are a couple ways you can apply row style to a gridview.

1) In the code behind you can apply styles and such on RowDatabound.

2) In between the gridview tags you can use the: 

<asp:GridView ID="GridView1" runat="server"> 
<rowstyle CssClass="myClass" />
<alternatingrowstyle CssClass="myClass" />
</asp:GridView>

See this page for more detail.

Upvotes: 2

Theo
Theo

Reputation: 2799

You can use the properties window to set the CssClass property to use a class from a CSS. Or you can simple set the fonts and colors instead using the same properties window.

GridView Properties

Upvotes: 1

p.campbell
p.campbell

Reputation: 100577

Modify your grid to include each column. Apply the ItemStyle-CssClass attribute.

<asp:GridView runat="server" AutoGenerateColumns="false" ID="fooGrid" >
    <Columns> 
     <asp:BoundField  ItemStyle-CssClass="fooBarBat"  
                      DataField="MyDataFieldName" HeaderText="Bar" />     
    </Columns>
</asp:GridView>

Upvotes: 1

khaled_webdev
khaled_webdev

Reputation: 1430

use selector like this

  <style>
    #ContentPlaceHolderHome_GridView1 td {
     background : #ccc;
   }
  </style>

Upvotes: 4

Funky Dude
Funky Dude

Reputation: 3967

in gridview you can set attributes called HeaderCSSClass and CSSClass(not sure about the names, could be wrong. google them).

Upvotes: 0

Related Questions