In wicket, how can I create RadioGroups that are not defined by component hierarchy/layout?

Question

I am using Wicket and would like to create a grid of radio buttons using HTML, as shown below (outer lists will be displayed vertically, inner lists will be displayed horizontally).

The number of groups is variable - could be ABC, ABCD, ABCDE etc.

I would like the radio buttons grouped vertically.

<ul>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
  <li>
    <ul>
       <li><input type="radio" name="A"></li>
       <li><input type="radio" name="B"></li>
       <li><input type="radio" name="C"></li>
    </ul>
  </li>
</ul>

Unfortunately it seems that RadioGroup only allows one to group radio buttons according to the grouping defined by their layout.

Eg:

RadioGroup group = new RadioGroup("radioGroupA");

group.add( new Radio("myradio", new Model(1)) ;

The problem with this is that I cannot then lay out items the way I want.

Is there another way? Manually specifying the name and gathering results?

UPDATE: I notice that Radio can take a RadioGroup as a parameter. So one can do something like:

// create some groups
for (0..n) {
  RadioGroup group = new RadioGroup("myRadioGroup", new Model { .. } );
  groupArray.add(group)
}

//create a ListView for the RadioGroups so we can attach them to page
ListView radioListView = ListView("radioGroupList") { populate from groupArray }
add(radioListView);

// create our grid of radio buttons
// outer -> rows 
for (0..x) {
  // inner -> columns
  for (0..n)
    // supply group from our groupArray
    add( new Radio("myradio", new Model(1), groupArray.get(n) ));
  }
}

I can then add the Radio s and RadioGroup s to the form independently of layout, which has the desired effect in terms of the grouping.

<form>
  <span wicket:id="radioGroupList">
     <span wicket:id="radioGroup"/>
  </span>
  <ul> 
    <li><radio wicket:id="myradio"/></li>

But now, when I submit I am getting the following error:

WicketMessage: submitted http post value [radio33] for RadioGroup component [2:tContainer:list:2:tPanel:myForm:orderedRadioGroupList:0:orderedRadioGroup] is illegal because it does not contain relative path to a Radio componnet. Due to this the RadioGroup component cannot resolve the selected Radio component pointed to by the illegal value. A possible reason is that componment hierarchy changed between rendering and form submission.

Any idea what this means?

The misspelled word "componment" suggests it's not seen too often.

I am using Wicket 1.4.12.

I found this Apache ticket that looks related: https://issues.apache.org/jira/browse/WICKET-1055

Answer 1

your component hierarchy is wrong. the Radio components have to be inside the radio group component as their javadoc says. since you nested radio groups you have to make sure that the Radio components you add are placed inside the inner-most RadioGroup instance. so, your markup should look like this:

<span wicket:id="group1">
    <span wicket:id="group2">
        <span wicket:id="group3">
            <ul>
                <li><input wicket:id="radio" type="radio"/>
                ...

problems with your current code is that you are using a ListView which creates a flat list out of your RadioGroups, not a nested list. and, you are adding your radios outside of the hierarchy of the groups.

Answer 2

I tried a bit and came to this simple solution: Cheers, andre

JAVA Code:

RadioChoice<String> choice = new RadioChoice<>(
    "logger", new PropertyModel<>(model, "impl"), dao.getAvailableLoggers()
);
choice.setSuffix("\n");
form.add(choice);

Wicket Markup Code:

<style type="text/css">
    .nowrap, .nowrap label {
        display: inline-block;
    }
</style>

<div class="nowrap">
    <wicket:container wicket:id="logger">x</wicket:container>
</div>