PDA

View Full Version : [CLOSED] how can I set the background color of the row in gridpanel ?



GavinLou
Mar 06, 2014, 7:30 AM
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
Mar 06, 2014, 8:38 AM
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
Mar 06, 2014, 10:38 AM
Hi everybody,

One additional comment here. I would recommend not to use "!important" if possible. It is a bad practice.
http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

The absolute majority of CSS overrides are possible without that.