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:

http://gwt-ext.com/docs/2.0.4/com/gwtext/client/widgets/grid/GridView.html 

A related topic on setting the background colour:

http://www.gwt-ext.com/forum/viewtopic.php?f=5&t=2964 


Advertisements
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;
    }

    @Override
    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 = config.style.indexOf(“;”);
    config.style = config.style.substring(0, 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())) {
    config.style += “background-color:yellow;”;
    } else {
    config.style += “background-color:white;”;
    }
    }

    return “” + valeur + “”;
    }

    }

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s