radiogroup with tooltip not working properly

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() + "\"";
    }

}