0 Replies Latest reply on Jul 26, 2010 5:49 AM by Nedelcu Alin

    rich:scrollableDataTable inside a4j:outputPanel not working

    Nedelcu Alin Newbie

      Hello,

       

      If I place a (sortable) rich:scrollableDataTable inside a a4j:outputPanel component clicking on a column header (to change the grid sorting) makes the grid display abnormally.

       

      My scrollableDataTable is placed inside a rich:modalPanel witch is openned by clicking a row in a rich:extendedDataTable component.

       

      Code snippet:

       

      <rich:modalPanel id="editPanel"  autosized="true">
              <f:facet name="header">
                  <h:outputText value="#{resources['billing.payments.title']}" />
              </f:facet>
              <h:form>
                  <rich:messages style="color:red;"></rich:messages>
                  <table width="100%">
                  <tr>
                  <td>
                      <a4j:outputPanel ajaxRendered="true">
                              <rich:scrollableDataTable id="paymentsGrid" width="545px" height="150px" sortMode="single"
                                                        value="#{ShowInvoicesAction.currentArTransaction.payments}"
                                                        var="py" rows="6" rowKeyVar="rkv" selectionMode="none">
                                          <rich:column id="pyDescription" width="130" sortExpression="#{py.ARTransactionType.factoryDescription}" sortable="true">
                                          <f:facet name="header">
                                              <h:outputText value="#{resources['column.invoice.payments']}" />
                                          </f:facet>
                                          <h:outputText value="#{py.ARTransactionType.factoryDescription}"/>
                                      </rich:column>
                                      <rich:column id="pyDate" width="75" sortExpression="#{py.artransactionDate}" sortable="true">
                                          <f:facet name="header">
                                              <h:outputText value="#{resources['column.invoice.date']}" />
                                          </f:facet>
                                          <h:outputText converter="dateFomatConverter" value="#{py.artransactionDate}"/>
                                      </rich:column>
                                        ...
                              </rich:scrollableDataTable>
                      </a4j:outputPanel>   
                  </td>
                  </tr>
                  </table>
              </h:form>
          </rich:modalPanel>

       

       

      If I remove a4j:outputPanel component the grid behaves correctly but in this case the grid is not re-populated correctly.

      This is how my scrollableDataTable looks when modal panel is first open:

      before sorting.jpg

      and this is how it looks after I click on "Date" column header:

      after sorting.jpg

       

      Firebug shows the following error message:

      firebug.jpg

       

      PS: I noticed there is a similar bug: https://jira.jboss.org/browse/RF-1451 marked as solved for 3.2.0 version. I'm using 3.3.3.Final release.

       

      Please let me know if there is a valid work-around for this or if this can be solved in a patch for 3.3.3 version.

       

      Regards,

      Alin