How to set the style of cell that has been edited.

[btcarelli]

I would like to change the style of grid cell to indicate that it has been edited; I override getCellCSSText(), but for some reason the cell maintains the base style. The override function is as follows:

	public String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
		String fieldName = getFieldName(colNum);
		FieldType fieldType = ds.getField(fieldName).getType();
		if(cellHasChanges(rowNum, colNum)){
			return "color:green";
		}else if(fieldType.equals(FieldType.FLOAT)){
			if(record.getAttributeAsDouble(fieldName)<0.0d){
				return "color:red";
			}else{
				return super.getCellCSSText(record, rowNum, colNum);
				
			}
		}else {
			return super.getCellCSSText(record, rowNum, colNum);
		}		
	}

How can I achieve this?

[Isomorphic]

That looks fine in isolation. Be sure it is actually being called (log something) and actually returning something. If you can't get it working, try adding it to a sample to test it in isolation.

[btcarelli]

That looks fine in isolation. Be sure it is actually being called (log something) and actually returning something. If you can't get it working, try adding it to a sample to test it in isolation.

I modified GridEditByCellSample in the Grid Editing (edit by cell) example at http://localhost:8888/index.html#grid_editing_cell the code follows:

package com.smartgwt.sample.showcase.client.grid.editing;

import com.google.gwt.i18n.client.NumberFormat;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ListGridEditEvent;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.sample.showcase.client.PanelFactory;
import com.smartgwt.sample.showcase.client.ShowcasePanel;
import com.smartgwt.sample.showcase.client.data.CountryXmlDS;
import com.smartgwt.client.types.FieldType;

public class GridEditByCellSample extends ShowcasePanel {
    private static final String DESCRIPTION = "<p><b>Click</b> on any cell to start editing. Use <b>Tab</b>, <b>Shift-Tab</b>," +
            "<b>Up Arrow</b>, and <b>Down Arrow</b> to move between cells.</p><p>Press <b>Enter</b> to save the current row" +
            "and dismiss the editors, or <b>Esc</b> to discard changes for the current cell and dismiss" +
            "the editors.</p>";

    public static class Factory implements PanelFactory {
        private String id;

        public Canvas create() {
            GridEditByCellSample panel = new GridEditByCellSample();
            id = panel.getID();
            return panel;
        }

        public String getID() {
            return id;
        }

        public String getDescription() {
            return DESCRIPTION;
        }
    }

    public Canvas getViewPanel() {

        final CountryGrid countryGrid = new CountryGrid();
        countryGrid.setWidth(550);
        countryGrid.setHeight(224);
        countryGrid.setShowAllRecords(true);
        countryGrid.setCellHeight(22);
        // use server-side dataSource so edits are retained across page transitions
        countryGrid.setDataSource(CountryXmlDS.getInstance());

        ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
        countryCodeField.setAlign(Alignment.CENTER);
        countryCodeField.setType(ListGridFieldType.IMAGE);
        countryCodeField.setImageURLPrefix("flags/16/");
        countryCodeField.setImageURLSuffix(".png");
        countryCodeField.setCanEdit(false);

        ListGridField nameField = new ListGridField("countryName", "Country");
        ListGridField continentField = new ListGridField("continent", "Continent");
        ListGridField memberG8Field = new ListGridField("member_g8", "Member G8");
        ListGridField populationField = new ListGridField("population", "Population");
        populationField.setType(ListGridFieldType.INTEGER);
        populationField.setCellFormatter(new CellFormatter() {
            public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
                if(value == null) return null;
                try {
                    NumberFormat nf = NumberFormat.getFormat("0,000");
                    return nf.format(((Number) value).longValue());
                } catch (Exception e) {
                    return value.toString();
                }
            }
        });
        ListGridField independenceField = new ListGridField("independence", "Independence");
        countryGrid.setFields(countryCodeField, nameField,continentField, memberG8Field, populationField, independenceField);

        countryGrid.setAutoFetchData(true);
        countryGrid.setCanEdit(true);
        countryGrid.setEditEvent(ListGridEditEvent.CLICK);
        countryGrid.setEditByCell(true);

