GWT: Pass click event from widget contained in cell to the column - gwt

I have a widget that I render in a GWT cell, which extends the AbstractCell, via the render function below. The column is created as below with the getValue and the FieldUpdater (update) function being defined. The intent is to set selected row to correspond to the clicked widget. However, when I click on the widget, the onBrowserEvent function of the cell is not called. I think this is happening because the widget in question contains a FlexTable within it.
I verified this by setting a breakpoint in the function AbstractCellTable.onBrowserEvent2 and noticed that the function does not fire a cell event since the
else if (section == getTableBodyElement())
return false. This is false because the section is a sub-section of the table body element corresponding to the table that I inserted via the widget.
Is there a way to pass the click in the inner table (widget) to the outer cell table?
//Render function to add widget to cell
public void render(Context context, MyItem value, SafeHtmlBuilder sb) {
if (value != null) {
SafeHtml safeValue = SafeHtmlUtils.fromTrustedString(value
.getWidget().getElement().getString());
sb.append(safeValue);
}
}
//Creating the corresponding column, setting up the field update,
// and adding the column to cell table
// Create Cell
MyItemCell myItemCell = new MyItemCell();
// Create Column
Column<MyItem, MyItem> myItemColumn = new Column<MyItem, MyItem>(myItemCell) {
#Override
public MyItem getValue(MyItem object) {
return object;
}
};
// add field updater
myItemColumn.setFieldUpdater(new FieldUpdater<MyItem, MyItem>() {
#Override
public void update(int index, MyItem object, MyItem value) {
// This function, for some reason,
// is not getting called when I click
// on the widget corresponding to MyItem
MyDataTable.this.getSelectionModel().setSelected(object, true);
}
});
// Add column to table
this.getDataTable().addColumn(myItemColumn);

FieldUpdater method is called when updating values in the column.
To catch click event, if I am not wrong then MyItemCell is your custom cell. so inside that cell implement onBrowserEvent event and handle click event there.
public void onBrowserEvent(final Event event) {
// TODO Auto-generated method stub
super.onBrowserEvent(event);
if (DOM.eventGetType(event) == Event.ONCLICK) {
System.out.println("event type -->> " + event.getType());
}
}

Related

GWT CellTable: How to Update A TextBox Dynamically

I have the following CellTable
When the user clicks the Pay Min. CheckBox, it should copy the value from the Due Now column over to the Pay Today text field AND recalculate the total for the Pay Today column.
Here is the code for the CheckboxCell (Pay Min.) and the TextInputCell (Pay Today) columns:
private Column<AccountInvoice, Boolean> buildPayMin() {
columnPayMin = new Column<AccountInvoice, Boolean>(new CheckboxCell(true, false)) {
#Override
public Boolean getValue(AccountInvoice object) {
return object.isPayMinimum();
}
#Override
public void onBrowserEvent(Context context, Element elem, AccountInvoice object, NativeEvent event){
// Get event type
int eventType = Event.as(event).getTypeInt();
// See if this is a 'change' event
if (eventType == Event.ONCHANGE) {
String value = columnMinDue.getValue(object);
// Get the cell to copy the value from
TextInputCell cell = (TextInputCell) columnPayToday.getCell();
// Re-create the view data for the cell
TextInputCell.ViewData viewData = new TextInputCell.ViewData(value);
cell.setViewData(object, viewData);
// Refresh
cellTable.redraw();
event.preventDefault();
event.stopPropagation();
}
}
};
columnPayMin.setDataStoreName(columnPayMinHeader);
columnPayMin.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
columnPayMin.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
return columnPayMin;
}
// -----------------------------------------------------------
private Column<AccountInvoice, String> buildPayToday() {
columnPayToday = new Column<AccountInvoice, String>(new TextInputCell()) {
#Override
public String getValue(AccountInvoice object) {
return object.getPaymentAmount();
}
};
columnPayToday.setDataStoreName(columnPayTodayHeader);
columnPayToday.setFieldUpdater(new FieldUpdater<AccountInvoice, String>() {
#Override
public void update(int index, AccountInvoice object, String value) {
object.setPaymentAmount(value);
cellTable.redraw();
}
});
return columnPayToday;
}
I can get the value to copy over, but the total for the Pay Today column doesn't refresh. It seems to refresh only when a value is manually entered into the Pay Today text field. I even tried doing:
columnPayToday.getFieldUpdater().update(context.getIndex(), object, value);
which didn't help either.
Thanks for any help you might provide.
ViewData represents a temporary value in your TextInputCell. When you call cellTable.redraw(), the TextInputCell reverts to the original value (the one from getValue() method for that column).
Do not redraw the table if you want to modify only the "view" state of TextInputCell, or call accountInvoice.setPayToday# (or whatever method is there) to update the object and then call refresh() on your ListDataProvider (which is a more efficient way to update a table compared to redraw).

