How to make cell as non editable based on another cell value in Editable Grid in gxt

Question

Hi I am creating Editable Grid using GXT 2.2.3. I created columns like below:

   List eventList=new ArrayList();
    eventList.ad         


        

Answer 1

Add an afterEdit Listener to grid.

 private EditorGrid<ModelData> grid;
 private ListStore<ModelData> gridStore;
 private ColumnModel cm;
 public void onModuleLoad() {

 ContentPanel cp = new ContentPanel();
 cp.setSize(500, 500);




 List<ColumnConfig> configs = new ArrayList<ColumnConfig>();  


List<String> eventList=new ArrayList<String>();
eventList.add("Mark/Modify Attendance");
eventList.add("Remove Attendance");
eventList.add("Modify Roster");
eventList.add("Mark OD");
eventList.add("Forgot To Checkin");

final SimpleComboBox<String> eventcombo = new SimpleComboBox<String>(); 
eventcombo.setEmptyText("");
eventcombo.setTriggerAction(TriggerAction.ALL);
//  EventCombo.setSelection(eventList);
 CellEditor eventComboEditor = new CellEditor(eventcombo) {  
    public Object preProcessValue(Object value) {  
      if (value == null) {  
        return value;  
      }  
      return eventcombo.findModel(value.toString());  
    }  
  public Object postProcessValue(Object value) {  
       if (value == null) {  
         return value;  
       }  
     return ((ModelData) value).get("value");  
   }  
 };  
 eventcombo.setForceSelection(true);  
 eventcombo.setEmptyText("");
 eventcombo.setTriggerAction(TriggerAction.ALL); 
 eventcombo.add(eventList);

ColumnConfig column = new ColumnConfig();  
column.setId("event");  
column.setHeaderHtml("Co Manager/Distributor");  
column.setEditor(eventComboEditor);  
column.setWidth(200);
configs.add(column);  

ColumnConfig column2 = new ColumnConfig();  
column2.setId("test");  
column2.setHeaderHtml("Test");  
column2.setEditor(new CellEditor(new TextField<String>()));
column2.setWidth(100);
configs.add(column2);  

ColumnConfig column3 = new ColumnConfig("desk", "Desk", 105);  
column3.setEditor(new CellEditor(new TextField<String>()));
configs.add(column3);

cm = new ColumnModel(configs);
gridStore = new ListStore<ModelData>();
ModelData md = new BaseModelData();
md.set("event", "Modify Roster");
md.set("test","A1");
md.set("desk", "A2");
gridStore.add(md);

md = new BaseModelData();
md.set("test","B1");
md.set("event", "Remove Attendance");
md.set("desk", "B2");
gridStore.add(md);

md = new BaseModelData();
md.set("test","C1");
md.set("desk", "C2");
md.set("event", "Mark OD");
gridStore.add(md);

gridStore.commitChanges();

grid = new EditorGrid<ModelData>(gridStore, cm);
grid.setBorders(true);
grid.setStripeRows(true);
grid.setTrackMouseOver(true);
grid.disableTextSelection(false);
grid.setHideHeaders(false);
grid.setHeight(500);
grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

grid.addListener(Events.AfterEdit, gridAfterEditListener);



Viewport viewport = new Viewport();
viewport.setLayout(new FlowLayout());

cp.add(grid);
viewport.add(cp ,new FitData(new Margins(0,0,56,0)));
RootPanel.get("content").add(viewport);


}


Listener<GridEvent<ModelData>> gridAfterEditListener = new Listener<GridEvent<ModelData>>() {
  @Override
    public void handleEvent(GridEvent<ModelData> be) {

     ModelData data = be.getModel();
     String val = data.get("event");
    if(val.equalsIgnoreCase("Remove Attendance")){
          data.set("test","new test");
          grid.getColumnModel().getColumnById("desk").getEditor().disable();
          grid.getStore().update(data); 
          grid.getView().refresh(true);
    }   
   else{

        data.set("test","old test");
        grid.getColumnModel().getColumnById("desk").getEditor().enable();
        grid.getStore().update(data); 
        grid.getView().refresh(true);

     }
 }
};

The complete code

Answer 2

How to make cell as non editable based on another cell value in Editable Grid in gxt.

Try with BeforeEdit listener and call event.setCancelled(true) on the basis of your condition to disable the editing.

There is no need to disable/enable the cell. Just stop editing in current cell based on condition.

Sample code:

    grid.addListener(Events.BeforeEdit, new Listener<GridEvent<ModelData>>() {
        public void handleEvent(GridEvent<ModelData> be) {

            // disable 2nd cell based on value of 1st cell
            ModelData data = be.getModel();
            String val = data.get("event"); // read 1st cell value
            if (val.equalsIgnoreCase("Remove Attendance")) {
                if (be.getColIndex() == 2) { // disable 2nd cell only
                    be.setCancelled(true);// Disable edition
                }
            }
        }
    });

Please have a look at complete sample code.

Answer 3

Instead thinking of disabling and enabling the cell, I just hide and show the cell using CSS. Below is my code which saves me to reach this requirement.

GridCellRenderer<AttendanceCaseCreationModel> checkinRenderer=new GridCellRenderer<AttendanceCaseCreationModel>() {

        @Override
        public Object render(AttendanceCaseCreationModel model, String property,
                ColumnData config, int rowIndex, int colIndex,
                ListStore<AttendanceCaseCreationModel> store,
                Grid<AttendanceCaseCreationModel> grid) {

            String color="pink";
            if(eventcombo.getValue()!=null){


                if(eventcombo.getRawValue().equalsIgnoreCase("Forgot To Checkin") || 
                        eventcombo.getRawValue().equalsIgnoreCase("Mark/Modify Attendance")){
                    color="pink";
                }
                else{

                    config.style=config.style+ ";visibility: hidden;";
                }

            }

            config.style=config.style+ ";background-color:" + color  + ";";
            config.style=config.style+ ";display: block;";
            Object value = model.get(property);
            return value;

        }
    };