Attach rich:toggleControl to radio buttons or select items - jsf

Question

Has anyone had any success attaching a rich:toggleControl component to a radio button component (h:selectOneRadio) or alternatively any of its children select items (in this case s:enumItem).
Basic code example:
<h:selectOneRadio value="#{backingValue}">
<s:enumItem enumValue="VAL_1" itemLabel="Value One" />
<s:enumItem enumValue="VAL_2" itemLabel="Value Two" />
<s:convertEnum />
</h:selectOneRadio>
The ideal thing would be to attach the toggle control to the s:enumItems so I could have it switch to a particular state. However at this point I'd be happy if the toggle control can just be attached to the h:selectOneRadio. I've tried the toggle control as a child of the h:selectOneRadio and s:enumItems; neither works. I've also tried wrapping the toggleControl around the h:selectOneRadio, the toggle control works in this case but the radio buttons don't.

Answer 1

Just tie your rich:togglePanel to the same value on your backing bean, and use an a4j support tag to update the value and re-render the panel.
One thing to keep in mind is that the rich:togglePanel #value attribute must resolve to a String, so you'll probably need to bind to #{backingValue.name()} (don't use toString() since somone might override it on you later...)
something like this should work:
<h:selectOneRadio id="radioButtons" value="#{backingValue}">
<a4j:support event="onclick"
ajaxSingle="true"
reRender="radioButtons, togglePanel"/>
<s:enumItem enumValue="VAL_1" itemLabel="Value One" />
<s:enumItem enumValue="VAL_2" itemLabel="Value Two" />
<s:convertEnum />
</h:selectOneRadio>
<rich:togglePanel id="togglePanel"
switchType="ajax"
value="#{backingValue.name()}" >
<f:facet name="VAL_1">
<h:outputText value="Selected enum value 1"/>
</f:facet>
<f:facet name="VAL_2">
<h:outputText value="Selected enum value 2"/>
</f:facet>
</rich:togglePanel>
You might have to play with the ajax support event binding as well. I've found that the "onchange" and "onselect" events with radio buttons can be a little bit spotty where AJAX4JSF is concerned. I've done this with Strings, where an action in my backing bean changes the toggle panel state by setting the value - but it SHOULD Work with enum's as well.

Answer 2

This isn't strictly an answer to my above question but it's a work around I'm using for now until I figure out how to do it 'better' re- above.
Anyway the workaround: add an onclick event to the h:selectOneRadio which calls the rich:togglePanel's javascript API:
onclick="TogglePanelManager.toggleOnClient('TOGGLE_PANEL_ID_HERE',null);"
Still I would like to do this 'properly' using the rich:toggleControl component if possible ...