Is conditional rendering of components possible inside datatable without updating the entire datatable?

Question

<h:dataTable value="#{bean.listOfRows}" var="eachRow" id="theDataTable">
  <h:column>
        <p:outputPanel rendered="#{eachRow.visible}">
              <h:selectManyCheckbox 
                    value="#{xxxx}"
                    label="#{xxxx}">
                    <f:selectItems value="#{checkBoxItems}" var="eachItem" itemLabel="#{eachItem.label}" itemValue="#{eachItem.value}" />
                    <p:ajax event="change" update="theDataTable" />
              </h:selectManyCheckbox>
        </p:outputPanel>
        <p:outputPanel rendered="#{eachRow.visible}">
              <h:selectOneRadio 
                    value="#{xxxx}"
                    label="#{xxxx}">
                    <f:selectItems value="#{radioItems}" var="eachItem" itemLabel="#{eachItem.label}" itemValue="#{eachItem.value}" />
                    <p:ajax event="change" update="theDataTable" />
              </h:selectOneRadio>
        </p:outputPanel>

        <p:outputPanel rendered="#{eachRow.visible}">
        </p:outputPanel>
        <p:outputPanel rendered="#{eachRow.visible}">
        </p:outputPanel>
        <p:outputPanel rendered="#{eachRow.visible}">
        </p:outputPanel>
        <p:outputPanel rendered="#{eachRow.visible}">
        </p:outputPanel>
    .
    .
    .

  </h:column>                                     
</h:dataTable>

Within the set of rows of the data table, some rows are to be conditionally rendered depending on the VALUE CHANGE EVENTS(processed using AJAX requests) on the previous row's input component. Can I make these rows visible without re-rendering the entire data table ? ? ? I am using JSF 2.0.6 with PrimeFaces 2.2.1.

score 0 · Accepted Answer · edited May 23 '17 at 10:26

As suggested by BalusC for this question link use padding in the datatable column like this.

<h:dataTable id="mainDatatable" value="#{bean.listOfRows}" var="eachRow" id="theDataTable">
  <h:column>
    <h:panelGroup id="padding" layout="block">
      <p:outputPanel rendered="#{eachRow.visible}">
          <h:selectManyCheckbox 
                value="#{xxxx}"
                label="#{xxxx}">
                <f:selectItems value="#{checkBoxItems}" var="eachItem" itemLabel="#{eachItem.label}" itemValue="#{eachItem.value}" />
                <p:ajax event="change" update="theDataTable" />
          </h:selectManyCheckbox>
      </p:outputPanel>
    <p:outputPanel rendered="#{eachRow.visible}">
          <h:selectOneRadio 
                value="#{xxxx}"
                label="#{xxxx}">
                <f:selectItems value="#{radioItems}" var="eachItem" itemLabel="#{eachItem.label}" itemValue="#{eachItem.value}" />
                <p:ajax event="change" update="theDataTable" />
          </h:selectOneRadio>
    </p:outputPanel>

    <p:outputPanel rendered="#{eachRow.visible}">
    </p:outputPanel>
    <p:outputPanel rendered="#{eachRow.visible}">
    </p:outputPanel>
    <p:outputPanel rendered="#{eachRow.visible}">
    </p:outputPanel>
    <p:outputPanel rendered="#{eachRow.visible}">
    </p:outputPanel>
.
.
.
    </h:panelGroup>
  </h:column>                                     
</h:dataTable>

The datatable creates padding over every component in the column whether rendered or not. Now it is upto your dependent logic. If you want to update particular row of the datatable use the client id generated from a backing bean or binding the component to bean as suggested by BalusC in this question. The client id will be of the format mainDatatable:rowIndex:padding. Cheers!

Is conditional rendering of components possible inside datatable without updating the entire datatable?

1 Answers1

Linked