Custom Clickable Cell with CellTable

[Adam]

Hey Gang,

I've created a lightweight custom cell that extends AbstractCell. I've
included the code below. What I've determined is that the "parent" is
the DIV associated with the cell. What I'm trying to do is make it so
if I click anywhere in the cell including the text of the tds that the
onBrowserEvent is fired. I've figured out that what's happening is
that the click on the table I'm rendering or the tds is "swallowing"
the events of the div and therefore the onBrowserEvent isn't being
called. If this was a regular widget I'd just do a sinkEvent. The
issue I'm having is hope to sink the td mouse events into the cell
div. I looked at the source for AbstractCell and saw that public void
setValue(...) is calling render and also has access to the parent so
I've tried to do something like


DOM.sinkEvent(parent.getFirstChildElement().getFirstChildElement().getFirstChildElement(),

Event.ONCLICK). But that didn't see to do the trick either. Any
thoughts would be most appreciated.

class OrderCell extends AbstractCell<MockOrder> {
public OrderCell() {
super("click", "keydown");
}

@Override
public void onBrowserEvent(Element parent, MockOrder value,
Object key,
NativeEvent event, ValueUpdater<MockOrder> valueUpdater) {
super.onBrowserEvent(parent, value, key, event, valueUpdater);
if ("click".equals(event.getType())) {
onEnterKeyDown(parent, value, key, event, valueUpdater);
}
}

@Override
protected void onEnterKeyDown(Element parent, MockOrder value,
Object key,
NativeEvent event, ValueUpdater<MockOrder> valueUpdater) {
if (valueUpdater != null) {
valueUpdater.update(value);
}
}

@Override
public void render(MockOrder value, Object key, SafeHtmlBuilder
sb) {
// Value can be null, so do a null check..
if (value == null) {
return;
}

sb.appendHtmlConstant("<table>");

// Add the name and address.
sb.appendHtmlConstant("<tr><td>");
sb.appendEscaped(value.getApplicant().getLastName() + ", " +
value.getApplicant().getFirstName());
sb.appendHtmlConstant("</td></tr><tr><td>");
sb.appendEscaped(value.getStatus());
sb.appendHtmlConstant("</td></tr></table>");
}
}

[matttai]

Hi Adam,

What exactly is it that you are trying to achieve by doing this?

If you wish to find the cell that was clicked and manipulate it you
can also do it this way :

Add clickHandler to table/grid
Call getSource() on received clickEvent
Cast source to grid/flextable
Call getCellForEvent(event) on the table which gives you a Cell
element

Then you can call row / cell index on the object and you would have
your row / column.

Cheers,

Matt

[Adam]

Matt thanks for the response.

By default the celltable wires up click events for the cell (aka
div). The problem is when I click on any text in the "<table></
table>" it's swallowing the click event and therefore the celltable is
never notified that I clicked in the cell.

Here's an example of what I'm talking about:

--------------------------------- (row)
Bar, Foo ** |
123 Main St ** |
----------------------------------(end row)

if I click anywhere on "Bar, Foo" or "123 Main St" nothing happens.
if I click on either of the "**" then it does the click event (via the
FieldUpdater.update). Simply put I'd like for it to work if I click
anywhere inside the cell including the text. I think though you've
answered my question though in a round about way. I can add a click
listener to the table I defined and then call the onBrowserEvent
myself.

Unless you or someone else can think of a better way.

-Adam

On May 12, 10:53 am, matttai <matt...@Hotmail.com> wrote:
> Hi Adam,
>
> What exactly is it that you are trying to achieve by doing this?
>

> If you wish to find thecellthat was clicked and manipulate it you

> can also do it this way :
>
> Add clickHandler to table/grid
> Call getSource() on received clickEvent
> Cast source to grid/flextable
> Call getCellForEvent(event) on the table which gives you aCell
> element
>

> Then you can call row /cellindex on the object and you would have

> your row / column.
>
> Cheers,
>
> Matt
>
> On May 7, 5:51 am, Adam <ambr...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hey Gang,
>

> > I've created a lightweight customcellthat extends AbstractCell. I've

> > included the code below.  What I've determined is that the "parent" is

> > the DIV associated with thecell.  What I'm trying to do is make it so
> > if I click anywhere in thecellincluding the text of the tds that the

> > onBrowserEvent is fired. I've figured out that what's happening is
> > that the click on the table I'm rendering or the tds is "swallowing"
> > the events of the div and therefore the onBrowserEvent isn't being
> > called.  If this was a regular widget I'd just do a sinkEvent.  The
> > issue I'm having is hope to sink the td mouse events into thecell
> > div.  I looked at the source for AbstractCell and saw that public void
> > setValue(...) is calling render and also has access to the parent so
> > I've tried to do something like
>
> > DOM.sinkEvent(parent.getFirstChildElement().getFirstChildElement().getFirst ChildElement(),
>
> >Event.ONCLICK).  But that didn't see to do the trick either. Any
> > thoughts would be most appreciated.
>
> >         class OrderCell extends AbstractCell<MockOrder> {
> >             public OrderCell() {
> >                 super("click", "keydown");
> >             }
>
> >             @Override
> >             public void onBrowserEvent(Element parent, MockOrder value,
> > Object key,

> >                         NativeEventevent, ValueUpdater<MockOrder> valueUpdater) {
> >                 super.onBrowserEvent(parent, value, key,event, valueUpdater);
> >                 if ("click".equals(event.getType())) {
> >                         onEnterKeyDown(parent, value, key,event, valueUpdater);

> >                 }
> >             }
>
> >             @Override
> >             protected void onEnterKeyDown(Element parent, MockOrder value,
> > Object key,

> >                         NativeEventevent, ValueUpdater<MockOrder> valueUpdater) {