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):

       

      Front-End:

       

      {noformat}

      <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" />

           </f:facet>

        <rich:column>

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

           </rich:column>

      </rich:extendedDataTable>

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

         render="srcTable targetTable" />

      {noformat}


      Back-End:

       

       

      {noformat}

      @ManagedBean(name = "layoutBean")

      @SessionScoped

      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();

                m_availableTableSelection.clear();

                for (Object selectionKey : m_availableTableSelectedKeys) {

                     dataTable.setRowKey(selectionKey);

                     if (dataTable.isRowAvailable()) {

                          m_availableTableSelection.add((LayoutField) dataTable

                          .getRowData());

                     }

                }

                dataTable.setRowKey(originalKey);

           }

       

           public void onDoubleClickSource() {

                // Only add if not already contained

                for (LayoutField field : m_availableTableSelection) {

                     if (!m_selectedFields.contains(field)) {

                          m_selectedFields.add(field);

                     }

                }

                m_availableFields.removeAll(m_availableTableSelection);

           }

      }

       

      {noformat}