Event:select is not supported inside a p:pickList

Question

When I want to catch select and unselect event in a PrimeFaces 4.0 p:pickList I got an error <p:ajax> Event:select is not supported.

<p:pickList  showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>

    <p:ajax event="select" listener="#{ctrl.select}"  />
    <p:ajax event="unselect" listener="#{ctrl.onUnselect}" />
</p:pickList>

public class ctrl implements Serializable {
public void select(SelectEvent event) {
     System.out.println(event.getObject().toString());
}

public void onUnselect(UnselectEvent event) {
     System.out.println(event.getObject().toString());
}

...

So, I am wondering how to know which Items is checked if I can't use Select and unSelect event ?

Thank you

score 1 · Answer 1 · edited May 23 '17 at 11:52

In Primefaces 4 pickList has transfer event only, the select/unselect events have been added in Primefaces 5.2

From the docs:

Ajax Behavior Events

PickList provides transfer as the default and only ajax behavior event that is fired when an item is moved from one list to the other. Example below demonstrates how to use this event.

<p:pickList value="#{pickListBean.cities}" var="city"
         itemLabel="#{city}" itemValue="#{city}">
    <p:ajax event="transfer" listener="#{pickListBean.handleTransfer}" />
</p:pickList>

public class PickListBean {
    //DualListModel code
    public void handleTransfer(TransferEvent event) {
             //event.getItems() : List of items transferred
             //event.isAdd() : Is transfer from source to target
             //event.isRemove() : Is transfer from target to source     
    }
}

UPDATE:

To catch the select/unselect event you can bind to checkboxes click event

<p:pickList widgetVar="pick" showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>
</p:pickList>

<script>
    $(function(){
        PF('pick').checkboxes.each(function(){
            $(this).bind("click", function(){
                var checked = $(this).find("> span.ui-icon-check").length > 0
                if ( checked ){
                    alert('checked');
                } else {
                    alert('unchecked');
                }
            });
        });
    });
</script>

Then if you need to call a bean listener you can add two remoteCommands and call the functions in click callback

<p:pickList widgetVar="pick" showCheckbox="true" id="pickList"  value="#{ctrl.elts}" var="elt" itemLabel="#{elt}" itemValue="#{elts}" >
    <f:facet name="sourceCaption">A</f:facet>
    <f:facet name="targetCaption">B</f:facet>
</p:pickList>

<p:remoteCommand name="select" actionListener="#{ctrl.select}" />
<p:remoteCommand name="unselect" actionListener="#{ctrl.onUnselect}" />

<script>
    $(function(){
        PF('pick').checkboxes.each(function(){
            $(this).bind("click", function(){
                var checked = $(this).find("> span.ui-icon-check").length > 0
                if ( checked ){
                    select();
                } else {
                    unselect();
                }
            });
        });
    });
</script>

Obviously the listener can't accept a SelectEvent/UnselectEvent but with remoteCommand you can pass params if you need:

Pass parameter to p:remoteCommand from JavaScript

So, why they added the Checkbox `showCheckbox="true"` if these events (select/unselect) don't work. I think that there is a solution for that — Raziel, Jul 21 '16 at 14:42
I don't know why but there isn't a builtin way to what you want. The only thing that comes to my mind is to bind to click event of checkbox via js. I've updated the answer. — SiMag, Jul 21 '16 at 15:24

Event:select is not supported inside a p:pickList

1 Answers1