如何根据gxt中可编辑网格中的另一个单元格值使单元格不可编辑

Question

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

   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");

 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 eventcolumn = new ColumnConfig();
    eventcolumn.setId("event");
    eventcolumn.setHeader("Event");
    eventcolumn.setWidth(145);
    eventcolumn.setMenuDisabled(true);
    eventcolumn.setSortable(false);
   /* */
//  column.setEditor(new);
    eventcolumn.setEditor(eventComboEditor);


    configs.add(eventcolumn);

    //rosterInOut-10
       ColumnConfig rosterInOutcolumn = new ColumnConfig();
       rosterInOutcolumn.setId("rosterInOut");
       rosterInOutcolumn.setHeader("Old Roster");
       rosterInOutcolumn.setWidth(70);
       rosterInOutcolumn.setMenuDisabled(true);
       rosterInOutcolumn.setSortable(false);
    configs.add(rosterInOutcolumn);


    Rostercombo = new SimpleComboBox<String>();  
        CellEditor editor1 = new CellEditor(Rostercombo) {  
              public Object preProcessValue(Object value) {  
                  if (value == null) {  
                    return value;  
                  }  
                  return Rostercombo.findModel(value.toString());  
                }  
              public Object postProcessValue(Object value) {  
                   if (value == null) {  
                     return value;  
                   }  
                 return ((ModelData) value).get("value");  
               }  
             };  
             Rostercombo.setForceSelection(true);  
             Rostercombo.setTriggerAction(TriggerAction.ALL);  
             Rostercombo.add("OD");  
             Rostercombo.add("O");

    //newRosterin-11
    ColumnConfig newRosterincolumn = new ColumnConfig();
    newRosterincolumn.setId("newRosterin");
    newRosterincolumn.setHeader("New Roster In");
    newRosterincolumn.setWidth(80);
    newRosterincolumn.setEditor(editor1);
    newRosterincolumn.setMenuDisabled(true);
    newRosterincolumn.setSortable(false);
    configs.add(newRosterincolumn);

    //checkinout-12
     ColumnConfig checkinoutcolumn = new ColumnConfig();
     checkinoutcolumn.setId("checkinout");
     checkinoutcolumn.setHeader("Check In-Out");
     checkinoutcolumn.setWidth(80);
     checkinoutcolumn.setMenuDisabled(true);
     checkinoutcolumn.setSortable(false);
    configs.add(checkinoutcolumn);

    //checkinDate-13
     ColumnConfig checkinDatecolumn = new ColumnConfig();
     checkinDatecolumn.setId("checkinDate");
     checkinDatecolumn.setHeader("Check In Date");
     checkinDatecolumn.setWidth(85);
     checkinDatecolumn.setMenuDisabled(true);
     checkinDatecolumn.setSortable(false);

    final DateField dateField1 = new DateField();
    dateField1.getPropertyEditor().setFormat(DateTimeFormat.getFormat("dd/MMM/yyyy")); 
    dateField1.getDatePicker().addListener(Events.Select, new Listener<DatePickerEvent>() {

        @Override
        public void handleEvent(DatePickerEvent dpe) {

        //  Window.alert("Getting Roster Date here-->"+grid.getColumnModel().);
        Window.alert("Getting RosterDate--."+   caseStoreModule.getModifiedRecords().get(0).get("rosterDate"));



        }
    });

    checkinDatecolumn.setEditor(new CellEditor(dateField1));
    checkinDatecolumn.setDateTimeFormat(DateTimeFormat.getFormat("dd/MMM/yyyy"));
    configs.add(checkinDatecolumn);

    //checkinTime-14
    ColumnConfig checkinTimecolumn=new ColumnConfig();
    checkinTimecolumn.setId("checkinTime");
    checkinTimecolumn.setHeader("Check In Time");
    checkinTimecolumn.setWidth(80);
    checkinTimecolumn.setMenuDisabled(true);
    checkinTimecolumn.setSortable(false);
    final TextField<String> checkintime = new TextField<String>();
    checkintime.setAllowBlank(true);  
    checkintime.addListener(Events.Change, new Listener<BaseEvent>() {

        @Override
        public void handleEvent(BaseEvent be) {

        //  Window.alert("getting the checkin time value-->"+checkintime.getValue());
            String variable = checkintime.getRawValue();
            if(variable != null & !variable.equalsIgnoreCase(""))
            {   
                if(!variable.matches(REG_EXP))
                {
                    checkintime.clear();
                    MsgBox.info("Enter time in hh:mm format");
                    checkintime.focus();

                    return;
                }
            }
        }
    });


    checkinTimecolumn.setEditor(new CellEditor(checkintime));

    configs.add(checkinTimecolumn);



    //checkoutDate-15
    ColumnConfig checkoutDatecolumn=new ColumnConfig();
    checkoutDatecolumn.setId("checkoutDate");
    checkoutDatecolumn.setHeader("Check Out Date");
    checkoutDatecolumn.setWidth(90);
    checkoutDatecolumn.setMenuDisabled(true);
    checkoutDatecolumn.setSortable(false);
    DateField dateField2 = new DateField();
    dateField2.getPropertyEditor().setFormat(DateTimeFormat.getFormat("dd/MMM/yyyy")); 
    checkoutDatecolumn.setEditor(new CellEditor(dateField2));
    checkoutDatecolumn.setDateTimeFormat(DateTimeFormat.getFormat("dd/MMM/yyyy"));
    configs.add(checkoutDatecolumn);

    //checkoutTime-15
    ColumnConfig checkoutTimecolumn=new ColumnConfig();
    checkoutTimecolumn.setId("checkoutTime");
    checkoutTimecolumn.setHeader("Check Out Time");
    checkoutTimecolumn.setWidth(90);
    checkoutTimecolumn.setMenuDisabled(true);
    checkoutTimecolumn.setSortable(false);
    final TextField<String> checkouttime = new TextField<String>();
    checkouttime.setAllowBlank(true);  
    checkouttime.addListener(Events.Change, new Listener<BaseEvent>() {

        @Override
        public void handleEvent(BaseEvent be) {

        //  Window.alert("getting the checkouttime value-->"+checkouttime.getValue());
            String variable = checkouttime.getRawValue();
            if(variable != null & !variable.equalsIgnoreCase(""))
            {   
                if(!variable.matches(REG_EXP))
                {
                    checkouttime.clear();
                    MsgBox.info("Enter time in hh:mm format");
                    checkouttime.focus();

                    return;
                }
            }
        }
    });
    checkoutTimecolumn.setEditor(new CellEditor(checkouttime));
    configs.add(checkoutTimecolumn);

    //for gradeCode-16
    ColumnConfig gradeCodecolumn=new ColumnConfig();
    gradeCodecolumn.setId("gradeCode");
    gradeCodecolumn.setHidden(true);
    configs.add(gradeCodecolumn);

    //for rosterevent-17
