Zack
Zack

Reputation: 5148

How to disable/enable h:datatable

I have a page with a h:selectOneMenu and a data table. I want to load/render/enable my h:datatable based on what I select in the h:selectOneMenu. Is this possible?

Here's some code

<tr class="portlet-table-body" >
<td width="20%" class="porlet-padding-left"><h:outputText value="${operatorProgramBundle.NextGenerationWorkflow}" /></td>
<td width="450px">
    <h:selectOneMenu id="ngw" styleClass="portlet-dropdown"  value="${CRUDOperatorProgram.selectedNextGenWorkflow}">
        <f:selectItems value="${CRUDOperatorProgram.nextGenWorkflowList}" />
    </h:selectOneMenu>
</td>

<h:dataTable id="DispatchConfigurationCustom" columnClasses="portlet-table-same portlet-table-cell"
headerClass="portlet-table-same portlet-table-cell" value="#{CRUDOperatorProgram.workflowConfigList}" var="workflowConfig" width="100%" >
<h:column>
    <f:facet name="header">
        <h:outputText value="Include" />
    </f:facet>
    <h:selectBooleanCheckbox id="includeInd" value="#{workflowConfig.isIncludedInd}"/>
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="Automate" />
    </f:facet>
    <h:selectOneRadio id="onOff" value="#{workflowConfig.isAutomatedInd}">
        <f:selectItem id="onButton" itemLabel="On" itemValue="0" />
        <f:selectItem id="offButton" itemLabel="Off" itemValue="0" />
    </h:selectOneRadio>
</h:column>
</h:dataTable>

Upvotes: 0

Views: 2176

Answers (1)

BalusC
BalusC

Reputation: 1108742

Given that you're using JSF 2.x, just use <f:ajax> in the dropdown to update the closest parent of the datatable and let the rendered attribute of the datatable evaluate true or false accordingly depending on the selected item.

Assuming that you'd like to show the datatable only when item value "foo" is selected, do so:

<h:selectOneMenu value="#{bean.selectedItem}">
    <f:selectItems value="#{bean.availableItems}" />
    <f:ajax render="table" />
</h:selectOneMenu>

<h:panelGroup id="table">
    <h:dataTable rendered="#{bean.selectedItem == 'foo'}">
        ...
    </h:dataTable>
</h:panelGroup>

Upvotes: 2

Related Questions