GWT 2.5 DataGrid SelectionModel with Subrows

When using TableBuilder to create rows and sub rows, selection model isn't working as expected.
When clicking on a subrow's checkbox the row isn't been selected, however, the parent row become selected instead.
I tried to overload onBrowserEvent of the CheckboxCell in order to manually handle the selection but it seems that the DataGrid itself fires the selection event when pressing the checkboxcell.
In case where rows and subrows are from the same type, how can I add selection model that supports both rows and subrows?
#Override
public void onBrowserEvent(Context context, Element elem, final T object,
NativeEvent event) {
// The provided row is always the root row, so we need to find the
// correct one when a sub row was edited
actualIndex = context.getSubIndex();
actualObject = object;
if (0 != context.getSubIndex() && object instanceof RowDTO) {
actualIndex = context.getSubIndex();
actualObject = (T) ((RowDTO) object).getChild(actualIndex - 1);
context = new Context(context.getIndex(), context.getColumn(),
actualObject, actualIndex);
}
ValueUpdater<C> valueUpdater = (getFieldUpdater() == null) ? null
: new ValueUpdater<C>() {
#Override
public void update(C value) {
getFieldUpdater().update(actualIndex, object, value);
}
};
getCell().onBrowserEvent(context, elem, getValue(actualObject), event,
valueUpdater);
}

Events handling in GWT

I want to do something like this:
I want a cell table in which each cell is a class which I have written. I need to add a click event for the cell table. So How can I get which cell was clicked. As Cell is a class which I have defined, based on the clicked cell I need to perform some action. Can I somehow get the object details of the cell which was clicked. For e.g
I need a excel sheet which is like cell table, each cell in the excel sheet is a class I have defined, say the class holds the values like:
CellClass{
boolean isempty;
string name;
int id;
}
Now If i click in the excel sheet, how can I get which cell was clicked, so that I can tell user the name of the cell and whether it is empty or not.
Use ClickableTextCell to make clickable cell. Refer below Code detail:
nameCell = new ClickableTextCell() {
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String data, SafeHtmlBuilder sb) {
super.render(context, "", sb);
sb.appendHtmlConstant("<input type=text value='"+data+"' />);
};
nameColumn = new Column<Document, String>(nameCell) {
#Override
public String getValue(Document object) {
//code
}
};
Note that there is only one instance of a Cell for each Column, not every value is represented by a Cell instance. The structure you describe above would be the structure of the data you set in CellTable.setRowData.
A Cell has to declare the events it's interested in, via the super constructor in AbstractCell or the getConsumedEvents method defined in Cell. In your case the "click" event.
You can then implement the onBrowserEvent method in your custom cell and react to the click. A context will be passed to this method indicating which row and column the event refers to (see Cell.Context) as well as the key and value associated with the click.
In your case, the custom Cell would look something like this:
public class MyCell extends AbstractCell<String> {
public MyCell() {
super("click");
}
#Override
public void onBrowserEvent(Context context, Element parent, String value, NativeEvent event, ValueUpdater<String> 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);
}
}
}
}
You can also intercept the event at the Column level.
You can find more information in the Dev Guide

Handling click events from CellTable, how to handle them back to default dispatcher?

