What would be a good way of filtering a GWT CellList using multiple CheckBoxes?

Question

Working in Google Web Toolkit (GWT) I am using a CellList to render the details of a list of Tariffs (using a CompositeCell to show a CheckBoxCell next to a custom cell of my own).

I want to filter the list by tariff length (12, 18, 24, 36 months etc). I would like to render a checkbox for each tariff length at the top of the list, and update the dataProvider as necessary when users uncheck and recheck a box.

I do not know in advance the set of tariff lengths, they will be extracted from the result set when the page is rendered. There could just be two (requiring two checkboxes), but possibly there could be 10 (requiring 10 checkboxes) - I only want to render a checkbox for each as needed.

So somehow I need to associate an int value with each checkbox, and then pass that int to a function that updates the list by removing all tariffs that match. I'm just not sure how to add the handler for the checkboxes and how to get the value for that particular box.

This is what I'm thinking:

    // panel to hold boxes
    private Panel contractLengthPanel = new HorizontalPanel();      
    textPanel2.add(contractLengthPanel);

    // create a set of the terms, by looping the result set
    Set<String> contractTerms = new HashSet<String>();
    for(ElecTariff tariff : tariffs)
    {
        contractTerms.add(Integer.toString(tariff.getContractLength()));
    }

    // loop that set, creating a CheckBox for each value
    for(String term : contractTerms)
    {
        CheckBox box = new CheckBox(term + " Months");

        // set all boxes with the same name, and a unique id
        box.getElement().setAttribute("name", "termBoxes");
        box.getElement().setAttribute("id", "termBox" + term);

        contractLengthPanel.add(box);
    }

Now I'm not sure if I'm along the right lines here, but now I have each box as part of the same group (they have the same name) I would like to use that to add a handler that is called when a box is checked or unchecked, passing the box id (which contains the tariff length) to that function.

I hope this wasn't too confusingly written. Help appreciated.

Thomas Broyer Thomas Broyer · Accepted Answer · 2013-01-30T16:36:51

There really is nothing like a "group of checkboxes" in HTML, and neither there is in GWT. There are kind of "groups of radiobuttons" though, but it's only about having their checked state mutually exclusive, it doesn't change anything to the way you work with them from code.

You have to listen to changes on each and every checkbox.

What you can do though is to use the same event handler for all your checkboxes; something like:

ValueChangeHandler<Boolean> handler = new ValueChangeHandler<Boolean>() {
   @Override
   public void onValueChange(ValueChangeEvent<Boolean> event) {
      CheckBox box = (CheckBox) event.getSource();
      String id = box.getFormValue();
      boolean checked = box.getValue();
      …
   }
};

(note: I used getFormValue() rather than getElement().getId(); I believe it's a better choice: it's specifically made to associate a value with the checkbox)

What would be a good way of filtering a GWT CellList using multiple CheckBoxes?

1 Answers