1 Reply Latest reply on Apr 13, 2011 3:54 AM by lukas.p

    Double click event on rich:extendedDataTable (RF4) - pickList

    lukas.p Newbie

      Hi everyone!


      I try to build a kind of "rich:pickList" as it is not yet contained in Richfaces 4. I am using two extended data tables and would like to move items from one table to the other on double clicks. I tried different approaches to achieve this:


      1) <a4j:ajax event="rowdblclick"/> does not fire any events, at least the listener is not called on double clicks.


      2) Using the onrowdblclick-attribute on the extendedDataTable and having <a4j:jsFunction/> calling the backing bean works, but

      I got stuck as when adding and removing items from the model, the selectionchange event is not fired and the next time a double click occurs, the current selection in my bean does not match the actual selection on the front-end. Therefore the wrong items (or no items) are moved from one list to the other.


      Is there a way to force the extendedDataTable to update the selection after a double-click? If I could use approach 1) this would be easy as I could retrieve the UIExtendedDataTable Object from the AjaxBehaviorEvent and just update the selection model in my bean..

      Does anyone have further ideas how to achieve this double-click behaviour?


      Thanks very much!


      This is my sample code (only the source-table of the pickList, the target basically looks the same):





      <rich:extendedDataTable id="srcTable" value="#{layoutBean.availableFields}"

        var="field" onrowdblclick="dblClickSource();" selection="#{layoutBean.availableSelection}">

           <a4j:ajax event="selectionchange" listener="#{layoutBean.selectionChangedAvailable}" />

           <a4j:ajax event="rowdblclick" listener="#{layoutBean.selectionChangedAvailable}" />

           <f:facet name="header">

        <h:outputText value="Available" />



        <h:outputText value="#{field.name}" />



      <a4j:jsFunction name="dblClickSource" action="#{layoutBean.onDoubleClickSource}"

         render="srcTable targetTable" />






      @ManagedBean(name = "layoutBean")


      public class LayoutBean {


           // All layout items available for the user

           private List<LayoutField> m_availableFields = new ArrayList<LayoutField>();


           // Currently selected keys of the extendedDataTable containing available

           // layout items

           private Collection<Object> m_availableTableSelectedKeys;


           // Currently selected items on the extendedDataTable containing available layout items

           private List<LayoutField> m_availableTableSelection = new ArrayList<LayoutField>();


           public List<LayoutField> getAvailableFields() {

                return m_availableFields;



           public void setAvailableSelection(Collection<Object> selection) {

                m_availableTableSelectedKeys = selection;


           public Collection<Object> getAvailableSelection() {

                return m_availableTableSelectedKeys;




             * Fired if the user has changed his selection on the

             * "available layout items" table


             * @param event


           public void selectionChangedAvailable(AjaxBehaviorEvent event) {

                UIExtendedDataTable dataTable = (UIExtendedDataTable) event.getComponent();

                Object originalKey = dataTable.getRowKey();


                for (Object selectionKey : m_availableTableSelectedKeys) {


                     if (dataTable.isRowAvailable()) {

                          m_availableTableSelection.add((LayoutField) dataTable







           public void onDoubleClickSource() {

                // Only add if not already contained

                for (LayoutField field : m_availableTableSelection) {

                     if (!m_selectedFields.contains(field)) {