PDA

View Full Version : Treegrid - modify text style for some rows



david.ln
19 Sep 2012, 1:00 AM
Hello,

I'm trying to change row style in a treegrid only for some rows.
Based on some logic, I want to gray the text and/or make it italic.
I found some posts for background colors but not for text.

I first tried to override render in TreeGridCellRenderer:



@Override
public Object render(final ModelData model, String property, final ColumnData config,
final int rowIndex, final int colIndex, ListStore<ModelData> store, final Grid<ModelData> grid) {

Scheduler.get().scheduleDeferred(new ScheduledCommand() {

@Override
public void execute() {
if(model != null) {

Object myBoolean = model.get("myboolean");
if(myBoolean != null && ((Boolean)myBoolean)) {
grid.getView().getRow(rowIndex).getStyle().setColor("gray");
//here I cannot find any way to set the text as italic for the row
// I also trid with config.style=".." but it seems to work cell only for backgroud color
}

}

}
});

return super.render(model, property, config, rowIndex, colIndex, store, grid);
}


This works for the "color" attribute. (note that I had to remove color:black from gxt css for x-tree3-node-text)
but using the deferred command create a tiny - but visible - latency in style update.

Then I tried to use a GridViewConfig


tree.getView().setViewConfig(new GridViewConfig(){

StringBuilder sb = new StringBuilder();

if(model != null) {

Object myBoolean = model.get("myboolean");
if(myBoolean != null && ((Boolean)myBoolean)) {
sb.append(" inactive"); // css : .inactive { color:gray; }
}

Object myBoolean2 = model.get("myboolean2");
if(myBoolean2 != null && ((Boolean)myBoolean2)) {
sb.append(" noSelectable"); // .noSelectable { font-style:italic; }
}
}
});

return super.render(model, property, config, rowIndex, colIndex, store, grid);
}



This works better (no latency) for the gray color but still not for italic.
The style applies on <tr> (in firebug) but seems to be overriden by text style of the cells (?). The computed style is italic for text from row start <div> to the first <td> in which it is normal.

For this <td> in firebug, if i remove (even just the 11px)


.x-grid3-hd-row .x-grid3-hd, .x-grid3-row .x-grid3-cell, .x-grid3-summary-row .x-grid3-cell {
font: 11px arial,tahoma,helvetica,sans-serif;
}

I got italic on all columns of the required row but not for the tree cell. And the text lose its size ...
I cannot find any css to remove or add to have the tree cell in italic ...

I think I saw something about using a widget renderer for the tree cell styling but it makes too much code for a so simple use case. So I didn't try.

What should I do ? I really miss CSS skill and I guess I'm not so far of the solution ...
Should I remove the text style for cells (how ?)

Hope someone will have an idea !

Regards

David

david.ln
19 Sep 2012, 10:32 PM
Hello,

I finally managed to change the font style of the row with GridViewConfig but I had to modify the css


.x-grid3-hd-row .x-grid3-hd,.x-grid3-row .x-grid3-cell,.x-grid3-summary-row .x-grid3-cell {
/*font: normal 11px arial, tahoma, helvetica, sans-serif;*/
font-size:11px;
}

.x-tree3-node-text {
/*font: normal 11px arial, tahoma, helvetica, sans-serif;*/
/*color: black;*/
}

Is there a cleaner way to achieve that ?
Can I override these styles differently or somewhere else ?