1 Reply Latest reply on Aug 30, 2011 7:00 AM by lukas.p

    Possible bug? Click, double-click and render on rich:dataTable (RF4, IE7)

    lukas.p Newbie

      Hi everyone!

       

      We are trying to move from Richfaces 3 to 4, but we got stuck now for several days trying to solve this, maybe you can help us:

       

      We use a rich:dataTable and would need to have rows selectable (via single-click) but also have them triggering an action on a double-click. We achieved this by

      - Changing the row background-color on rowMouseOver, rowMouseOut

      - Calling a jsFunction on rowclick which is selecting the clicked item

      - Calling a jsFunction on rowdblclick which in invoking an action

       

      In order to have the selected row highlighted, the styles on columns are retrieved from the backing Bean and "render" is invoked on the dataTable whenever a row is clicked, so the rendering is updated.

      This works fine for IE8, but when using IE7, the double click gets swallowed. (Most of our production users are on IE7, so this is crucial...)

       

      So whenever double-clicking a row, only the single-click is executed and the table is rerendered, the double-click gets lost!

       

      Any ideas how to solve this? ANY help is really appreciated here!

       

      BTW: Using the extendedDataTable is not a solution in our case, as we need nestable headers and line-breaking in table cells, which is not available for the extendedDataTable unfortunately

       

      This is the sample JSF code:

       

       

       

      <rich:dataTable onrowmouseover="this.style.backgroundColor='#F1F1F1'"
                      onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                      id="userList" value="#{exportTestBean.jsf2TestList}" var="userItem"
                      rows="12" onrowclick="selectRow('#{userItem.id}');"
                      onrowdblclick="window.alert('Double click')"
                      style="height:300px; width:500px;">
      
                      <f:facet name="header">
                          <rich:columnGroup>
                              <rich:column rowspan="2">
                                  <h:outputLabel value="UserID" />
                              </rich:column>                                
                              <rich:column colspan="2">
                                  <h:outputLabel value="Recertification" />
                              </rich:column>
                              <rich:column breakRowBefore="true">
                                  <h:outputText value="Name" />
                              </rich:column>
                              <rich:column>
                                  <h:outputText value="Action" />
                              </rich:column>                                                
                          </rich:columnGroup>
                      </f:facet>
      
                      <rich:column id="userId" width="65" style="#{exportTestBean.getStyle(userItem.id)}">
                          <h:outputText value="#{userItem.userId}" />
                      </rich:column>                
                      <rich:column id="lastActionUid" width="140" style="#{exportTestBean.getStyle(userItem.id)}">
                          <a4j:outputPanel>
                              <h:outputText value="#{userItem.recertUserId}" />
                              <h:outputText value=" " />
                              <h:outputText value="#{userItem.recertLastName}" />
                              <h:outputText value="," />
                              <h:outputText value="&lt;br /&gt;" escape="false" />
                              <h:outputText value="#{userItem.recertFirstName}" />
                          </a4j:outputPanel>
                      </rich:column>
                      <rich:column id="lastAction" width="90" style="#{exportTestBean.getStyle(userItem.id)}">
                          <h:outputText value="#{userItem.recertAction}">
                          </h:outputText>
                      </rich:column>            
                  </rich:dataTable>
                  <a4j:jsFunction name="selectRow" render="userList">
                      <a4j:param name="selecetUserItemId"
                          assignTo="#{exportTestBean.selectedItem}" />
                  </a4j:jsFunction>
      

       

      This is our Test Bean:

       

      public class ExportTestBean {
          
          private final List<TestUser> jsf2TestList;
          
          private String selectedItem;
      
          public ExportTestBean() {
              jsf2TestList = new ArrayList<TestUser>();
              for(int i=0; i<100; i++) {
                  jsf2TestList.add(new TestUser());
              }
          }
          
          public String getSelectedItem() {
              return selectedItem;
          }
          
          public void setSelectedItem(String selectedItem) {
              this.selectedItem = selectedItem;
          }
          
          public String getStyle(String id) {
              if(selectedItem == null) {
                  return "";
              }
              if(selectedItem.equals(id)) {
                  return "background-color:#5555FF";
              } else {
                  return "";
              }
          }
          
          public List<TestUser> getJsf2TestList() {
              return jsf2TestList;
          }
      }