Rerender rich:extendedDataTable upon another table's filter event

StackOverflow https://stackoverflow.com/questions/15884950

  •  02-04-2022
  •  | 
  •  

Question

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" /

I am using RichFaces 3.3.3. Any ideas are very welcome!

As requested by khan I am adding some more XHTML source code. I am using RichFaces 3.3.3:

<!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>
Was it helpful?

Solution

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

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

Greetings :)

OTHER TIPS

Try adding the following to master table:

<a4j:support event="onkeyup"
             oncomplete="myCustomFilterColumnsJSFunction()"
             reRender="slaveTablePanel" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top