dynamically creating selectManyCheckbox with tooltip

Question

I have a HashMap in the backing bean and I want to dynamically render multiple select box. Here is the code:

    <h:selectManyCheckbox
      id="id"
      value="#{backingBean.value}"
      layout="pageDirection"
      styleClass="label"
      required="true"
      requiredMessage="You must select at least...">


      <a4j:repeat var="aGroup" items="#{backingBean.map}">

        <f:selectItem id="role#{aGroup.value.property1}" itemLabel="#{aGroup.value.property1}" itemValue="#{aGroup.value.property2}" />

        <rich:tooltip for="role" value="#{aGroup.value.property5}" />

     </a4j:repeat>

    </h:selectManyCheckbox>

It is not rendering. Using the f:selectItems tag, it is rendering, but I need to manually create the f:selecteItem as I have to attach a rich:tooltip with each f:selectItem.

Any ideas ?

Ravi

You are not attaching the `rich:tooltip` to the `selectItem`, it is not enclosed inside the `f:selectItem` tag, and the `for` value does not match the `id` — SJuan76, Dec 17 '12 at 21:14
that is a good point. I corrected that and it is still not working. — Ravi, Dec 17 '12 at 21:17

score 1 · Answer 1 · answered Dec 18 '12 at 11:49

You can't add additional markup/components on a <f:selectItem>.

There's also nothing in standard JSF or RichFaces libraries which allows markup freedom on labels of a checkbox group. Only Tomahawk <t:selectManyCheckbox> supports it when using layout="spread" with <t:checkbox>. PrimeFaces has this feature also on schedule for its <p:selectManyCheckbox>.

Here's a kickoff example how you could achieve it with Tomahawk:

<!-- Below displays nothing due to layout="spread". -->
<t:selectManyCheckbox id="foo" value="#{bean.selectedItems}" layout="spread">
    <f:selectItems value="#{bean.availableItems}" />
</t:selectManyCheckbox>

<!-- Below displays the concrete checkboxes with labels. -->
<c:forEach items="#{bean.availableItems}" var="item" varStatus="loop">
    <t:checkbox for="foo" index="#{loop.index}" />
    <h:outputLabel id="label#{loop.index}" value="#{item.label}" />
    <rich:tooltip for="label#{loop.index}" value="#{item.tooltip}" />
</c:forEach>

prageeth · Accepted Answer · 2012-12-21T05:08:11.070

Use <c:forEach> instead of <a4j:repeat>.

First add this namespace at the top of your page.

xmlns:c="http://java.sun.com/jstl/core"

Now replace <a4j:repeat..... with this.

<c:forEach var="aGroup" items="#{backingBean.map}">

EDIT:

I don't think that <rich:toolTip> can be applied to <f:selectItem>. As a weird hack you can do something like this.

This is your managed-bean which returns the list or a map. Here I'm using a map because it seems you are using a map.

public class MyBean {
  private Map<Integer, String> map;

  public Map<Integer, String> getMap() {
    map = new HashMap<Integer, String>();
    map.put(1, "Tool tip 1");
    map.put(2, "Tool tip 2");
    map.put(3, "Tool tip 3");
    return map;
  }
}

Now your xhtml code would be like this. Here I'm rendering selectItems dynamically. However this is not necessary for this to work.

<h:form id="myForm">
    <h:selectManyCheckbox id="myChkBox" layout="pageDirection" styleClass="label" required="true" requiredMessage="You must select at least...">
        <c:forEach var="aGroup" items="#{myBean.map}">
            <f:selectItem itemValue="someValue1" itemLabel="someValue1" id="someId#{aGroup.key}" /> 
            <span class="rich-tool-tip" id="span#{aGroup.key}" style="z-index: 99; visibility: visible; display: none;">
                <span>#{aGroup.value}</span>
            </span>
            <script>
                var i = !i ? 0 : i;
                new ToolTip("span#{aGroup.key}","myForm:myChkBox:" + i,{'showEvent':'mouseover'} );
                i++;
            </script>
        </c:forEach>
    </h:selectManyCheckbox>
    <rich:toolTip rendered="false"/>
</h:form>

That is it...
Note the <rich:toolTip> which is set as rendered="false". This is required. Otherwise some important JS parts are not imported and your toolTip will not work.

The `` is a much easier approach. But OP actually wanted to style each checkbox label. — BalusC, Dec 18 '12 at 11:50
@prageeth to rule out the loop issue, i hard coded one one f:selecteItem and tool tip doesn't show up. — Ravi, Dec 18 '12 at 16:45
@Ravi: I don't think that `` supports ``. However there are dirty hacks for this(even in client side). If you still need to depend on `` I can provide a sample. — prageeth, Dec 19 '12 at 05:39
@prageeth I am doing the UI in an alternative way, but I would like to see the solution. If you can provide the sample, that would be great. — Ravi, Dec 20 '12 at 18:57

dynamically creating selectManyCheckbox with tooltip

2 Answers2