radiogroup with tooltip not working properly - xpages

Question

I have the same situation as one of previous questions :
checkboxgroup returning only last selected value
But this time only 1 value can be selected from the same data ,so I thought using a radio instead of a checkbox.
Values are comming from the repeat from the viewScope choices
<xp:repeat id="repeat4" rows="100" value="#{viewScope.choices}"
indexVar="rownumber" var="row" first="0">
<xp:radio id="radio1" groupName="selection">
<xp:this.text><![CDATA[#{javascript:row[3]}]]></xp:this.text>
<xp:this.value><![CDATA[#{viewScope.selected[rownumber]}]]></xp:this.value>
</xp:radio>
<xe:tooltip id="tooltip3" for="radio1">
<xe:this.label><![CDATA[#{javascript:return viewScope.choices[rownumber].get(3)}]]></xe:this.label>
</xe:tooltip>
</xp:repeat>
The tooltip seems correct but :
1) I can select all the radio boxes if I want instead of only one
2) data doesn't seem to update (so I don't know which box has been selected)

Answer 1

Add this onClientLoad CSJS code to your XPage:
<xp:eventHandler
event="onClientLoad"
submit="false">
<xp:this.script><![CDATA[
dojo.query("input").forEach(function(node){
var attr = node.getAttributeNode("name");
if (attr.value.indexOf(':selection') >= 0) {
attr.value = 'selection';
}
});
]]></xp:this.script>
</xp:eventHandler>
It "repairs" the name attribute of input elements so they get all the same name "selection" without the "repeat"-part:
from
to

Answer 2

Are you able to use a radio group?
<xp:radioGroup id="radioGroup1"></xp:radioGroup>

Answer 3

Question 1:
UPDATE:
You have to calculate a unique groupName for each row of your repeat control.
You have to calculate a common groupName for all of your radio buttons.
And there is the problem, each xp:radio control will be rendered with his own groupname, lets take a look at the rendered html code:
One possible workaround could be to work with native html:
<input id="radio1" type="radio" name="selection" value="#{viewScope.selected[rownumber]}">
</input>
If you need the full functionality of the xp:radio button core control then another option could be to rename the name property of your xp:radio buttons after rendering (e.g. with client side javascript).
Question 2:
I use a valueChangeListener for this purpose.
Example (from my own project):
XPage:
<xp:repeat var="entry" rows="30" value="#{accessBean.entries}" removeRepeat="true" repeatControls="false">
<xp:radio id="rbReadAccess" rendered="#{javascript:docData.isEditable()}"
title="Set read access" value="#{entry.accessLevelAsString}" selectedValue="READACCESS"
groupName="#{entry.name}" valueChangeListener="#{accessBean.accessLevelChanged}">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"
refreshId="pnlAccessControl">
</xp:eventHandler>
</xp:radio>
<xp:radio id="rbEditAccess" rendered="#{javascript:docData.isEditable()}"
title="Set edit access" value="#{entry.accessLevelAsString}" selectedValue="EDITACCESS"
groupName="#{entry.name}" valueChangeListener="#{accessBean.accessLevelChanged}">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"
refreshId="pnlAccessControl">
</xp:eventHandler>
</xp:radio>
<xp:radio id="rbFullAccess" rendered="#{javascript:docData.isEditable()}"
title="Set full access" value="#{entry.accessLevelAsString}" selectedValue="FULLACCESS"
groupName="#{entry.name}" valueChangeListener="#{accessBean.accessLevelChanged}">
<xp:eventHandler event="onchange" submit="true" refreshMode="partial"
refreshId="pnlAccessControl">
</xp:eventHandler>
</xp:radio>
</xp:repeat>
AccessControlBean:
public class AccessControlBean implements Serializable {
public Set<AccessControlEntry> getEntries() {
Set<AccessControlEntry> entries = new TreeSet<AccessControlEntry>(accessControlUserService.getEntries());
entries.addAll(accessControlGroupService.getEntries());
return entries;
}
public void accessLevelChanged(ValueChangeEvent valueChangeEvent) {
XspInputRadio component = (XspInputRadio) valueChangeEvent.getComponent();
System.out.println("phaseId: " + valueChangeEvent.getPhaseId());
System.out.println("accessLevelChanged");
System.out.println(component.getGroupName());
System.out.println("oldValue: " + valueChangeEvent.getOldValue());
System.out.println("newValue: " + valueChangeEvent.getNewValue());
}
}
AccessControlEntry:
public class AccessControlEntry implements Comparable<AccessControlEntry> {
// Enumerations
public static enum AccessLevel {
READACCESS,
EDITACCESS,
FULLACCESS;
}
// Fields
private String name;
private AccessLevel accessLevel;
private boolean accessLevelRestricted = false;
// Constructors
public AccessControlEntry(String name, AccessLevel accessLevel) {
this.name = name;
this.accessLevel = accessLevel;
}
// Getter & Setter
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public AccessLevel getAccessLevel() {
return accessLevel;
}
public void setAccessLevel(AccessLevel accessLevel) {
this.accessLevel = accessLevel;
}
// nessecary for EL (managed bean)
public String getAccessLevelAsString() {
return accessLevel.toString();
}
// nessecary for EL (managed bean)
public void setAccessLevelAsString(String accessLevel) {
this.accessLevel = AccessLevel.valueOf(accessLevel.toUpperCase());
}
// Operations
public boolean isReadAccess() {
return accessLevel == AccessLevel.READACCESS;
}
public void setEditAccess(boolean editAccessRestricted) {
accessLevel = AccessLevel.EDITACCESS;
accessLevelRestricted = editAccessRestricted;
}
public boolean isEditAccess() {
return accessLevel == AccessLevel.EDITACCESS;
}
public boolean isEditAccessRestricted() {
return isEditAccess() && accessLevelRestricted;
}
public void setFullAccess(boolean fullAccessRestricted) {
accessLevel = AccessLevel.FULLACCESS;
accessLevelRestricted = fullAccessRestricted;
}
public boolean isFullAccess() {
return accessLevel == AccessLevel.FULLACCESS;
}
public boolean isFullAccessRestricted() {
return isFullAccess() && accessLevelRestricted;
}
public int compareTo(AccessControlEntry aControlEntry) {
return getName().compareTo(aControlEntry.getName());
}
#Override
public String toString() {
return getClass().getSimpleName() + ": name=\"" + name +
"\", accessLevel=\"" + accessLevel +
"\", isEditAccessRestricted=\"" + isEditAccessRestricted() +
"\", isFullAccessRestricted=\"" + isFullAccessRestricted() + "\"";
}
}