I have a CellTable with one custom column where I render it manually and put a FlowPanel with a bunch of HTMLPanel/Anchor/FlowPanel widgets, and among them is DecoratorPanel.
DecoratorPanel renders as a table, of course.
Rendering happens like this:
public class MyExpandableCell extends AbstractCell<String> {
...
#Override
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) {
if (value != null) {
FlowPanel fp = createDetailsFlowPanel(value);
sb.appendHtmlConstant(fp.getElement().getString());
}
}
Now, I have added a handler for click events to my main CellTable. In my handler I traverse the tree to find a first TR belonging to my CellTable, by checking if it contains "even row" or "odd row" CSS classes.
However, when click happens inside of the DecoratorPanel (which is inside of my cell table's TD), my handler also gets triggered, since the click belongs to the cell table area.
I can detect this my seeing that parent TR does not have CellTable CSS classes.
QUESTION: how can I return processing of such click events to the DecoratorPanel - where it really belongs to? As it is now, my DecoratorPanel does not expand and I think because my click handler intercepts and suppresses all clicks on the CellTable level.
table = setupMyCellTable(PAGE_SIZE, CLIENT_BUNDLE, myCellTableResources);
mydataprovider.addDataDisplay(table);
table.sinkEvents(Event.ONCLICK);
table.addDomHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent e) {
boolean isClick = "click".equals(e.getNativeEvent().getType());
if (isClick) {
Element originalElement = e.getNativeEvent().getEventTarget().cast();
Element element = originalElement;
String ctTrClassEven = CLIENT_BUNDLE.mainCss().cellTableEvenRow();
String ctTrClassEven = CLIENT_BUNDLE.mainCss().cellTableOddRow();
// Looking for closest parent TR which has one
// of the two row class names (for this cellTable):
while (element != null
&& !"tr".equalsIgnoreCase(element.getTagName())
&& !(element.getClassName().contains(ctTrClassEven) ||
element.getClassName().contains(ctTrClassEven))) {
element = element.getParentElement();
}
if (element != null) {
if (element.getClassName().contains(ctTrClassEven)
|| element.getClassName().contains(ctTrClassEven)) {
// Found cell table's TR. Set new TR height.
} else {
// Found TR from DecoratorPanel inside of the celltable's cell.
// Do nothing. But how do I make sure
// that decorator panel processes this click and expands?
return;
// Did not work: NS_ERROR_ILLEGAL_VALUE javascript exception.
// if (originalElement != null) {
// originalElement.dispatchEvent(e.getNativeEvent());
// }
}
} else {
debugStr.setText("(did not find tr)");
}
}
}
}, ClickEvent.getType());
Looks like a bug in GWT, triggered because decorator panel uses table to render itself:
http://code.google.com/p/google-web-toolkit/issues/detail?id=5714
(another example http://code.google.com/p/google-web-toolkit/issues/detail?id=6750)
Fix is expected to be shipped with GWT 2.5.

How to add a Clickhandler to a cellTable cell (or row )

I would like to have a handler on a column of my cellTable.The column is an ImageResourceCell and I would that when I click on it, it delete the row
Here is my code
Column<MyObject, ImageResource> imageColumn =
new Column<MyObject, ImageResource>(newImageResourceCell()) {
#Override
public ImageResource getValue(MyObject object) {
return Bundle.Util.getInstance().deleteRegexButton();
}
};
cellTable.addColumn(imageColumn,SafeHtmlUtils.fromSafeConstant("<br/>");
But I didn't know how to insert a handler as described
Is it possible ??
any suggestions are welcome
Thanks.
Cells have to declare the events they handle, then the browser event can be passed to the cell.
ImageResourceCell myImgCell = new ImageResourceCell() {
public Set<String> getConsumedEvents() {
HashSet<String> events = new HashSet<String>();
events.add("click");
return events;
}
};
Column<MyObject, ImageResource> imageColumn = new Column<MyObject, ImageResource>(myImgCell) {
#Override
public ImageResource getValue(MyObject dataObj) {
return Bundle.Util.getInstance().deleteRegexButton();
}
#Override
public void onBrowserEvent(Context context, Element elem,
MyObject object, NativeEvent event) {
super.onBrowserEvent(context, elem, object, event);
if ("click".equals(event.getType())) {
//call your click event handler here
}
}
};
More info here: http://code.google.com/webtoolkit/doc/latest/DevGuideUiCustomCells.html
Note: this works with GWT 2.4, did not try with GWT 2.2.
Have you seen Adding clickHandler to row in CellTable in GWT??
A CellTable has built in support for handling click events. You can add a CellPreviewHandler that will be called among others when a row is clicked. It will receive a number of items in the event like the native event, cell, and data row value. Because it fires not only for click events you need to check if the click event was fired. Simply test the event passed:
boolean isClick = "click".equals(event.getNativeEvent().getType())