Search code examples
smartgwtlistgrid

Smartgwt listgrid on the fly / dynamic highlighting


I have a smartGwt ListGrid which i use for showing stock market data. I want to be able to highlight the value of a cell. For example - if its current value is greater than the last value, turn green and turn red if it is lower. I looked at the showcase for smartGWT for any such capability but i only found this sample code for highlighting.

        new Hilite() {{  
            setFieldNames("area", "gdp");  
            setTextColor("#FFFFFF");  
            setBackgroundColor("#639966");  
            setCriteria(new AdvancedCriteria(OperatorId.AND, new Criterion[] {  
                            new Criterion("gdp", OperatorId.GREATER_THAN, 1000000),  
                            new Criterion("area", OperatorId.LESS_THAN, 500000)}));  
            setCssText("color:#3333FF;background-color:#CDEB8B;");  
            setHtmlAfter(" " + Canvas.imgHTML("[SKIN]/actions/back.png"));  
            setId("1");  
        }} 

Here the "gdp" or "area" fields are highlighted if their values are greater or less than a fixed number. Is it possible to use similar highlighting but the value should be compared to the previous value in the cell?

Thanks and regards Mukul


Solution

  • Previous values are not stored anywhere in the model. So the comparison cannot be made out of the box.

    A possible solution to this is to create duplicate hidden list grid fields like areaPrevious or gdpPrevious. When the data changes you populate gdp/area and gdpPrevious/areaPrevious fields. Instead of using hilites you use cellFormatters.

    gdpField.setCellFormatter(new CellFormatter(){
        public String format(Object value, ListGridRecord record, int rowNum, int colNum){
            if( record.getAttribute("gdpPrevious") < record.getAttribute("gdp")){
                 return "<div style=\"width:14px;height:14px;background-color:green;\">+value+        "</div>";
            }else{
                  return "<div style=\"width:14px;height:14px;background-color:red;\">"+value+        "</div>";
            }
        }
    });