how to add css to selected row in treegrid GXT 3 - css

Question

I created a treegrid using GXT 3.now iwant to change background color of selected row and also i want to change the background of root node(leaf row i.e Parent row).
iam using GXT 3.0 and eclipse 3.7
Thanks in advance

Answer 1

I was also having the same problem, I wanted to color the background of a row depending on some condition. In the end, I found a solution:
You need to create a GridViewConfig and override the getColumnStyle method to return the color want, it took me a while to find out, but overriding the getRowStyle method doesn't do the trick, at least not for me.
grid.getView().setViewConfig(new GridViewConfig<Model>() {
#Override
public String getColStyle( Model model,
ValueProvider<? super Model, ?> valueProvider,
int rowIndex, int colIndex)
{
if ("Other2".equals(model.getName())){
return "bold";
}else if ("Other".equals(model.getName())){
return "red-row";
}
return null;
}
#Override
public String getRowStyle(Model model, int rowIndex) {
return null;
}
});
Note: Modify CSS file accordingly.

Answer 2

I think it is the same with GXT 2.x
Just add your own CellRenderer on your ColumnConfig :
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
ColumnConfig levelColumnConfig = new ColumnConfig("level", "Level", 50);
levelColumnConfig.setRenderer(getGridCellRenderer());
columns.add(levelColumnConfig);
ColumnModel cm = new ColumnModel(columns);
private GridCellRenderer<BeanModel> getGridCellRenderer() {
if (gridCellRenderer == null) {
gridCellRenderer = new GridCellRenderer<BeanModel>() {
#Override
public Object render(BeanModel model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<BeanModel> store, Grid<BeanModel> grid) {
//add some logic for example
String color = "#000000";
MyBean mybean = (MyBean) model.getBean();
switch (mybean.getLevel()) {
case TRACE:
color = "#f0f0f0";
break;
default:
color = "#000000";
}
// add some background-color
config.style = config.style + ";background-color:" + color + ";";
Object value = model.get(property);
return value;
}
};
}
return gridCellRenderer;
}

Answer 3

I found out that you also can adjust CSS like this:
grid.getCellFormatter().addStyleName(0, colNo - 1, MC_GWT.MC_STYLE_VERTICAL_ICON_HOLDER);
It's a little easier i think :) Especially when you want to style the , f.e. alignment of icons inside of it. In my case i needed to display icons in a vertical row. So i needed to change the Cells display to 'block';