title: Handling onClick for a checkbox in a CellTable Header
body: <p>I am trying to create a CellTable that has a column with some text and a checkbox, which will be used as a select all checkbox (see the drawing below, "cb" is checkbox).  Currently I am using an class derived from Header and overriding it's render method to output the text and a checkbox.  I am overriding onBrowserEvent() however it is only giving me onChange events, which would work fine except that the checkbox doesn't function correctly.  Does anyone have any ideas on this?</p>
  
  <pre><code>+-------+------------+
  | col 1 | Select All |
  |       |     cb     | 
  +-------+------------+
  | row 1 |     cb     |
  +-------+------------+
  </code></pre>
  
  <p>The issues I'm having with the checkbox is that when it's not checked, you have to click it twice for the checkmark to appear (at least on Chrome), even though it's "checked" property is true the first time.  One click unchecks it correctly.</p>
  
  <p>Here is some code:</p>
  
  <h2>Setup the CellTable columns:</h2>
  
  <pre><code>/** Setup the table's columns. */
  private void setupTableColumns() {
      // Add the first column:
      TextColumn&lt;MyObject&gt; column1 = new TextColumn&lt;MyObject&gt;() {
          @Override
          public String getValue(final MyObject object) {
              return object.getColumn1Text();
          }
      };
      table.addColumn(macColumn, SafeHtmlUtils.fromSafeConstant("Column1"));
  
      // the checkbox column for selecting the lease
      Column&lt;MyObject, Boolean&gt; checkColumn = new Column&lt;MyObject, Boolean&gt;(
              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);
  }
  </code></pre>
  
  <h2>My Select All Header:</h2>
  
  <pre><code>public static class SelectAllHeader extends Header&lt;Boolean&gt; {
      private final String checkboxID = "selectAllCheckbox";
      private ISelectAllHandler handler = null;
  
      @Override
      public void render(final Context context, final SafeHtmlBuilder sb) {
          String html = "&lt;div&gt;Select All&lt;div&gt;&lt;input type=\"checkbox\" id=\"" + checkboxID + "\"/&gt;";
  
          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;
      }
  
  }
  </code></pre>