GXT - How to set the grid cell background color

Question

I want to change background color of a cell in GXT Grid, I am using GXT 3.0 .I have got one link which is related to my query( http://ui-programming.blogspot.in/2010/01/gxt-how-to-set-cell-grid-background.html) but setRenderer method is not present columnConfig in GXT 3.0 .How can i get desired output? pLz help.

Code i have done till now:-

ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
changeCol.setCell(new AbstractCell<Double>() {

    @Override
    public void render(Context context, Double value, SafeHtmlBuilder sb) {
          if (value == null) {
                return;
              }
   store.get(context.getIndex());
          GWT.log(DOM.getCaptureElement().getId());
      String style = "style='background-color: " + (value < 0 ? "red" : "green") + "'";
      String v = number.format(value);
       sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
    }
  });

duplicate : http://stackoverflow.com/questions/10632458/how-to-add-css-to-selected-row-in-treegrid-gxt-3 — willome, Apr 17 '13 at 15:09
thanx for rply willome ,The link explains about GridCellRenderer , I am using GXT 3.0 how can i use setCell and AbstractCellRenderer in order to get the output? — Apurva, Apr 18 '13 at 13:47

score 1 · Answer 1 · answered Jul 31 '14 at 00:48

For those that need to change cell colour based on data in the grid, I've just had to do this (GXT 3.1) but unfortunately the solution isn't perfect.

In general, one can do custom cell rendering with ColumnConfig.setCell(MyCell) where 'MyCell' is a subclass of AbstractCell. Unfortunately there is the problem of 'padding' in the host 'div' which isn't coloured. There are a few ways around this...

The simplest way is to:

ColumnConfig.setCellPadding(false)
Render your own coloured divs that fill up the whole cell (with padding if desired)

Unfortunately this doesn't play well with single cell selection (CellSelectionModel). The css class for cell selection is obfuscated so it can't be referenced in other stylesheets. :(

My (ugly) alternative was to render a custom stylesheet that is linked in the module's html page (eg. Main.html). Then I can colour cells using css 'class' instead of 'style' attributes. IE:

Create a custom JSP that renders a stylesheet (content type 'text/css')
Link the stylesheet to the module html (after 'reset.css')
The stylesheet needs to have selector td.someClass (.someClass is not specific enough)
Use Grid.getView().setViewConfig() to supply a GridViewConfig that returns the appropriate class(es)

Unfortunately this requires a good knowledge of CSS rules and also the possible colours need to be known at user login time.

There may be a third way using the style attribute of the 'td' element. Have a look at this issue from Sencha: http://www.sencha.com/forum/showthread.php?289347-Influencing-cell-td-style-in-a-grid&p=1057079 (work in progress)

Note that other styling options include:

Various ColumnConfig.setXxxClassName()
Various ColumnConfig.setXxxStyle()

GXT - How to set the grid cell background color

1 Answers1