8 Replies Latest reply on Jun 21, 2012 6:02 AM by Ivan Ravin

    rich:extendedDataTable sortBy doesn't work

    david bassols Newbie

      Hi,

       

      I have an application which has a extendedDataTable and it must be sortable. I have added a sortBy at each column but when I click it, it does nothing. Someone at work told me it's because the table is added by Ajax and there's capabilities that doesn't work like the pagination when added in this way.

       

      Any clue?

       

      Thanks in advance

        • 1. Re: rich:extendedDataTable sortBy doesn't work
          Matija Vizintin Newbie

          I never had problems when rerendering tables with ajax.

           

          Paste your code it would be easyer to see what is wrong. Maybe your soring expression is not correct, maybe is the sortOrder attribute (if using rich:columns this must be present).

          • 2. Re: rich:extendedDataTable sortBy doesn't work
            Christian Peter Expert

            "Someone at work told me it's because the table is added by Ajax"

             

            What do you mean by that?

             

            Which version of richfaces are you using?

            • 3. Re: rich:extendedDataTable sortBy doesn't work
              david bassols Newbie

              The code is:

               

              taulaInfoComarcaAjaxP.xhtml which contains:

               

              <code>

              <ui:composition xmlns="http://www.w3.org/1999/xhtml"

                  xmlns:ui="http://java.sun.com/jsf/facelets"

                        xmlns:f="http://java.sun.com/jsf/core"

                        xmlns:h="http://java.sun.com/jsf/html"

                        xmlns:rich="http://richfaces.org/rich"

                        xmlns:c="http://java.sun.com/jstl/core"

                  xmlns:a4j="http://richfaces.org/a4j">

               

                        <h:head>

                                  <link rel="stylesheet"

                                            href="#{facesContext.externalContext.requestContextPath}/css/import.css"

                                            type="text/css" />

                        </h:head>

               

                        <div class="barraTitol" onclick="reloadDades(3);">

                                  <img class="imgFletxa" src="#{facesContext.externalContext.requestContextPath}/images/img/fletxa.png"/>

                                   <outputText class="mapLink">

                                            Dades comarques - #{document.getElementById("indicador").options[document.getElementById("indicador").selectedIndex].value}

                                  </outputText>

                        </div>

               

                  <h:form>

                         <rich:extendedDataTable id="taulaPropietats"

                                            value="#{SVGdimComarcaBean.model}"

                                            var="indicador"

                                            onrowclick="tableRowClickComarquesP(this)"

                                            styleClass="canigo3taulaBasicaExtesa"

                                            sortMode="multi"

                                   style="width:400px; height:225px; overflow-y: scroll;"

                        >

               

                                  <rich:column width="0" id="hidden">

                                             <f:facet name="header">

                                  <h:outputText value="idsvg" />

                           </f:facet>

                                      <h:outputText id="nIdSVG" value="#{indicador.idSVG}" />

                                  </rich:column>

               

                                  <rich:column width="125px" sortBy="#{indicador.comarca}">

                                             <f:facet name="header">

                                  <h:outputText value="Comarca" />

                           </f:facet>

                                      <h:outputText value="#{indicador.comarca}" />

                                  </rich:column>

               

                                  <rich:column width="75px" style="text-align: right;"  sortBy="#{indicador.numHabitants}">

                                             <f:facet name="header">

                                  <h:outputText value="Població" />

                           </f:facet>

                                      <h:outputText value="#{indicador.numHabitants}">

                                                <f:convertNumber pattern="##,###,###" />

                                      </h:outputText>

                                  </rich:column>

               

                                  <rich:column width="75px" style="text-align: right; font:bold; " sortBy="#{indicador.valorIndicador}">

                                             <f:facet name="header">

                                  <h:outputText value="Valor" />

                           </f:facet>

                                            <h:outputText style="font-weight:bold;" value="#{indicador.valorIndicador}">

                                                       <f:convertNumber pattern="##,###,###" />

                                      </h:outputText>

                                  </rich:column>

               

                                  <rich:column width="100px" style="text-align: right; font:bold; " sortBy="#{indicador.persCatalunya}">

                                             <f:facet name="header">

                                  <h:outputText value="%Catalunya" />

                           </f:facet>

                                            <h:outputText value="#{indicador.persCatalunya}">

                                                       <f:convertNumber pattern="##,###,##0.00" />

                                      </h:outputText>%

                                  </rich:column>

               

                      </rich:extendedDataTable>

                  </h:form>

               

              <!--  -->

               

              </ui:composition>

              </code>

               

               

              then, I add this with ajax in this way:

               

              <code>

              function callTaulaInfoComarca()

                                  {

                                            if(document.getElementById("mes")!=null){

                                                      var xmlhttp;

                                                      if (window.XMLHttpRequest)

                                                      {// code for IE7+, Firefox, Chrome, Opera, Safari

                                                                xmlhttp = new XMLHttpRequest();

                                                      }

                                                      else

                                                        {// code for IE6, IE5

                                                                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                                                        }

                                                      xmlhttp.onreadystatechange=function()

                                                        {

                                                                  if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)

                                                          {  

                                                                    document.getElementById("esqInferiorDiv").innerHTML=xmlhttp.responseText;

                                                                    mesUpdated();

                                                          }

                                                      }

                                                      xmlhttp.open("GET","taulaInfoComarcaAjaxP.xhtml",true);

                                                      xmlhttp.send();

                                            }

                                  }

              </code>

               

              Christian Peter escribió:

               

              "Someone at work told me it's because the table is added by Ajax"

               

              What do you mean by that?

               

              Which version of richfaces are you using?

               

              One at work told me he tried that, he saw taulaInfoComarcaAjaxP.xhtml in a browser and he could sort the tables, but in the application, added by the way shown above, he couldn't.

               

              Thanks for the reply

              • 4. Re: rich:extendedDataTable sortBy doesn't work
                Christian Peter Expert

                Hmmm I still don't fully understand what you want to achieve by this "manual" ajax approach. Richfaces has buildin ajax capabilities which you should use instead.

                 

                Also this "#{document.getElementById("indicador").options[document.getElementById("indicador").selectedIndex].value}" maske no sense since "document.getElementById" is a client-side function but #{} an EL expression and therefore server-side.

                 

                 

                When do you call the "callTaulaInfoComarca()" function to update "document.getElementById("esqInferiorDiv").innerHTML"?

                 

                There's still something missing in the code you've posted.

                • 5. Re: rich:extendedDataTable sortBy doesn't work
                  david bassols Newbie

                  I'm new to all of these, so I do what I have seen there

                   

                  When the user changes the value of a combo box, I call callTaulaInfoComarca(), to include the table in the page.

                   

                  indicador is a comboBox, and I want to show the selected value when the table is shown, that's why I use:

                  "#{document.getElementById("indicador").options[document.getElementById("indicador").selectedIndex].value}"

                  Is there a better way to do it?

                   

                  What do you think I've missed?

                  • 6. Re: rich:extendedDataTable sortBy doesn't work
                    Christian Peter Expert

                    you can use a <h:selectOneMenu> for the comboBox....

                     

                    Example Richfaces 3.3.3:

                     

                    <h:selectOneMenu id="upgradeEditionMenu"

                                          value="#{upgradeData.selectedEdition}">

                                          <f:selectItems value="#{myManager.getEditionSelectItems(upgradeData)}" />

                                          <a4j:support event="onchange" reRender="table" />

                    </h:selectOneMenu>

                     

                    <rich:extendedDataTable id="table" ....>

                     

                    the a4j:support tag will re-render extendedDataTable called "table" after the user changes the selection of the comboBox.

                    You can also call a method in the backing bean by adding an "action" attrtibute to the a4j:support tag:

                     

                    <a4j:support event="onchange" action="#{myManager.update()} reRender="table"/>

                     

                    This will call the method update() in your Manager "myManager" and then reRender the table with the new data / model.

                    • 7. Re: rich:extendedDataTable sortBy doesn't work
                      Ivan Ravin Newbie

                      this kind of sort (<rich:column ... sortBy="#{xxxx}">) worked in RF 3.3.3, but lost in RF4.x.

                      For now, you can sort any rich:...DataTable only manually, look for example here : https://community.jboss.org/thread/199934

                      There is issue in bugtracker (https://issues.jboss.org/browse/RF-11849), but unfortunately still not resolved and even unassigned

                      • 8. Re: rich:extendedDataTable sortBy doesn't work
                        Ivan Ravin Newbie

                        Please vote for this issue (https://issues.jboss.org/browse/RF-11849), maybe it will help to see RF3.3.3 sorting in 4.3