3 Replies Latest reply on Aug 18, 2010 4:24 AM by Ilya Shaikovsky

    rich:dataTable sortBy Webkit problem

    Marcin Domagala Newbie

      Hi All

      I have strange error when using rich:dataTable with sortBy attribute when column contains tooltip

       

      <rich:dataTable width="100%" id="table" rows="30" value="#{treeBean.items}" var="productRow">
      <rich:column sortBy="#{productRow.catalogItem.number}"                               filterBy="#{productRow.catalogItem.formatedNumber}" filterEvent="onkeyup"
           headerClass="formatedNumberColumn">
           <f:facet name="header">
                                  <h:outputText styleClass="headerText" value="#{msg.baseItem_number}"/>
                              </f:facet>
                              <h:outputText value="#{productRow.catalogItem.number}">
                              </h:outputText>
                              <h:graphicImage value="/image/icon/information.png"
           style="cursor:pointer;vertical-align:bottom;border:none;" id="info_image">
                                  <rich:toolTip showDelay="300" mode="ajax" styleClass="tooltip" layout="block" actionListener="#{treeBean.processGetBeanDetails}">
                                      <f:param name="param1" value="#{productRow.catalogItem.number}"/>
                                      <h:outputText value="a"/>
                                  </rich:toolTip>
                              </h:graphicImage>
                          </rich:column>
                      </rich:dataTable>

       

      When i click on column header all items are vanished from the table. This works fine in IE and FF. The problem is visible in Safari and Chrome

       

      Any sugesstions

      Best regards

      Marcin

        • 1. Re: rich:dataTable sortBy Webkit problem
          Ilya Shaikovsky Master
          <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:a4j="http://richfaces.org/a4j"
          xmlns:rich="http://richfaces.org/rich">
           
          <style>
          .tooltip {
          background-color: #{a4jSkin.generalBackgroundColor};
          border-width:1px;
          padding:10px;
          }
          .tooltipData {
          font-weight: bold;
          }
          </style>
           
          <h:form>
          <rich:dataTable value="#{toolTipData.vehicles}" width="400"
          var="vehicle" rowKeyVar="row">
          <f:facet name="header">
          <h:outputText value="Car Store"/>
          </f:facet>
          <rich:column>
          <f:facet name="header">
          <h:outputText value="##" />
          </f:facet>
          <h:outputText value="#{row+1}" />
          </rich:column>
          <rich:column sortBy="#{vehicle.make}">
          <f:facet name="header">
          <h:outputText value="Make" />
          </f:facet>
          <a4j:outputPanel layout="block">
          <rich:toolTip direction="top-right" mode="ajax" showDelay="300"
          styleClass="tooltip" layout="block">
          <a4j:actionparam name="key" value="#{row}"
          assignTo="#{toolTipData.currentVehicleIndex}" />
           
          <h:panelGrid columns="4">
          <f:facet name="header">
          <h:outputText value="Vehicle details:" />
          </f:facet>
          <h:outputText value="make:" />
          <h:outputText value="#{vehicle.make}" styleClass="tooltipData" />
          <h:outputText value="model:" />
          <h:outputText value="#{vehicle.model}" styleClass="tooltipData" />
          <h:outputText value="year:" />
          <h:outputText value="#{vehicle.year}" styleClass="tooltipData" />
          <h:outputText value="milage:" />
          <h:outputText value="#{vehicle.milage}" styleClass="tooltipData" />
          <h:outputText value="zip:" />
          <h:outputText value="#{vehicle.zip}" styleClass="tooltipData" />
          <h:outputText value="listed:" />
          <h:outputText value="#{vehicle.listed}" styleClass="tooltipData">
          <f:convertDateTime dateStyle="short" />
          </h:outputText>
          <f:facet name="footer">
          <h:panelGroup>
          <h:outputText value="vin: " />
          <h:outputText value="#{vehicle.vin}" styleClass="tooltipData" />
          </h:panelGroup>
          </f:facet>
           
          </h:panelGrid>
          </rich:toolTip>
          <h:outputText id="make" value="#{vehicle.make}"/>
          </a4j:outputPanel>
          </rich:column>
          <rich:column>
          <f:facet name="header">
          <h:outputText value="Model" />
          </f:facet>
          <h:outputText value="#{vehicle.model}" />
          </rich:column>
          <rich:column>
          <f:facet name="header">
          <h:outputText value="Year" />
          </f:facet>
          <h:outputText value="#{vehicle.year}" />
          </rich:column>
          </rich:dataTable>
          </h:form>
           
           
          </ui:composition>
          
          works for me in Chrome under richfaces-demo 3.3.3 final.
          • 2. Re: rich:dataTable sortBy Webkit problem
            Cody Lerum Apprentice

            I'm seeing the same issue.

             

            First with 3.3.2 SR1 and I upgraded  to 3.3.3 (JSF 1.2) and the issue is still there. Works fine in IE8, FF3.6 but fails in Chrome 5 and Chrome 6 Beta

             

            chrome inspector shows the following.

             

            1. framework.pack.js:2377Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9
              1. A4J.AJAX.XMLHttpRequest.updatePagePartframework.pack.js:2377
              2. A4J.AJAX.processResponseAfterUpdateHeadElementsframework.pack.js:2612
              3. Gframework.pack.js:2637
              4. A4J.AJAX.XMLHttpRequest.appendNewHeadElementsframework.pack.js:2405
              5. A4J.AJAX.processResponseframework.pack.js:2643
              6. _request.onreadystatechane

             

             

            Removing the tooltip causes things to work.