In GWT 2.6 CellTable, I'm writing a single click event to perform some operation. I can not get the correct Row Index while clicking on the CellTable Row; only a double click event returns the row correctly.
final SingleSelectionModel<PatientDTO> selectionModel =
new SingleSelectionModel<PatientDTO>();
patientsTable.setSelectionModel(selectionModel);
patientsTable.addDomHandler(new ClickHandler()
{
#Override
public void onClick(ClickEvent event)
{
PatientDTO selected = selectionModel.getSelectedObject();
if (selected != null)
{
RootLayoutPanel.get().clear();
RootLayoutPanel.get().add(new PatientPanel(selected));
}
}
}, ClickEvent.getType());
Either use SingleSelectionModel or MultiSelectionModel and add SelectionChangeHandler on it that will be fired when selection is changed in the CellTable
Sample code:
final SingleSelectionModel<Contact> selectionModel = new SingleSelectionModel<Contact>();
//final MultiSelectionModel<Contact> selectionModel = new MultiSelectionModel<Contact>();
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Set<Contact> selected = selectionModel.getSelectedSet();
if (selected != null) {
for (Contact contact : selected) {
System.out.println("You selected: " + contact.name);
}
}
}
});
OR alternatively try with CellPreviewHandler
table.addCellPreviewHandler(new Handler<Contact>() {
#Override
public void onCellPreview(CellPreviewEvent<Contact> event) {
int row = event.getIndex();
int column = event.getColumn();
if ("focus".equals(event.getNativeEvent().getType())) {
//..
}
if ("blur".equals(event.getNativeEvent().getType())) {
//...
}
if ("mousedown".equals(event.getNativeEvent().getType())) {
//..
}
if ("mouseover".equals(event.getNativeEvent().getType())) {
//..
}
}
});
Related
I've an combo box which is composed of a text field and a popup with a CellTable showing the suggestion items. The text field has a change handler that updates the CellTable's selection.
When typing a character and clicking an already selected suggestion, the first click is swallowed. The second click works and triggers the selection via the CellTable.addDomHandler(...).
Any idea why first click is swallowed?
Example code:
private static class SuggestFieldTextAndPopupSandbox extends SimplePanel {
private final TextField mText;
private CellTable<Handle<String>> mTable;
private SingleSelectionModel<Handle<String>> mTableSelection;
private SingleSelectionModel<Handle<String>> mSelection;
private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
private PopupPanel mPopup;
private List<Handle<String>> mData;
public SuggestFieldTextAndPopupSandbox() {
mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
mSelection = new SingleSelectionModel<Handle<String>>();
mText = new TextField();
mText.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent pEvent) {
mPopup.showRelativeTo(mText);
}
});
mText.addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent pEvent) {
mTableSelection.setSelected(startsWith(mText.getValue()), true);
}
});
mText.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent pEvent) {
mText.setText(mText.getText().toUpperCase());
}
});
mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));
mTable.setTableLayoutFixed(false);
mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
mTable.setSelectionModel(mTableSelection);
mTable.addDomHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent pEvent) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
}, ClickEvent.getType());
mTable.addColumn(new TextColumn<Handle<String>>() {
#Override
public String getValue(Handle<String> pObject) {
return pObject.get();
}
});
mTable.setRowData(mData);
mPopup = new PopupPanel();
mPopup.setAutoHideEnabled(true);
mPopup.setWidget(mTable);
mPopup.setWidth("200px");
mPopup.setHeight("200px");
VerticalPanel p = new VerticalPanel();
p.add(mText);
setWidget(p);
}
private Handle<String> startsWith(final String pValue) {
final String val = nullToEmpty(pValue).toLowerCase();
int i = 0;
for (Handle<String> item : mData) {
String value = item.get();
if (value != null && value.toLowerCase().startsWith(val)) {
return item;
}
i++;
}
return null;
}
}
I reproduced your issue and here is the problem:
when you click on the suggestions the following is happening:
The text field is loosing focus which causes the corresponding ChangeEvent to be dealt with followed by the BlurEvent.
The click causes the popup to get the focus now which is why it is swallowed.
If you remove the ChangeHandler and the BlurHandler of the text field the issue disappears. But I think I found another solution
Try replacing the DOM handler of the mTable with a selection handler relative to the mTableSelection as follows:
mTableSelection.addSelectionChangeHandler(new Handler(){
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
});
Found a way how to properly solve this.
Skipping the blur handler when user hovers the suggestion list area seemed to fix that issue, at least from the tests that were done didn't see any more issues.
This was necessary because just before the user clicks a suggestion item, the text is blurred and it fires a selection change. This in turn cancels the selection made when user clicks an item.
I had my data in a FlexTable, but am migrating to a DataGrid so I can easily add pagination. I get the data via a REST call. I can't seem to get the data to actually display. Here are the relevant snippets:
private DataGrid<SearchResult> resultsGrid = new DataGrid<SearchResult>();
resultsGrid.setAutoHeaderRefreshDisabled(true);
TextColumn<SearchResult> titleColumn = new TextColumn<SearchResult>() {
#Override
public String getValue(SearchResult object) {
return object.getTitle();
}
};
resultsGrid.addColumn(titleColumn, "Document Title");
ButtonCell buttonCell = new ButtonCell();
Column<SearchResult, String> buttonColumn = new Column<SearchResult, String>(buttonCell){
#Override
public String getValue(SearchResult object) {
return "Show";
}
};
resultsGrid.addColumn(buttonColumn, "");
buttonColumn.setFieldUpdater(new FieldUpdater<SearchResult, String>() {
public void update(int index, SearchResult object, String value) {
doPreview(object.title);
}
});
TextColumn<SearchResult> roleColumn = new TextColumn<SearchResult>() {
#Override
public String getValue(SearchResult object) {
return object.getRoles();
}
#Override
public String getCellStyleNames(Context context, SearchResult object) {
if (object.containsCurrentRole)
return "highlight";
else
return null;
}
};
resultsGrid.addColumn(roleColumn, "Associated Roles");
final SingleSelectionModel<SearchResult> selectionModel = new SingleSelectionModel<SearchResult>();
resultsGrid.setSelectionModel(selectionModel);
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
SearchResult selected = selectionModel.getSelectedObject();
if (selected != null) {
clearWordCloud();
getWordCloud(selected.getTitle());
}
}
});
dataProvider.addDataDisplay(resultsGrid);
// Create a Pager to control the table.
SimplePager.Resources pagerResources = GWT.create(SimplePager.Resources.class);
pager = new SimplePager(TextLocation.CENTER, pagerResources, false, 0, true);
pager.setDisplay(resultsGrid);
resultsGrid.setVisible(true);
resultsGrid.addStyleName("results");
mainPanel.add(resultsGrid);
...
The function that gets called after a search:
private void updateTable(List<SearchResult> results) {
dataProvider.getList().addAll(results);
dataProvider.refresh();
dataProvider.flush();
resultsGrid.setVisible(true);
resultsFlexTable.setVisible(true);
}
At first I was missing the flush and refresh, but adding them had no effect. I'm kind of stumped.
The most likely problem is that your DataGrid has a height of zero. DataGrid implements RequiresResize, which means that its height either has to be set explicitly, or it will acquire its height from a parent widget if this parent widget implements ProvidesResize. FlexTable does not implement ProvidesResize interface.
NB: You don't need flush and refresh - adding data to the DataProvider refreshes the grid.
I have two buttons(edit + delete) in one column.
ButtonCell functionButtonCell = new ButtonCell() {
#Override
public void render(final Context context, final SafeHtml data, final SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<button type='button' class='gwt-Button' style = 'width:60px;margin:1px;'>Edit</button>");
sb.appendHtmlConstant("<br/>");
sb.appendHtmlConstant("<button type='button' class='gwt-Button' style = 'width:60px;margin:1px;'>Delete</button>");
}
};
functionColumn = new Column<AdminModel, String>(functionButtonCell) {
public String getValue(final AdminModel object) {
return object.getSeq().toString();
}
};
Bind event for this column in Presenter as
.........
view.getFunctionColumn().setFieldUpdater(new FieldUpdater<AdminModel, String>() {
public void update(final int index, final AdminModel object, final String value) {
Window.alert(index + "-" + value);
}
});
After clicked on edit button , alert-box has appeared , but not on delete button. When I clicked on delete button , nothing has appeared. What would be the problem ?
Addition: How can I decide which button was clicked by user (edit or delete) from my presenter ?
I would really appreciate any of your suggestions because I am troubled on it for a long times. Thanks!
ButtonCell filters events on the first child element only: https://gwt.googlesource.com/gwt/+/2.6.1/user/src/com/google/gwt/cell/client/ButtonCell.java This is why you don't get an event when clicking the second button (note: the goal of that code is to make sure you clicked on the button, and not on blank space around the button; see https://gwt.googlesource.com/gwt/+/a0dc88c8be7408be9554f746eb1ec93798183a28)
The easiest way to implement a two-button cell is to use a CompositeCell; it requires that child cells are rendered into sibling elements though (uses <span>s by default, example below overrides the rendering to use <div>s so your buttons stack each on its own line).
new CompositeCell<AdminModel>(Arrays.asList(
// First button
new HasCell<AdminModel, String>() {
#Override public Cell<String> getCell() { return new ButtonCell(); }
#Override public FieldUpdated<AdminModel, String> getFieldUpdater() {
return new FieldUpdater<AdminModel, String>() {
#Override public void update(int index, AdminModel object, String value) {
Window.alert("Edit " + object.getId());
}
};
}
#Override public String getValue(AdminModel o) {
return "Edit";
}
},
// Second button
new HasCell<AdminModel, String>() {
#Override public Cell<String> getCell() { return new ButtonCell(); }
#Override public FieldUpdated<AdminModel, String> getFieldUpdater() {
return new FieldUpdater<AdminModel, String>() {
#Override public void update(int index, AdminModel object, String value) {
Window.alert("Delete " + object.getId());
}
};
}
#Override public String getValue(AdminModel o) {
return "Delete";
}
}) {
#Override protected <X> void render(Cell.Context context, AdminModel value, SafeHtmlBuilder sb, HasCell<String,X> hasCell) {
// use a <div> instead of the default <span>
Cell<X> cell = hasCell.getCell();
sb.appendHtmlConstant("<div>");
cell.render(context, hasCell.getValue(value), sb);
sb.appendHtmlConstant("</div>");
}
};
(note: in your case, because the button's text doesn't depend on the row object, maybe you should rather use an ActionCell; it would better fit "semantically" with what you're doing, but otherwise it's almost the same; with an ActionCell, you'd use HasCell<AdminModel, AdminModel>, ActionCell<AdminModel>, getFieldUpdater would return null, and thegetValueof theHasCellwould just return theAdminModel` argument as-is).
Otherwise, implement your Cell (or AbstractCell) entirely by yourself.
Ideally, a column should have only one type of cell be it ImageCell, ButtonCell etc. Because all this ImageCell and ButtonCell does not provide any in-built events. The events are handled by FieldUpdater itself which does not have differentiators to identify that which ButtonCell is clicked. Ideally on click of that column, the field-updater will be called.
You should rather create your own composite widget which extends HasCell. This composite widget will have two different buttons and those in built methods are called on click of respective button.
public void onModuleLoad() {
CellTable<Person> table = new CellTable<Person>();
List<HasCell<Person, ?>> cells = new LinkedList<HasCell<Person, ?>>();
cells.add(new ActionHasCell("Edit", new Delegate<Person>() {
#Override
public void execute(Person object) {
// EDIT CODE
}
}));
cells.add(new ActionHasCell("Delete", new Delegate<Person>() {
#Override
public void execute(Person object) {
// DELETE CODE
}
}));
CompositeCell<Person> cell = new CompositeCell<Person>(cells);
table.addColumn(new TextColumn<Person>() {
#Override
public String getValue(Person object) {
return object.getName()
}
}, "Name");
// ADD Cells for Age and Address
table.addColumn(new Column<Person, Person>(cell) {
#Override
public Person getValue(Person object) {
return object;
}
}, "Actions");
}
private class ActionHasCell implements HasCell<Person, Person> {
private ActionCell<Person> cell;
public ActionHasCell(String text, Delegate<Person> delegate) {
cell = new ActionCell<Person>(text, delegate);
}
#Override
public Cell<Person> getCell() {
return cell;
}
#Override
public FieldUpdater<Person, Person> getFieldUpdater() {
return null;
}
#Override
public Person getValue(Person object) {
return object;
}
}
Also, see the link below.
[GWT CellTable-Need to have two buttons in last single cell of each row
Is there a way to give the user a prompt window popup when clicking the remove field button?
enabling the remove button :
setCanRemoveRecords(true);
When I click the red remove button, I want a confirmation box ask me if I want to delete it, yes or no. What should I use to bring that up?
Should I be adding something into
#Override
public void removeData(Record group)
{
...
}
Here are the options:
Use addCellClickHandler on ListGrid and perform operation based on cell no
Add addRecordClickHandler on ListGridField itself that is used for delete icon
I prefer last option.
Sample code:
final ListGrid countryGrid = new ListGrid();
...
countryGrid.setWarnOnRemoval(true);
countryGrid.setCanRemoveRecords(true);
ListGridField ls = new ListGridField();
countryGrid.setRemoveFieldProperties(ls);
ls.setHoverCustomizer(new HoverCustomizer() {
#Override
public String hoverHTML(Object value, ListGridRecord record, int rowNum, int colNum) {
// System.out.println(colNum);
return "click here to delete this record";
}
});
ls.addRecordClickHandler(new RecordClickHandler() {
#Override
public void onRecordClick(final RecordClickEvent event) {
SC.confirm("Are you sure?", new BooleanCallback() {
#Override
public void execute(Boolean value) {
if (value == null || !value) {
event.cancel();
}
}
});
}
});
/*countryGrid.addCellClickHandler(new CellClickHandler() {
#Override
public void onCellClick(final CellClickEvent event) {
// column number having delete icon
// System.out.println(event.getColNum());
if (event.getColNum() == 3) {
SC.confirm("Are you sure", new BooleanCallback() {
#Override
public void execute(Boolean value) {
if (value == null || !value) {
event.cancel();
}
}
});
}
}
});*/
You can use the following methods:
ListGrid#setWarnOnRemoval for showing the warning message and
ListGrid#setWarnOnRemovalMessage for setting a customized message.
Refer documentation.
I have a GXT 2.x application with a Menubar Item that renders a separate LayoutContainer.
Here's the hierarchy
MainUI.java -> MenuBar.java -> ReservationPopUp.java
I have replaced my contents of ReservationPopUp.java with KNOWN working examples of LayoutContainer implementations and they respond to the ESC key and "X" button.
Here's how the MenuItem renders the ReservationPopUp.java
MenuItem mntmReserve = new MenuItem("Reserve");
mntmReserve.addSelectionListener(new SelectionListener<MenuEvent>() {
public void componentSelected(MenuEvent ce) {
RootPanel.get().add(new ReservationPopUp());
}
Here's a slimmed down version of my ReservationPopUp.java
public class ReservationPopUp extends LayoutContainer {
public ReservationPopUp() {
}
#Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
setSize("1024", "809");
final Window window = new Window();
window.setDraggable(false);
window.setSize(537, 399);
window.setPlain(true);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Reserve A Server");
window.setClosable(true);
window.setOnEsc(true);
window.setSize("465", "345");
window.setLayout(new AbsoluteLayout());
LabelField lblfldUsers = new LabelField("Users");
window.add(lblfldUsers, new AbsoluteData(43, 218));
final ComboBox<AsyncUser> userList = new ComboBox<AsyncUser>();
window.add(userList, new AbsoluteData(81, 218));
userList.setEmptyText("Select a User...");
userList.setSize("347px", "24px");
LabelField labelServers = new LabelField("Servers");
window.add(labelServers, new AbsoluteData(32, 6));
final DualListField<AsyncServer> serverList = new DualListField<AsyncServer>();
....
window.add(serverList, new AbsoluteData(81, 6));
serverList.setSize("347px", "206px");
window.addButton(new Button("Cancel", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
ReservationPopUp.this.hide();
}
}));
window.addButton(new Button("Reserve", new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent ce) {
if (serverList.getToList().getListView().getItemCount() == 0 ) {
MessageBox.alert("Invalid Selection","No Server(s) Selected", null);
} else if ( userList.getValue() == null) {
} else {
// DO some stuff
ReservationPopUp.this.hide();
}
}
}));
window.addWindowListener(new WindowListener() {
#Override
public void windowHide(WindowEvent we) {
ReservationPopUp.this.hide();
}
});
window.setFocusWidget(window.getButtonBar().getItem(0));
add(window);
}
}
Window is a popup, it doesn't need to be (and shouldn't be) added to anything. Extend the Window class instead of the LayoutContainer, and instead of adding the ReservationPopup to the page, just call Window.show().