Grid with highlighting

ExampleResources.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface ExampleResources extends ClientBundle {
  public ExampleResources INSTANCE = GWT.create(ExampleResources.class);

  public interface Styles extends CssResource {
    String highlight();
  }

  public Styles styles();
}

GXT_Grid_with_RowHightlighter.java

import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.editor.client.Editor.Path;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.util.DateWrapper;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.PropertyAccess;
import com.sencha.gxt.data.shared.StringLabelProvider;
import com.sencha.gxt.state.client.GridStateHandler;
import com.sencha.gxt.test.client.resources.ExampleResources;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.Resizable;
import com.sencha.gxt.widget.core.client.Resizable.Dir;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.button.ToolButton;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.event.CollapseEvent;
import com.sencha.gxt.widget.core.client.event.CollapseEvent.CollapseHandler;
import com.sencha.gxt.widget.core.client.event.ExpandEvent;
import com.sencha.gxt.widget.core.client.event.ExpandEvent.ExpandHandler;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import com.sencha.gxt.widget.core.client.form.SimpleComboBox;
import com.sencha.gxt.widget.core.client.grid.CellSelectionModel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridSelectionModel;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.selection.CellSelectionChangedEvent;
import com.sencha.gxt.widget.core.client.selection.CellSelectionChangedEvent.CellSelectionChangedHandler;
import com.sencha.gxt.widget.core.client.tips.QuickTip;
import com.sencha.gxt.widget.core.client.tips.ToolTipConfig;
import com.sencha.gxt.widget.core.client.toolbar.LabelToolItem;
import com.sencha.gxt.widget.core.client.toolbar.ToolBar;

public class GXT_Grid_with_RowHightlighter {
  private static int COUNTER = 0;
  private static final StockProperties props = GWT.create(StockProperties.class);
  private ContentPanel panel;
  private Grid<Stock> grid;
  private ListStore<Stock> store;
  private ArrayList<ColumnConfig<Stock, ?>> columns;

  public GXT_Grid_with_RowHightlighter() {
    
    ExampleResources.INSTANCE.styles().ensureInjected();

    TextButton button = new TextButton("Highlight");
    RootPanel.get().add(button);
    button.addSelectHandler(new SelectHandler() {
      @Override
      public void onSelect(SelectEvent event) {
        highlightRow();
      }
    });
    
    RootPanel.get().add(createGrid());

    
    grid.getElement().getStyle().setBackgroundColor("yellow");
  }

  private void highlightRow() {
    Stock item = store.get(3);
    
    final GridView<Stock> gridView = grid.getView();
    // get the row element for the item
    Element rowElement = gridView.getRow(item);
    // get the row index for the item
    final int rowIndex = gridView.findRowIndex(rowElement);
    
    // get the highlight style from a client bundle
    final String highlight = ExampleResources.INSTANCE.styles().highlight();
    
    // add the highlight style to the cells 
    for (int col=0; col < columns.size(); col++) {
      Element cellElement = gridView.getCell(rowIndex, col);
      cellElement.addClassName(highlight);
    }
    
    // remove the highlight style after the animation
    Timer t = new Timer() {
      @Override
      public void run() {
        for (int col=0; col < columns.size(); col++) {
          Element cellElement = gridView.getCell(rowIndex, col);
          cellElement.removeClassName(highlight);
        }   
      }
    };
    t.schedule(5000);
  }

