Background colour for GWT-Ext Grid row

Here I describe how to set the background colour of a GWT-Ext grid row. A simple use of this would be to highlight a row containing errors.

You would need to attach a GridView instance to the grid. 

private EditorGridPanel grid;

private GridView gridView


1. Instantiate and initialize the grid

2. Initialize the GridView

3. Set the GridView instance to the grid by calling: grid.setView(gridView);

The below lines of code actually set the background color of a particular row to red colour

int rowIndex = grid.getStore().indexOf(record); //where record is the selected Record instance that needs to be highlighted
Element currentRow = gridView.getRow(rowIndex); //get the GWT Element instance for the row
currentRow.getStyle().setProperty(“backgroundColor”“red”); //set the colour

You can also highlight a particular cell. You would need to get a reference to the particular cell using gridView.getCell(rowIndex, colIndex) method.

GridView API: 

A related topic on setting the background colour: 

This entry was posted in GWT, GWT-Ext and tagged , , . Bookmark the permalink.

5 Responses to Background colour for GWT-Ext Grid row

  1. Stefano says:

    very useful, thanks a lot!

  2. Erwan says:

    How do you Initialize the GridView ?
    My currentRow is always null…

  3. Erwan says:

    I’ve found another solution. This works very well :

    public class GridCellTooltypeDebit implements GridCellRenderer {
    protected MagellanGWT gui;

    public GridCellTooltypeDebit() {

    public GridCellTooltypeDebit(final MagellanGWT gui) {
    this.gui = gui;

    public String render(final CompteModel model, final String property, final ColumnData config, final int rowIndex, final int colIndex, final ListStore store,
    final Grid grid) {
    final String valeur = model.get(property);
    final String iban = model.get(Resources.MESSAGES.colcompteiban());
    final String ibanFormatte = Formatter.getIbanAffichage(iban);

    final int indice =“;”); =, indice + 1);

    if (this.gui != null) {
    final Compte compteDebit = this.gui.getApplicationContext().getCompteDebit() == null ? new Compte() : this.gui.getApplicationContext().getCompteDebit();

    if (iban.equals(compteDebit.getIban())) { += “background-color:yellow;”;
    } else { += “background-color:white;”;

    return “” + valeur + “”;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s