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

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:

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

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

<Style type="text/css">
background: blue;
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?

Mar 06, 2014, 8:38 AM
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 type="text/css">
tr.red-grid-row .x-grid-cell {
background: blue;

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.

The absolute majority of CSS overrides are possible without that.