Monday, April 13, 2009

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”.

3 comments:

Unknown said...

Great solution! =) Thanks...

Unknown said...

To add a listener to Html element call Html.sinkEvents('needEvent') and add Listener on 'needEvent' to Html el.

Ravi said...

great thanks.. will look into it.