Update tab content in row expansion based on selection in row data component

Question

First, I have gone through a almost all (if not all) of related questions on SO, got some important info and insight but couldn't figure out the solution for my scenario.

Some of those important links:

Second, I have the following scenario which is similar to some of the mentioned questions but not the same. I have implemented a p:datatable with tabs in expansion. The row contains a selectBox and what I want is to change the values in an expansion tab based on the value selected in the selectBox. I have stripped the code for relevance here,

<h:form id="formId" onkeypress="if (event.keyCode == 13) { return false; }">
<h:panelGrid columns="2" styleClass="top-align">
    <p:panel>
        <p:dataTable id="dataList"
                     value="#{backingBean.list}"
                     var="item"
                     widgetVar="listTable"
                     selection="#{backingBean.selectedItem}"
                     rowKey="#{item.serialNumber}"
                     filteredValue="#{backingBean.filteredItem}"
                     >

            <p:column headerText="Fare">
                <p:selectOneMenu value="#{item.selectedFare}" converter="#{fareConverter}" var="t"
                                 effect="fade" class="blue font-16 increased-height center-align middle-align">
                    <f:selectItems value="#{item.fares}" var="fare"
                                   itemLabel="#{('&#8377; ').concat(fare.fareAmount)}"
                                   itemValue="#{fare}" />

                    <p:column>
                        <h:outputText value="#{t.fareAmount}" rendered="#{not empty t.fareAmount}"
                                      class="font-16">
                            <f:convertNumber type="currency" currencySymbol="&#8377; " maxFractionDigits="0"/>
                        </h:outputText><br/>
                        <h:outputText value="#{(' (').concat(t.fareName).concat(')')}"
                                      rendered="#{not empty t.fareName}" class="smallFont"/>
                    </p:column>
                    <p:ajax update=":tabs:fareRowTogglerTab"/>
                </p:selectOneMenu>
            </p:column>
            <p:rowExpansion>
                <p:tabView id="tabs" dynamic="true" cache="true">
                    <p:tab title="Fare Details">
                        <p:panelGrid id="fareRowTogglerTab">
                            <p:row>
                                <p:column class="right-align">
                                    <h:outputText value="Base Fare:"/>
                                </p:column>
                                <p:column class="left-align">
                                    <h:outputText value="#{item.selectedFare.fareAmount}" class="blue font-16">
                                        <f:convertNumber type="currency" currencySymbol="&#8377; " maxFractionDigits="0"/>
                                    </h:outputText>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:tab>
                </p:tabView>
            </p:rowExpansion>
        </p:dataTable>
    </p:panel>
</h:panelGrid>

I have tried a lot of other combination of subexpression for

<p:ajax update="..." />

but as I said, nothing is working for me so far.

I am using Primefaces 6.1

I took another shot at it just now and was able to get it right this time. The selector should be, <p:ajax update=":formId:dataList:@this:tabs:fareRowTogglerTab" /> It working!! — PC.

Sheldon Cooper Sheldon Cooper · Accepted Answer · 2018-01-31T10:14:45

try it this way,

update=":form:table:currentRow:tab:component"

The best way would be to checkout the generated html and replace the dynamicComponent with JSF/Primefaces selectors.

Update tab content in row expansion based on selection in row data component

1 Answers