Consuming GWT click events

Question

Due to performance reasons, I have a custom made table. The table consists of columns that are created as HTML DIVs, and the row is wrapped into an AbsolutePanel. The position of the column(s) and the row(s) is absolute and calculated on the render loop. The table is added into a ScrollPanel and only renders the visible portion of the rows, and adds rows when the user scrolls.

Customer requirement is to open a PopupPanel to show details about the row when the row is clicked. I've added a ClickHandler to the row panel by sinking the click event into it, which works fine.

The problem is, if I add e.g. a standard link or any clickable item into one of the cells in the table, clicking on the said item(s) results in also the row click handler firing, which I want to somehow prevent. The source of the event is the row Element, not the link/icon/whatever that was clicked.

Any help solving this (perhaps a completely different approach ?) is much appreciated.

Answer 1

I would use gwtquery because of its simplicity and performance.

I don't know the final dom renderized by your app, but if we suppose you have something like this:

<div id="column1">
  <div id="row1_1" class="my_row" product_id="whatever"> content </div>
   ...
</div>

Your code could be something like this:

import static com.google.gwt.query.client.GQuery.*;

$(".my_row").click(new Function(){
  public void f() {
    // The gquery instance of the row clicked
    GQuery thisRow = $(this);

    // Use gquery methods to get some info of your row
    String thisId = thisRow.id();
    String productId = thisRow.attr("product_id");
    Element thisElement = thisRow.get(0);

    // do Something with your row 
    ...

  }
});