Results 1 to 5 of 5

Thread: Grid Cell color change on click not working in IE and Chrome but works in Firefox

  1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Home
    Posts
    20

    Exclamation Grid Cell color change on click not working in IE and Chrome but works in Firefox

    Hi I am trying to make a grid, in which cell color would change on click

    here is my sample code
    Code:
    public class DiscoGrid extends LayoutContainer {
    
    	Grid<BaseModel> grid_;
    	ListStore<BaseModel> store;
    	ColumnModel cm;
    	
    	public DiscoGrid() {
    	
    		fillStore();
    		makeColumns();
    		grid_ = new Grid<BaseModel>(store, cm);
    		grid_.addListener(Events.CellClick,
    				new Listener<GridEvent<BaseModel>>() {
    					@Override
    					public void handleEvent(final GridEvent<BaseModel> be) {
    						final int col = be.getColIndex();
    						final int row = be.getRowIndex();
    						final BaseModel bm = store.getAt(row);
    						final String property = Integer.toString(col);
    						final Boolean b = bm.get(property);
    						bm.set(property, Boolean.valueOf(!b.booleanValue()));
    						grid_.getView().refresh(true);
    					}
    		});
    		grid_.setColumnLines(true);
    		grid_.setMinColumnWidth(5);
    		grid_.setBorders(true);
    		grid_.setHeight(300);
    		grid_.setWidth(500);
    		
    		VerticalPanel panel = new VerticalPanel();
    		panel.add(grid_);
    		add(panel);
    	}
    
    	private void makeColumns() {
    
    		final GridCellRenderer<BaseModel> renderer = new GridCellRenderer<BaseModel>() {
    			public Object render(BaseModel model, String property,
    					ColumnData config, int rowIndex, int colIndex,
    					ListStore<BaseModel> store, Grid<BaseModel> grid) {
    				final Boolean b = model.get(property);
    				if (b.booleanValue()) {
    					// green color
    					config.style = "background-color: #CEE38C; color: #CEE38C;";
    				} else {
    					// red color
    					config.style = "background-color: #FFA8A8; color: #FFA8A8;";
    				}
    				return grid.getView().getCell(rowIndex, colIndex);
    			}
    		};
    		
    		List<ColumnConfig> cols = new ArrayList<ColumnConfig>();
    		for(int i = 0; i < 5 ; i++) {
    			ColumnConfig col = new ColumnConfig(Integer.toString(i), Integer.toString(i), 100);
    			col.setFixed(true);
    			col.setSortable(false);
    			col.setRenderer(renderer);
    			cols.add(col);
    		}
    		cm = new ColumnModel(cols);
    	}
    
    	private void fillStore() {
    		store = new ListStore<BaseModel>();
    		for(int i= 0 ;i < 10 ; i++) {
    			BaseModel model = new BaseModel();
    			for(int j = 0 ; j < 5 ; j++) {
    				model.set(Integer.toString(j), Boolean.FALSE);
    			}
    			store.add(model);
    		}
    	}
    }
    It works fine on firefox but not on Chrome and IE.
    In firefox, color of the cell on which i click gets changed,
    but in IE and Chrome, clicking changes color of some random cell
    and sometimes several cells' color gets changed.

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    79

    Default

    Did you try to test/debug whether these lines
    Code:
    final int col = be.getColIndex();	
    final int row = be.getRowIndex();
    return valid values in the mentioned browsers?

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Home
    Posts
    20

    Default

    yes, the indexes are correct,
    and the issue is present only when I am running in dev mode, and not in web mode.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    79

    Default

    Are you sure you can return this grid.getView().getCell(rowIndex, colIndex); in the renderer? Custom cell renderers in the examples page use another approach

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Home
    Posts
    20

    Default thanx

    Hey,
    Thanx for pointing me in the right direction.
    Found the issue.
    Fixed it. ! now it works

    Thanx again

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •