Janus Engstrøm
Janus Engstrøm

Reputation: 113

Updating a <p:column> only renders its child

I have a requirement to re-render a <p:column> upon changes in an input located in same row within a <p:panelGrid> nested in a <p:dataTable>:

<h:form id="my-form">
<p:dataTable id="my-table" var="item" [...]>
   <p:column [...]>
      <p:panelGrid [...]>
         <p:row id="item-row">
            <p:column id="item-question-column" styleClass="#{item.valueSet ? '' : 'value_not_set'}">
                <p:outputLabel id="item-question-column-label" value="#{item.questionNumberLabel}" />
            </p:column>

            <p:column>
                <p:selectOneRadio id="radio" value="#{item.value}">
                    <f:selectItems var="option" value="#{item.options}" itemLabel="#{option.label}" itemValue="#{option.value}" />
                    <p:ajax event="change" update="item-question-column" />
                </p:selectOneRadio>
            </p:column>
         </p:row>
      </p:panelGrid>
   </p:column>
</p:dataTable>
</h:form>

The basic idea is that after the model has been updated, the item-question-column is updated via ajax and the style class is updated.

The above code generates the following HTML for the item-question-column:

<td id="my-form:my-table:0:item-question-column" role="gridcell" class="ui-panelgrid-cell value_not_set">
   <label id="my-form:my-table:0:item-question-column-label" class="ui-outputlabel ui-widget">1</label>
</td>

This is as expected. Now, when I select a radio button, the ajax change is triggered and updates the item-question-column component, but the resulting HTML for the item-question-column is:

<label id="my-form:my-table:0:item-question-column-label" class="ui-outputlabel ui-widget">1</label>

The enclosing td has disappeared during the update, leaving the layout messed up.

If I update the entire row (item-row), which of course is rendered as a tr, the rendering ends up correct, but I cannot use this method as this will also re-render the radio buttons and discard some jQuery'ed onChange-code that I apply on jQuery.ready().

If the solution to my problem has something to do with needing to update a parent component, what JSF/Primefaces component can I use as a wrapper for a the item-question-column?

Using Primefaces 10 on Mojarra 2.4.0

Upvotes: 0

Views: 29

Answers (0)

Related Questions