GWT: adding a custom widget to events with a list of cell tablets of custom widgets

Question

Our requirement is to create an editable grid using CellTable containing custom widgets in its cell. A custom widget has a text box and a search button associated with the text box. To add a custom widget as a cell, a subclass of the AbstractEditableCell class (provided by GWT) is created and overrides the render() and onBrowserEvent() methods.

The render(Context context, String value, SafeHtmlBuilder sb) method render(Context context, String value, SafeHtmlBuilder sb) custom widget cell creates a secure html for the widget and maps that secure html to the cell. But the problem I ran into is that the custom widget renders correctly, but it loses the associated events. The rendering method is given below:

 if (viewData.isEditing()) { textBoxSelector.setText(text); OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml safeHtmlObj = new OnlyToBeUsedInGeneratedCodeStringBlessedAsSafeHtml(textBoxSelector.toString()); sb.append(safeHtmlObj); } else { // The user pressed enter, but view data still exists. sb.append(html); } 

If I try to add a widget to the render() method using the following code, it will not add the widget.

  int left = parent.getAbsoluteLeft(); int top = parent.getAbsoluteTop(); String elementId = "ID" + left + top; try { parent.setId(elementId); // parent.removeFromParent(); RootPanel.get(elementId).add(textBoxSelector); } catch (AssertionError error) { RootPanel.get(elementId).add(textBoxSelector); } 

I would really appreciate if anyone could help me in achieving the addition of the widget to CellTable without losing the related events.

Answer 1

GWT cells are not compatible with GWT widgets. This means that you cannot have a GWT widget located inside the cell, and it is still functioning. Cells have an alternative event handling mechanism (see below)

The reason for this is because the cells are closer to stateless rendering. Given a data object, Cell spills out HTML. A single cell will be reused and supplant HTML for the various elements on the page - and will never support links to any of the DOM elements that it creates.

In the above example, you call "someWidget.toString ()". This will only return the HTML representation of your widget, and this is what loses event handling.

Handling Events in Cells

GWT Dev Guide for Custom Cells (more info available)

To handle events in cells, you need to override a separate method called onBrowserEvent . You also need to configure your cell to notify about specific events by calling super('click', 'keydown') in your constructor with a list of events that you are interested in listening to.

Since the cells are stateless renderers, the context of the rendered element that was clicked along with the original data object that was displayed by your cell will be transferred to onBrowserEvent. You can then apply the changes or manipulate the DOM as needed.

Here is an example taken from the dev manual above:

 @Override public void onBrowserEvent( Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> valueUpdater) { // Let AbstractCell handle the keydown event. super.onBrowserEvent(context, parent, value, event, valueUpdater); // Handle the click event. if ("click".equals(event.getType())) { // Ignore clicks that occur outside of the outermost element. EventTarget eventTarget = event.getEventTarget(); if (parent.getFirstChildElement().isOrHasChild(Element.as(eventTarget))) { doAction(value, valueUpdater); } } }