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.

ColdFusion or IE?

I have been working on displaying the grid for the calendar widget. I use JSON to parse the data from the ColdFusion for the GXT grid store. The data from the database is formatted a lot in ColdFusion, using a couple of loops. The problem is that ColdFusion unwraps the loop and place as white spaces in HTML and send them back to the user. Well another problem here is that the white spaces returned by ColdFusion is handled by chrome and safari very good except for IE.

In my case when using couple of loops with around 36 records ( well lots of formatting done for each record)  it returns a HTML file with around 4500 lines of white space, and just about 100 lines of useful data.  My application with the white spaces would take something like 4-5 sec to load in safari but would take about a whooping 1.5 min when trying to display in IE.

Well now should ColdFusion return the HTML with the white spaces or should IE have better white space handling??

Adding a listener to a HTML element in gxt

I was trying to add a listener to a HTML element and finally figured out how to do that.

The current scenario is that of a grid, which has a HTML image in one column and a listener has to be attached, so that it performs a task when clicked.

I placed the HTML tag in the grid cell renderer for that particular column

  1: employeeColumn.setRenderer(new GridCellRenderer<ModelData>(){
  2:  public String render(ModelData model, String property,
  3:   ColumnData config, int rowIndex, int colIndex,
  4:   ListStore<ModelData> store) {
  5:    return model.get("fullname")+"<span qtip='copy'><image class=\"copy\" src = 'image/arrow_right.png'></image></span>";
  6:  }
  7: });

The image used has a class name which is used to identify that image in the listener. 

Writing the listener

  1: grid.addListener(Events.CellClick, new Listener<BaseEvent>(){
  2:        public void handleEvent(BaseEvent be) {
  3:          GridEvent ge = (GridEvent)be;
  4:           if(ge.colIndex == 0)
  5:   {
  6:           if(ge.getTarget(".copy", 1) != null)
  7:    {
  8:                         }
  9:                 }
 10:        }
 11: });

My employeeColumn is my first column in the grid, so i select this column in the cell click event. And then I try to select the image with the class copy by checking with the highlighted condition if the target is “copy”.