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

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

    lukas.p
    lukas.p Apr 8, 2011 9:51 AM

      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}