ColumnConfig    rostereventcolumn=new ColumnConfig();
rostereventcolumn.setId("rosterevent");
rostereventcolumn.setHidden(true);
    configs.add(rostereventcolumn);

    //for action-18
    ColumnConfig actioncolumn=new ColumnConfig();
    actioncolumn.setId("action");
    actioncolumn.setHeader("Action");
    //column.setHidden(true);
    actioncolumn.setWidth(70);
    actioncolumn.setMenuDisabled(true);
    actioncolumn.setSortable(false);
    configs.add(actioncolumn);

    //for actionHidden-19
    ColumnConfig actionHiddencolumn=new ColumnConfig();
    actionHiddencolumn.setId("actionHidden");
    actionHiddencolumn.setHidden(true);
    configs.add(actionHiddencolumn);

    //for attendId-20
    ColumnConfig attendIdcolumn=new ColumnConfig();
    attendIdcolumn.setId("attendId");
    attendIdcolumn.setHidden(true);
    configs.add(attendIdcolumn);

    //for rosterChanged-21
    ColumnConfig    rosterChangedcolumn=new ColumnConfig();
    rosterChangedcolumn.setId("rosterChanged");
    rosterChangedcolumn.setHidden(true);
    configs.add(rosterChangedcolumn);

    // for holiday-22
    ColumnConfig holidaycolumn=new ColumnConfig();
    holidaycolumn.setId("holiday");
    holidaycolumn.setHidden(true);
    configs.add(holidaycolumn);

    // for checkinDateTimeHidden-23
    column=new ColumnConfig();
    column.setId("checkinDateTimeHidden");
    column.setHidden(true);
    configs.add(column);

    // for checkoutDateTimeHidden-24
    ColumnConfig checkoutDateTimeHiddencolumn=new ColumnConfig();
    checkoutDateTimeHiddencolumn.setId("checkoutDateTimeHidden");
    checkoutDateTimeHiddencolumn.setHidden(true);
    configs.add(checkoutDateTimeHiddencolumn);

    // for loginEmpEntity-25
    ColumnConfig loginEmpEntitycolumn=new ColumnConfig();
    loginEmpEntitycolumn.setId("loginEmpEntity");
    loginEmpEntitycolumn.setHidden(true);
    configs.add(loginEmpEntitycolumn);

    // for  halfDayLLimit-26
    ColumnConfig halfDayLLimitcolumn=new ColumnConfig();
    halfDayLLimitcolumn.setId("halfDayLLimit");
    halfDayLLimitcolumn.setHidden(true);
    configs.add(halfDayLLimitcolumn);



    return new ColumnModel(configs);

Now I want to make the checkinDate,CheckIntime,CheckOutDate and CheckOutTime column cells as Noneditable or disabled based on value of eventCombo box value.

How to make this in the Listener of eventCombo box.Please suggest.

I am new to GXT.

UPDATE

I tried below code to disable and enable the cell but it's disabling cell fine.But after disabling,if I choose another it's not enabling again.

Listener> gridAfterEditListener = new Listener>() {

    @Override
    public void handleEvent(GridEvent<AttendanceCaseCreationModel> be) {
        AttendanceCaseCreationModel data = be.getModel();
         String val = data.get("event");

         if(val.equalsIgnoreCase("Remove Attendance")){

            data.set("checkinDate","");


              grid.getColumnModel().getColumnById("checkinDate").getEditor().disable();
              grid.getStore().update(data); 
              grid.getView().refresh(true);


         }
         else {
             data.set("checkinDate",""); 
             grid.getColumnModel().getColumnById("checkinDate").getEditor().enable();
         grid.getStore().update(data); 
             grid.getView().refresh(true);

         }

    }
};
grid.addListener(Events.AfterEdit, gridAfterEditListener); 

Please suggest how to resolve this

Answer 1

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;

        }
    };

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

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