Grid Plugins

Additions to the grids like the Row Numberer, checkboxes, Row Expander are added as plugins to the Grid.

Adding Row Expander:

  1: XTemplate tpl = XTemplate.create("<p><b>Company:</b> {name}</p><br><p><b>Summary:</b> {desc}</p>");
  2: RowExpander expander = new RowExpander();
  3: expander.setTemplate(tpl);  
 

and then we need to add the plugin to the grid. We cannot apply a rowExpander to a Summary Grid.

grid.addPlugin(expander);

The XTemplate contains the information that has to be displayed when the “+” is clicked.

Adding Row Numberer:

  1: RowNumberer r = new RowNumberer();
  2: List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
  3: configs.add(r);  

and then add the plugin to the grid.

grid.addPlugin(r);

Adding Checkboxes:

  1: CheckBoxSelectionModel sm = new CheckBoxSelectionModel();
  2: configs.add(sm.getColumn());

Add the plugin to the grid

grid.addPlugin(sm);

Adding the grid plugin will provide automatic reorganization when the grid store values have changed.

EditorGrid tab order in gxt

I had problems with editor grid previously too. But yesterday was heights. The tab order for the editorGrid was working fine if the grid store has previous values within it. My requirement is to add a new row if that is the last one and continue the tab order after that row into the next one. 

I tried adding the row using the BeforeEdit event for the Editor Grid and looking for that column. It so happens that the selection is lost for that cell, as soon as the row is added and tabs does not work after that.

So 

  1: GridModelData batchData = new GridModelData();
  2: grid.getStore().insert(batchData, i);
  3: ((CellSelectionModel<GridModelData>)grid.getSelectionModel()).selectCell(i - 1,"last column number");

We basically set the focus back to the last cell which was lost when we insert a row into the grid.

Cell color change in grid

Some of the applications require a different color for a cell to distinguish it from the others. This feature can be achieved using GridCellRenderer and setting the CSS for the cell using config.css which is a parameter for the renderer.

  1: day.setRenderer(new GridCellRenderer<ModelData>(){
  2:     public String render(ModelData model, String property,
  3:       ColumnData config, int rowIndex, int colIndex,
  4:       ListStore<ModelData> store) {
  5:      if(!((String)model.get(colIndex+"adjcode")).equals(""))
  6:       {
  7:        config.css = "x-cell-Color-Change";
  8:        model.set(colIndex+"cellvalue", model.get(colIndex+"adjcode"));
  9:       }else {
 10:        config.css = "";
 11:        if(model.getPropertyNames().contains(colIndex+"deptno2") && !((String)model.get(colIndex+"deptno2")).equals("")) {
 12:         config.css = "x-cell-double";
 13:         model.set(colIndex+"cellvalue", model.get(colIndex+"deptno")+" - "+model.get(colIndex+"shift")+"<br/>"+model.get(colIndex+"deptno2")+" - "+model.get(colIndex+"shift2"));
 14:        }
 15:        else
 16:         model.set(colIndex+"cellvalue", model.get(colIndex+"deptno")+" - "+model.get(colIndex+"shift"));
 17:       }
 18:       return model.get(colIndex+"cellvalue");
 19:      
 20:     }
 21:    });

We need to take care that if the condition is not met we need to remove the CSS style else the CSS is applied to all the rows following that column.