Changing row color on selection

[smiletolead]

Hi all,
I am coloring rows using grid cell rendering. The color in grid cell renderer is applied as follows:


GridCellRenderer<Post> gridCellRenderer = new GridCellRenderer<Post>() {
@Override
public Object render(Post model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<Post> store, Grid<Post> grid) {
if (model.getRowColor() != null)
// Model is having row color property
config.style = "background-color:" + model.getRowColor() + ";";
else
config.style = "";
return model.get(property);
}
};

The model Post is from the GXT sample code.

I want to remove this coloring on selection. That is, on selection, GXT's row selection color should be shown for all the rows including colored rows. I am removing this background color for colored rows by extending GridView. But for reason it is not working. Can you please tell me why it is not working. Below is the extended GridView class


import com.extjs.gxt.ui.client.widget.grid.BufferView;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
import com.google.gwt.dom.client.TableCellElement;
import com.google.gwt.dom.client.TableElement;

public class CustomGridView extends BufferView {
@Override
protected void onRowSelect(int rowIndex) {
super.onRowSelect(rowIndex);
Element row = getRow(rowIndex);
TableElement table = (TableElement) row.getFirstChildElement();
NodeList<TableCellElement> tds = table.getTBodies().getItem(0).getRows().getItem(0).getCells();
for (int i = 0; i < tds.getLength(); i++) {
TableCellElement td = tds.getItem(0);
String rowColor = (String) grid.getStore().getAt(rowIndex).getProperties().get("rowColor");
if (rowColor != null) {
td.getStyle().setProperty("backgroundColor", "transparent");
}
}
}
}

The version of GXT I am using is 2.0.1

Thanks,
Ganesh

[Arno.Nyhm]

maybe you set the background on different dom elements.

but i think you can do this more easy with the css

use the css style for a selected row "x-grid3-row-selected " and then make it overwriting all set css with the "!important". dont forget, that you need also to add a sub dom element for .x-grid3-cell to the css to get it working for some subitem


also add a own class my-color-item to your grid so not every grid in your application use this css.

look at this:



.my-color-grid .x-grid3-row-selected .x-grid3-cell{
background-color: #DFE8F6 !important;
background-image: none !important;
}