  private Grid<Stock> createGrid() {
    ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 50,
        SafeHtmlUtils.fromTrustedString("<b>Company</b>"));
    ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
    ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 75, "Last");
    ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
    ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");

    final NumberFormat number = NumberFormat.getFormat("0.00");
    changeCol.setCell(new AbstractCell<Double>() {
      @Override
      public void render(Context context, Double value, SafeHtmlBuilder sb) {
        String style = "style='color: " + (value < 0 ? "red" : "green") + "'";
        String v = number.format(value);
        sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
      }
    });
    lastTransCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));

    columns = new ArrayList<ColumnConfig<Stock, ?>>();
    columns.add(nameCol);
    columns.add(symbolCol);
    columns.add(lastCol);
    columns.add(changeCol);
    columns.add(lastTransCol);
    ColumnModel<Stock> cm = new ColumnModel<Stock>(columns);

    store = new ListStore<Stock>(props.key());
    store.addAll(getStocks());

    grid = new Grid<Stock>(store, cm);
    grid.getView().setAutoExpandColumn(nameCol);
    grid.getView().setStripeRows(true);
    grid.getView().setColumnLines(true);
    grid.setBorders(false);
    grid.setColumnReordering(true);
    grid.setStateful(true);
    grid.setStateId("gridExample");

    GridStateHandler<Stock> state = new GridStateHandler<Stock>(grid);
    state.loadState();

    SimpleComboBox<String> type = new SimpleComboBox<String>(new StringLabelProvider<String>());
    type.setTriggerAction(TriggerAction.ALL);
    type.setEditable(false);
    type.setWidth(100);
    type.add("Row");
    type.add("Cell");
    type.setValue("Row");
    // we want to change selection model on select, not value change which fires on blur
    type.addSelectionHandler(new SelectionHandler<String>() {
      @Override
      public void onSelection(SelectionEvent<String> event) {
        boolean cell = event.getSelectedItem().equals("Cell");
        if (cell) {
          CellSelectionModel<Stock> c = new CellSelectionModel<Stock>();
          c.addCellSelectionChangedHandler(new CellSelectionChangedHandler<Stock>() {
            @Override
            public void onCellSelectionChanged(CellSelectionChangedEvent<Stock> event) {
            }
          });
          grid.setSelectionModel(c);
        } else {
          grid.setSelectionModel(new GridSelectionModel<Stock>());
        }
      }
    });

    ToolBar toolBar = new ToolBar();
    toolBar.setEnableOverflow(false);
    toolBar.add(new LabelToolItem("Selection Mode: "));
    toolBar.add(type);

    ToolTipConfig config = new ToolTipConfig("Example Info",
        "This examples includes resizable panel, reorderable columns and grid state.");
    config.setMaxWidth(225);

    ToolButton info = new ToolButton(ToolButton.QUESTION);
    info.setToolTipConfig(config);

    VerticalLayoutContainer con = new VerticalLayoutContainer();
    con.add(toolBar, new VerticalLayoutData(1, -1));
    con.add(grid, new VerticalLayoutData(1, 1));

    panel = new ContentPanel();
    panel.setHeadingText("Basic Grid");
    // panel.getHeader().setIcon(ExampleImages.INSTANCE.table());
    panel.setPixelSize(600, 300);
    panel.addStyleName("margin-10");
    panel.addTool(info);
    panel.setWidget(con);

    final Resizable resizable = new Resizable(panel, Dir.E, Dir.SE, Dir.S);
    panel.addExpandHandler(new ExpandHandler() {
      @Override
      public void onExpand(ExpandEvent event) {
        resizable.setEnabled(true);
      }
    });
    panel.addCollapseHandler(new CollapseHandler() {
      @Override
      public void onCollapse(CollapseEvent event) {
        resizable.setEnabled(false);
      }
    });

    // needed to enable quicktips (qtitle for the heading and qtip for the
    // content) that are setup in the change GridCellRenderer
    new QuickTip(grid);

    return grid;
  }

  public class Stock implements Serializable {
    private Integer id;
    private Double change;
    private Date date = new Date();
    private String industry = getType();
    private Double last;
    private String name;
    private Double open;
    private String symbol;
    private boolean split = Boolean.valueOf(Math.random() > .5);

    public Stock() {
      this.id = Integer.valueOf(COUNTER++);
    }

    public Stock(String name, double open, double change, double pctChange, Date date, String industry) {
      this();
      this.name = name;
      this.open = open;
      this.change = change;
      this.date = date;
      this.industry = industry;
    }

    public Stock(String name, String symbol, double open, double last, Date date) {
      this();
      this.name = name;
      this.symbol = symbol;
      this.change = last - open;
      this.open = open;
      this.last = last;
      this.date = date;
    }

    public Double getChange() {
      return change;
    }

    public Integer getId() {
      return id;
    }

    public String getIndustry() {
      return industry;
    }

    public Double getLast() {
      return last;
    }

    public Date getLastTrans() {
      return date;
    }

    public String getName() {
      return name;
    }

    public Double getOpen() {
      return open;
    }

    /**
     * Read-only property, based on other values
     * 
     * @return the percent change
     */
    public double getPercentChange() {
      return getChange() / getOpen();
    }

    public String getSymbol() {
      return symbol;
    }

    public boolean isSplit() {
      return split;
    }

    public void setChange(Double change) {
      this.change = change;
    }

    public void setId(Integer id) {
      this.id = id;
    }

    public void setIndustry(String industry) {
      this.industry = industry;
    }

    public void setLast(Double last) {
      this.last = last;
    }

    public void setLastTrans(Date date) {
      this.date = date;
    }

    public void setName(String name) {
      this.name = name;
    }

    public void setOpen(Double open) {
      this.open = open;
    }

    public void setSplit(boolean split) {
      this.split = split;
    }

    public void setSymbol(String symbol) {
      this.symbol = symbol;
    }

    public String toString() {
      return getName();
    }

    private String getType() {
      double r = Math.random();
      if (r <= .25) {
        return "Auto";
      } else if (r > .25 && r <= .50) {
        return "Media";
      } else if (r > .5 && r <= .75) {
        return "Medical";
      } else {
        return "Tech";
      }
    }
  }

  public List<Stock> getStocks() {
    List<Stock> stocks = new ArrayList<Stock>();
    stocks.add(new Stock("Apple Incl", "AAPL", 125.64, 123.43, randomDate()));
    stocks.add(new Stock("Cisco Systems, Inc.", "CSCO", 25.84, 26.3, randomDate()));
    stocks.add(new Stock("Google Inc.", "GOOG", 516.2, 512.6, randomDate()));
    stocks.add(new Stock("Intel Corporation", "INTC", 21.36, 21.53, randomDate()));
    stocks.add(new Stock("Level 3 Communications, Inc.", "LVLT", 5.55, 5.54, randomDate()));
    stocks.add(new Stock("Microsoft Corporation", "MSFT", 29.56, 29.72, randomDate()));
    stocks.add(new Stock("Nokia Corporation (ADR)", "NOK", 27.83, 27.93, randomDate()));
    stocks.add(new Stock("Oracle Corporation", "ORCL", 18.73, 18.98, randomDate()));
    return stocks;
  }

  private Date randomDate() {
    DateWrapper w = new DateWrapper();
    int r = (int) (Math.random() * 10) * 10;
    w = w.addDays(-r);
    return w.asDate();
  }

  public interface StockProperties extends PropertyAccess<Stock> {
    @Path("symbol")
    ModelKeyProvider<Stock> key();

    ValueProvider<Stock, String> name();

    ValueProvider<Stock, String> symbol();

    ValueProvider<Stock, Double> last();

    ValueProvider<Stock, Double> change();

    ValueProvider<Stock, Date> lastTrans();

    ValueProvider<Stock, String> industry();
  }

styles.css

.highlight {
    -webkit-animation: target-fade 4s 1;
    -moz-animation: target-fade 4s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(255,239,115,.9); }
    100% { background-color: rgba(255,239,115,0); }
}

@-moz-keyframes target-fade {
    0% { background-color: rgba(255,239,115,.9); }
    100% { background-color: rgba(255,239,115,0); }
}