        return countryGrid;
    }


    public String getIntro() {
        return DESCRIPTION;
    } 

    class CountryGrid extends ListGrid {
    	public CountryGrid(){
    		super();
    	}
    	
    	@Override
		public String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
    		if(cellHasChanges(rowNum, colNum)){
    			System.out.println("set color to green. row: " + rowNum + "  colNum: " + colNum);
    			return "color:green";
    		}else {
    			System.out.println("use default. row: " + rowNum + "  colNum: " + colNum);
				return super.getCellCSSText(record, rowNum, colNum);
			}		
		}
    		
    }

    
}

The log indicated that the function is being called; however, after the cell has been modified the function gets called on all cells in the grid and not just the edited cell and my condition statement if(cellHasChanges(rowNum, colNum)){} is never true. Am I using cellHasChanges() correctly?

[Isomorphic]

This seems to just indicate that the data has been saved, so there are no longer changes. This example saves as soon as you leave the cell.

[btcarelli]

This seems to just indicate that the data has been saved, so there are no longer changes. This example saves as soon as you leave the cell.

My grid also does auto save so cellHasChanges() won't apply.
How else can I change the style of a cell that has just been modified?

[Isomorphic]

Can you clarify the whole lifecycle of this data and how long the styling is meant to last?

There's an autoSaveEdits:false mode in which changes are stored locally in the browser and only committed when you can saveAllEdits(). In this case styling of pending changes is automatic.

If you're trying to do something more along the lines of styling for *recent* changes, how long should the styling last?

[btcarelli]

Can you clarify the whole lifecycle of this data and how long the styling is meant to last?

There's an autoSaveEdits:false mode in which changes are stored locally in the browser and only committed when you can saveAllEdits(). In this case styling of pending changes is automatic.

If you're trying to do something more along the lines of styling for *recent* changes, how long should the styling last?

The data is acquired from database using stored procedure call. It’s stored on server in a java table object and every time data is edited in grid the table is updated automatically. With click of button users can write data from table into database and/or run reports based on this data. Other operations can be performed on this data using the table object (e.g. distributing cost).

Yes. I would like to show recent changes and the styling to persist until the user writes to the database (achieve by clicking save button). After writing to database, grid is repopulated with data from database and cells go back to basestyle. I would love to achieve this and still have my grid auto save.

Thanks

[Isomorphic]

Possibly terminology confusion here. What we mean by "save" is that the data is sent to the server and stored permanently. When autoSaveEdits is true, this happens immediately upon cell or row transition (according to whether you've set saveByCell). Hence you'll only see styling for pending edits briefly because the data is immediately saved and the grid reflects what is actually in the database.

If you set autoSaveEdits to false, pending edits are stored in the browser and are not saved until you call saveAllEdits() (for example, from a button). In this case there is also automatic support for styling pending edits - you don't need to add your own.

So as far as we can tell, setAutoSaveEdits(false) is all you need, and you should remove your getCellCSSText() override to allow the automatic styling to work.

[btcarelli]

Possibly terminology confusion here. What we mean by "save" is that the data is sent to the server and stored permanently. When autoSaveEdits is true, this happens immediately upon cell or row transition (according to whether you've set saveByCell). Hence you'll only see styling for pending edits briefly because the data is immediately saved and the grid reflects what is actually in the database.

If you set autoSaveEdits to false, pending edits are stored in the browser and are not saved until you call saveAllEdits() (for example, from a button). In this case there is also automatic support for styling pending edits - you don't need to add your own.

So as far as we can tell, setAutoSaveEdits(false) is all you need, and you should remove your getCellCSSText() override to allow the automatic styling to work.

Unfortunately, setAutoSaveEdits(false) is not an option for me. In our implementation, we use auto save to temporarily store data on server in java table object and would like to continue doing so. Also, I cannot remove my override of getCellCSSText(), it currently has implementation to change cells font color to red if the value is a negative number; besides, we would prefer to have control of how texts are presented in grid.
Is there any other way of achieving this?

[Isomorphic]

OK, as far the grid is considered, when it sends an update/add request to the server and the server responds with no errors, those changes are saved. Hence "cellHasChanges()" is correctly returning false.

If you want to style these cells specially, you'd need to track the changes yourself. You could, for example, use the editComplete and editFailed events on the grid to find out about all changes being saved, and create a datastructure that will allow you to do quick lookups from getCellCSSText() to find out if there were recent changes to a cell.