1 Reply Latest reply on Feb 3, 2013 5:33 AM by Klay Martens

    Update a rich:pickList when changing selection in rich:select

    Klay Martens Newbie

      Hi...

      I am a complete newbie with jsf, so be gentle:)

      I am trying to dynamically set the contents of rich:pickList - basically, the pick list items should be updated when a new item is selected by rich:select. My jsf is as follows:

       

      <ui:composition

        xmlns="http://www.w3.org/1999/xhtml"    

        xmlns:rich="http://richfaces.org/rich"

        xmlns:f="http://java.sun.com/jsf/core"

        xmlns:a4j="http://richfaces.org/a4j"     

        xmlns:ui="http://java.sun.com/jsf/facelets"

        xmlns:h="http://java.sun.com/jsf/html">

        <rich:panel style="height: 355px">

         

          <h:panelGrid columns="1">

            <h:form id="selectionForm">

               

                <h:outputText value="Selected Role" />

                <rich:select immediate="true"

                             id="SelectedRole"

                             value="#{controlUserList.selectedRole}"                      

                             valueChangeListener="#{controlUserList.roleSelectionChanged}"                       >

                  <a4j:ajax  render="roleSeletionList" event="change" />

                  <f:selectItems value="#{controlUserList.getAllRoles()}"/>

                </rich:select>

           

            <a4j:outputPanel ajaxRendered="true">

              <rich:pickList id="roleSeletionList"

                             value="#{controlUserList.usersForRole}"

                             var="user"

                             sourceCaption="Available users"

                             targetCaption="Selected Role Users"

                             listWidth="165px"

                             listHeight="100px"

                             orderable="false">

               

                <f:selectItems id="roleSelectedItems" value="#{controlUserList.userData}" var="user" itemValue="#{user}" itemLabel="#{user.login}" />           

              </rich:pickList>

            </a4j:outputPanel>

            </h:form> 

          </h:panelGrid>

        </rich:panel> 

      </ui:composition>

       

      Now, the valueChangeListener DOES fire and populates controlUserList.usersForRole with the correct information, but the contents of roleSeletionList are not updated until a user tries to actually move an item from the left hand pane to the right. I kind of expected the render command to do this...seems like I dont understand how this should work just yet...

      If anyone has a few pointers here, I would appreciate it!

        • 1. Re: Update a rich:pickList when changing selection in rich:select
          Klay Martens Newbie

          Never mind...figured it out. Turns out I needed 2 changes to make this work:

           

          1) the value of the rich:select control must be bound to a ui:param

          2) the ajax event should be selectitem, not change...with the changes the working fragment is:

           

          <ui:composition

            xmlns="http://www.w3.org/1999/xhtml"    

            xmlns:rich="http://richfaces.org/rich"

            xmlns:f="http://java.sun.com/jsf/core"

            xmlns:a4j="http://richfaces.org/a4j"     

            xmlns:ui="http://java.sun.com/jsf/facelets"

            xmlns:h="http://java.sun.com/jsf/html">

            <rich:panel style="height: 355px">

              <h:form id="selectionForm">

              <h:panelGrid columns="1">     

                    <ui:param name="selectedRole" value="#{controlUserList.selectedRole}"/>

                    <h:outputText value="Selected Role" />

                    <rich:select immediate="true"

                                 id="SelectedRole"

                                 value="selectedRole"

                                 defaultLabel="#{controlUserList.selectedRole}"                      

                                 valueChangeListener="#{controlUserList.roleSelectionChanged}">           

                      <a4j:ajax  render="roleSeletionList" event="selectitem" />

                      <f:selectItems value="#{controlUserList.getAllRoles()}"/>

                    </rich:select>

               

                <a4j:outputPanel  ajaxRendered="true">

                  <rich:pickList id="roleSeletionList"                      

                                 value="#{controlUserList.usersForRole}"

                                 var="user"

                                 sourceCaption="Available users"

                                 targetCaption="Selected Role Users"

                                 listWidth="165px"

                                 listHeight="100px"

                                 orderable="false">

                   

                    <f:selectItems id="roleSelectedItems" value="#{controlUserList.userData}" var="user" itemValue="#{user}" itemLabel="#{user.login}" />           

                  </rich:pickList>

                </a4j:outputPanel>       

              </h:panelGrid>

              </h:form> 

            </rich:panel> 

          </ui:composition>