Wicket: how to implements not grouped radio buttons

Question

I have 4 columns of radio buttons in a table. Problem: in Wicket, the radio buttons of a same group need to be grouped under one Wicket tag but it's impossible to do it in HTML because a table is declared row by row.

Code example

<table id="table1">
    <thead>
        <tr>
            <td>Group 1</td>
            <td>Group 2</td>
            <td>Group 3</td>
            <td>Group 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
            <td>Value 3</td>
            <td>Value 4</td>
        </tr>
        <tr>
            <td><input type="radio" name="group1" wicket:id="g1b1"><\td>
            <td><input type="radio" name="group2" wicket:id="g2b1"><\td>
            <td><input type="radio" name="group3" wicket:id="g3b1"><\td>
            <td><input type="radio" name="group4" wicket:id="g4b1"><\td>
        </tr>
        <tr>
            <td><input type="radio" name="group1" wicket:id="g1b2"><\td>
            <td><input type="radio" name="group2" wicket:id="g2b2"><\td>
            <td><input type="radio" name="group3" wicket:id="g3b2"><\td>
            <td><input type="radio" name="group4" wicket:id="g4b2"><\td>
        </tr>
        <tr>
            <td><input type="radio" name="group1" wicket:id="g1b3"><\td>
            <td><input type="radio" name="group2" wicket:id="g2b3"><\td>
            <td><input type="radio" name="group3" wicket:id="g3b3"><\td>
            <td><input type="radio" name="group4" wicket:id="g4b3"><\td>
        </tr>
        <tr>
            <td><input type="radio" name="group1" wicket:id="g1b4"><\td>
            <td><input type="radio" name="group2" wicket:id="g2b4"><\td>
            <td><input type="radio" name="group3" wicket:id="g3b4"><\td>
            <td><input type="radio" name="group4" wicket:id="g4b4"><\td>
        </tr>
    </tbody>
</table>

As you see, the four groups are mixed together and if I create a group that doesn't exist in HTML, an exception is thrown.

If I declare different groups with the same wicket id, only the last radio button I add is taken into account.

Can anyone help me out?

Answer 1

Wrap the Radios with four nested RadioGroups, and pass the correct group instance to each Radio constructor:

final RadioGroup<Integer> radioGroup1 = new RadioGroup<Integer>("radioGroup1", new Model<Integer>());
final RadioGroup<Integer> radioGroup2 = new RadioGroup<Integer>("radioGroup2", new Model<Integer>());
final RadioGroup<Integer> radioGroup3 = new RadioGroup<Integer>("radioGroup3", new Model<Integer>());
final RadioGroup<Integer> radioGroup4 = new RadioGroup<Integer>("radioGroup4", new Model<Integer>());

add(new FeedbackPanel("feedback"));
add(new Form<Void>("form")
    .add(radioGroup1
        .add(radioGroup2
            .add(radioGroup3
                .add(radioGroup4
                    .add(new Loop("loop", 10) {
                        @Override
                        protected void populateItem(LoopItem item) {
                            Model<Integer> itemModel = Model.of(item.getIndex());
                            item.add(new Radio<Integer>("radio1", itemModel, radioGroup1));
                            item.add(new Radio<Integer>("radio2", itemModel, radioGroup2));
                            item.add(new Radio<Integer>("radio3", itemModel, radioGroup3));
                            item.add(new Radio<Integer>("radio4", itemModel, radioGroup4));
                            item.add(new Label("label", itemModel));
                        }
                    })))))
    .add(new Button("submit") {
        @Override
        public void onSubmit() {
            info(Strings.join(", ",
                radioGroup1.getModelObject().toString(),
                radioGroup2.getModelObject().toString(),
                radioGroup3.getModelObject().toString(),
                radioGroup4.getModelObject().toString()));
        }
    }));



<div wicket:id="feedback"></div>

<form wicket:id="form">

  <div wicket:id="radioGroup1">
  <div wicket:id="radioGroup2">
  <div wicket:id="radioGroup3">
  <div wicket:id="radioGroup4">

    <table>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
      </tr>
      <tr wicket:id="loop">
        <td><input type="radio" wicket:id="radio1"></td>
        <td><input type="radio" wicket:id="radio2"></td>
        <td><input type="radio" wicket:id="radio3"></td>
        <td><input type="radio" wicket:id="radio4"></td>
        <td><span wicket:id="label"></span></td>
      </tr>
    </table>

  </div>
  </div>
  </div>
  </div>

  <button wicket:id="submit" type="submit">Submit</button>

</form>

Answer 2

I think you could the RadioGroup tag wrapping the table (or even the tbody tag). A wicket:container tag won't mess with the HTML structure. Like this:

<wicket:container wicket:id="group">
  <table id="table1">
    <!-- The rest of the table markup -->
  </table>
</wicket:container>