OnClick processing for checkbox in CellTable header

Question

I am trying to create a CellTable that has a column with some text and a checkbox that will be used as the "Select All" checkbox (see the figure below, "cb" is the checkbox). I am currently using a class derived from the header and overriding its renderer method to display the text and checkbox. I override onBrowserEvent (), but it only gives me onChange events that will work fine, except that the checkbox is not working correctly. Anyone have any ideas on this?

+-------+------------+ | col 1 | Select All | | | cb | +-------+------------+ | row 1 | cb | +-------+------------+ 

The problem that I have with this checkbox is that when it is not checked, you need to double-click it on the checkmark (at least in Chrome), even if the "checked" property is true for the first time. One click canceled it correctly.

Here is the code:

Customizing CellTable columns:

 /** Setup the table columns. */ private void setupTableColumns() { // Add the first column: TextColumn<MyObject> column1 = new TextColumn<MyObject>() { @Override public String getValue(final MyObject object) { return object.getColumn1Text(); } }; table.addColumn(macColumn, SafeHtmlUtils.fromSafeConstant("Column1")); // the checkbox column for selecting the lease Column<MyObject, Boolean> checkColumn = new Column<MyObject, Boolean>( new CheckboxCell(true, false)) { @Override public Boolean getValue(final MyObject object) { return selectionModel.isSelected(object); } }; SelectAllHeader selectAll = new SelectAllHeader(); selectAll.setSelectAllHandler(new SelectHandler()); table.addColumn(checkColumn, selectAll); } 

My Select All Header:

 public static class SelectAllHeader extends Header<Boolean> { private final String checkboxID = "selectAllCheckbox"; private ISelectAllHandler handler = null; @Override public void render(final Context context, final SafeHtmlBuilder sb) { String html = "<div>Select All<div><input type=\"checkbox\" id=\"" + checkboxID + "\"/>"; sb.appendHtmlConstant(html); } private final Boolean allSelected; public SelectAllHeader() { super(new CheckboxCell()); allSelected = false; } @Override public Boolean getValue() { Element checkboxElem = DOM.getElementById(checkboxID); return checkboxElem.getPropertyBoolean("checked"); } @Override public void onBrowserEvent(final Context context, final Element element, final NativeEvent event) { Event evt = Event.as(event); int eventType = evt.getTypeInt(); super.onBrowserEvent(context, element, event); switch (eventType) { case Event.ONCHANGE: handler.onSelectAllClicked(getValue()); event.preventDefault(); break; default: break; } } public void setSelectAllHandler(final ISelectAllHandler handler) { this.handler = handler; } } 

Answer 1

It looks like you create a check box without checking whenever you render a header that can erase the selection state whenever overriding table cells.

Try to save the checked state and uncheck the state box. It looks like you're halfway with allSelected , you just don't use it.

EDIT Here is a working implementation that I just wrote for Zanata (see SearchResultsView.java ). HasValue interface is implemented so that value change events can be processed in a standard way. I have not overridden the rendering method, if you want to do this, make sure you use getValue() to determine if the checked or unchecked checkbox is displayed. The selection / deselection logic is processed in the corresponding presenter class (see SearchResultsPresenter.java ).

 private class CheckboxHeader extends Header<Boolean> implements HasValue<Boolean> { private boolean checked; private HandlerManager handlerManager; public CheckboxHeader() { //TODO consider custom cell with text super(new CheckboxCell()); checked = false; } // This method is invoked to pass the value to the CheckboxCell render method @Override public Boolean getValue() { return checked; } @Override public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent) { int eventType = Event.as(nativeEvent).getTypeInt(); if (eventType == Event.ONCHANGE) { nativeEvent.preventDefault(); //use value setter to easily fire change event to handlers setValue(!checked, true); } } @Override public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Boolean> handler) { return ensureHandlerManager().addHandler(ValueChangeEvent.getType(), handler); } @Override public void fireEvent(GwtEvent<?> event) { ensureHandlerManager().fireEvent(event); } @Override public void setValue(Boolean value) { checked = value; } @Override public void setValue(Boolean value, boolean fireEvents) { checked = value; if (fireEvents) { ValueChangeEvent.fire(this, value); } } private HandlerManager ensureHandlerManager() { if (handlerManager == null) { handlerManager = new HandlerManager(this); } return handlerManager; } }