2 Replies Latest reply on Apr 30, 2013 9:50 AM by genchev

    Rerender table upon another table's filter event

    genchev

      Hi all,

       

      I have two rich:extendedDataTables in my page. One is a "master", the other one is a "slave" in the sense that data in the slave is dependent on data in the master.

      The master has filterBy set up for each of its columns. I want to be able to rerender the slave table upon a filter event in the master table.

       

      The closest I got to success was trying to tap onto the "Return" keypress like below, but it doesn't work well:

       

          <rich:hotKey selector="#masterTableEnclosingPanel" key="return"

              handler="doSomethingA4jFunction()" preventDefault="true" type="onkeyup" />

       

      Any ideas are very welcome!

        • 1. Re: Rerender table upon another table's filter event
          genchev

          Some additional information:

          I am using RichFaces 3.3.3.

          Below is a more detailed code example:

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="........................">

          <f:view>
              <head>
                  <meta http-equiv="....................."/>
              </head>
              <body>
              <a4j:form id="my_form">

                  <a4j:jsFunction name="handleMasterTableFiltering"
                      oncomplete="myCustomFilterColumnsJSFunction()"
                      reRender="slaveTablePanel"/>

                  <rich:panel id="masterTablePanel">

          <!-- MASTER TABLE -->
                      <a4j:region id="masterTableEnclosingRegion">
                          <rich:extendedDataTable rowKeyVar="rkv"
                              height="284px" width="100%" id="masterTable" rows="10"
                              columnClasses="col" value="#{BackingBean.masterTableModel}"
                              binding="#{BackingBean.masterTable}"
                              selection="#{BackingBean.selectionMasterTable}" var="master"
                              enableContextMenu="false" selectionMode="multi">

                              <a4j:support event="onselectionchange"
                                  action="#{BackingBean.handleSelectionMasterTable}"
                                  reRender="slaveTablePanel" />

                              <rich:column width="40px" sortBy="#{'ID'}" filterBy="#{'ID'}">
                                  <f:facet name="header">
                                      <h:outputText value="ID" />
                                  </f:facet>
                                  <h:outputText value="#{master.id}" id="master_id"/>
                              </rich:column>

                              <rich:column width="120px" sortBy="#{'NAME'}" filterBy="#{'NAME'}">
                                  <f:facet name="header">
                                      <h:outputText value="Name" />
                                  </f:facet>
                                  <h:outputText value="#{master.name}" id="master_name" />
                              </rich:column>

                              <rich:column width="140px" sortBy="#{'DESCRIPTION'}" filterBy="#{'DESCRIPTION'}">
                                  <f:facet name="header">
                                      <h:outputText value="Description" />
                                  </f:facet>
                                  <h:outputText value="#{master.description}" id="master_desc" />
                              </rich:column>

                          </rich:extendedDataTable>
                      </a4j:region>
          <!-- END MASTER TABLE -->

                  </rich:panel>

                  <rich:spacer height="10px" />

                  <rich:panel id="slaveTablePanel">

          <!-- SLAVE TABLE -->
                      <rich:panel id="slaveTableEnclosingPanel"
                              style="height:325px; width:1210px; overflow:auto; border:0px; padding-top:0px;">
                          <rich:extendedDataTable rowKeyVar="rkv"
                              height="282px" width="1758px" id="slaveTable" rows="10"
                              columnClasses="col" selectionMode="multi"
                              value="#{BackingBean.slaveTableModel}"
                              selection="#{BackingBean.selectionSlaveTable}"
                              binding="#{BackingBean.slaveTable }"   
                              var="slave" enableContextMenu="false">

                              <a4j:support event="onselectionchange" immediate="true"
                                  action="#{BackingBean.handleSelectionSlaveTable}"/>

                              <rich:column width="40px" sortBy="#{'ID'}" filterBy="#{'ID'}">
                                  <f:facet name="header">
                                      <h:outputText value="ID" />
                                  </f:facet>
                                  <h:outputText value="#{slave.id}" id="slave_id"/>
                              </rich:column>

                              <rich:column width="120px" sortBy="#{'NAME'}" filterBy="#{'NAME'}">
                                  <f:facet name="header">
                                      <h:outputText value="Name" />
                                  </f:facet>
                                  <h:outputText value="#{slave.name}" id="slave_name" />
                              </rich:column>

                              <rich:column width="140px" sortBy="#{'DESCRIPTION'}" filterBy="#{'DESCRIPTION'}">
                                  <f:facet name="header">
                                      <h:outputText value="Description" />
                                  </f:facet>
                                  <h:outputText value="#{slave.description}" id="slave_desc" />
                              </rich:column>

                          </rich:extendedDataTable>
                      </rich:panel>
          <!-- END SLAVE TABLE -->

                  </rich:panel>

                  <rich:hotKey selector="#masterTablePanel" key="return"
                      handler="handleMasterTableFiltering()"
                      preventDefault="true" type="onkeyup" />

              </a4j:form>

              </body>
          </f:view>
          </html>

          • 2. Re: Rerender table upon another table's filter event
            genchev

            The solution is to put the slaveTablePanel in the reRender of the masterTablePanel:

            <rich:extendedDataTable id="masterTable" ....... reRender="slaveTablePanel" > 

            Greetings