re-render single datatable row - ajax

Question

i have a dynamic form based on dataTable, nested inside another dataTable.
on selecting a row from nested dataTable i'd like to update corresponding row from parent dataTable using <p:ajax>
<h:form id="form">
<h:dataTable var="field" value="#{testBean.propertyList}" varStatus="status">
<h:column>
<h:outputLabel value="#{field.label}"/>
</h:column>
<h:column>
<h:panelGrid columns="2" styleClass="app-grid" rendered="#{field.toOne}">
<h:panelGroup id="value">
<h:outputText value="#{testBean.entity[field.name]}"/>
</h:panelGroup>
<h:panelGroup>
<p:commandButton id="button" type="button" icon="ui-icon ui-icon-search"/>
<p:overlayPanel for="button" my="left bottom" at="left bottom" widgetVar="panel_#{field.name}">
<p:dataTable
id="table"
value="#{field.selectableModel}"
selection="#{testBean.entity[field.name]}"
selectionMode="single"
var="item"
rows="10"
paginator="true"
paginatorAlwaysVisible="true"
paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{totalRecords} records found"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowSelect" update=":???:value" oncomplete="panel_#{field.name}.hide()"/>
<p:column headerText="entity">#{item}</p:column>
</p:dataTable>
</p:overlayPanel>
</h:panelGroup>
</h:panelGrid>
</h:column>
</h:dataTable>
</h:form>
the problem is that generated component tree does not have repeated explicit child components for dataTable:
<HtmlForm enctype="application/x-www-form-urlencoded" id="form" inView="true" prependId="true" rendered="true" submitted="false" transient="false">
<HtmlDataTable border="-2147483648" first="0" id="j_idt101" inView="true" rendered="true" rowIndex="-1" rowStatePreserved="false" rows="0" transient="false" var="field">
<UIColumn id="j_idt103" inView="true" rendered="true" transient="false">
<HtmlOutputLabel escape="true" id="j_idt120" inView="true" rendered="true" style="" transient="false"/>
</UIColumn>
<UIColumn id="j_idt121" inView="true" rendered="true" transient="false">
<HtmlPanelGrid border="-2147483648" columns="2" id="j_idt122" inView="true" rendered="false" styleClass="app-grid" transient="false">
<HtmlPanelGroup id="value" inView="true" rendered="true" transient="false">
<HtmlOutputText escape="true" id="j_idt227" inView="true" rendered="true" transient="false"/>
</HtmlPanelGroup>
<HtmlPanelGroup id="j_idt117" inView="true" rendered="true" transient="false">
<CommandButton ajax="true" async="false" disabled="false" escape="true" global="true" icon="ui-icon ui-icon-search" iconPos="left" id="button" immediate="false" inView="true" inline="false" partialSubmit="true" readonly="false" rendered="true" transient="false" type="button"/>
<OverlayPanel appendToBody="false" at="left bottom" dynamic="false" for="button" id="j_idt228" inView="true" my="left bottom" rendered="true" transient="false" widgetVar="panel_">
<DataTable currentPageReportTemplate="{totalRecords} records found" draggableColumns="false" editable="false" emptyMessage="No records found." filterEvent="keyup" first="0" id="table" inView="true" lazy="false" liveScroll="false" pageLinks="10" paginator="true" paginatorAlwaysVisible="true" paginatorPosition="bottom" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rendered="true" resizableColumns="false" rowIndex="-1" rowStatePreserved="false" rows="10" rowsPerPageTemplate="5,10,15" scrollHeight="-2147483648" scrollRows="0" scrollWidth="-2147483648" scrollable="false" selectionMode="single" sortOrder="ascending" transient="false" var="item">
<Column colspan="1" disabledSelection="false" filterBy="false" filterMatchMode="startsWith" filterMaxLength="2147483647" filterPosition="bottom" headerText="entity" id="j_idt229" inView="true" rendered="true" resizable="true" rowspan="1" transient="false" width="-1">
#{item}
</Column>
</DataTable>
</OverlayPanel>
</HtmlPanelGroup>
</HtmlPanelGrid>
</UIColumn>
</HtmlDataTable>
</HtmlForm>
for this reason i'm thinking about using <c:forEach> instead of parent dataTable to make every row explicit in component tree.
but the first problem is that testBean is #ViewScoped...
and the second is that using <c:forEach> causes a Java Heap Space error...
some hint?

Answer 1

Give the outer table a fixed id.
<h:dataTable id="table" ...>
Then you'll be able to use
<p:ajax ... update=":form:table:value" />