[CLOSED] how can I set the background color of the row in gridpanel ?

[GavinLou]

I have a grid panel , and I want to set the background color of the row by adding this in the gridpanel:

<View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="True" StripeRows="True">
                        <GetRowClass Fn="getRowClass" />                       
                    </ext:GridView>
                </View>

function getRowClass(record, rowIndex, rowParams, store) {
            return "red-grid-row";
        }

<Style type="text/css">
            .red-grid-row{
                background: blue;
            }
        </Style>

but when I browser the gridpanel I find the css: 'red-grid-row' has been added to the tag <tr>, it likes :

<tr class="x-grid-row red-grid-row ">

but this doesn't work , the background color of the row is still white, because the css:red-grid-row is covered by the css of cell:

.x-grid-row .x-grid-cell {
color: null;
font: normal 11px/15px tahoma,arial,verdana,sans-serif;
background-color: white;
border-color: #ededed;
border-style: solid;
border-top-color: #fafafa;
border-width: 0;
}

so can you tell how can i define the background color of the row in gridpanel?

[Zdenek]

Hello
I think you just need to modify your CSS rule so it has right importance ( I think it's called specificity), like

<Style type="text/css">
            .red-grid-row .x-grid-cell {
                background: blue !important;
            }
        </Style>

or

<Style type="text/css">
            tr.red-grid-row .x-grid-cell {
                background: blue;
            }
        </Style>

[Daniil]

Hi everybody,

One additional comment here. I would recommend not to use "!important" if possible. It is a bad practice.
http://stackoverflow.com/questions/3...portant-in-css

The absolute majority of CSS overrides are possible without that.