Hide Primefaces datatable based on dropdown value

Question

I need to show and hide a datatable based on the selection made from a dropdown. Is this possible; and if so, how do I do it.

<h:panelGrid columns="2" cellpadding="5">
     <p:outputLabel for="lookupType" value="Lookup Type" />
     <p:selectOneMenu id="lookupType" value="#{lookupTypeBean.lookupType}" style="width: 300px">
          <f:selectItem itemLabel="-- Select Lookup Type --" itemValue="" noSelectionOption="true" />
          <f:selectItems value="#{lookupTypeBean.lookupTypes}" />
          <p:ajax listener="#{lookupTypeBean.lookupTypeChange()}" />
     </p:selectOneMenu>
</h:panelGrid>

I have a method in my bean that is connect to the ajax listener. I have tried to add a rendered property to the with a boolean value but it doen not work (or I did not do it right) either way, hopefully someone can help me.

Thanks

Answer 1

yes, you can create a boolean variable and change it value when dropdown change, then use visible property to apply this behavior to the datatable. according with the change of the variable.

An example below.

<h:form>
      <p:selectOneMenu id="visibility" value="#{someBean.dataTableShow}" style="width:125px">
          <p:ajax update="panel"/>
         <f:selectItem itemLabel="Hide" itemValue="false"/>
         <f:selectItem itemLabel="Show" itemValue="true"/>
      </p:selectOneMenu>
   </h:form>

<p:panel visible="${someBean.dataTableShow}" id="panel">
    <p:dataTable var="Id" id="table">
        <p:column headerText="Id">
            <h:outputText/>
        </p:column>

        <p:column headerText="Car">
            <h:outputText/>
        </p:column>
    </p:dataTable>
</p:panel>

this is the view code, you need to use ajax tag to render the datatable without refresh the page.

then you need to have a variable to save the current datatable state, true if show it, otherwise false.

@ManagedBean
@SessionScoped
public class SomeBean {

    private boolean dataTableShow = true;

    public boolean isDataTableShow() {
        return dataTableShow;
    }

    public void setDataTableShow(boolean dataTableShow) {
        this.dataTableShow = dataTableShow;
    }
}