How to hide a h:panelGrid

Question

I have a <p:selectOneRadio> with two <f:selectItem> and I have two <h:panelGrid>. I want to hide one of the <h:panelGrid> depending of the <f:selectItem> selected.

<p:selectOneRadio>
    <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
    <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
</p:selectOneRadio>

<h:panelGrid id="pnl1">
    //More stuff here...
</h:panelGrid>

<h:panelGrid id="pnl2">
    //More stuff here...
</h:panelGrid>

In this example how can i hide pnl1 if the option 1 is selected in the radio?

How can i hide pnl2 if the option 2 is selected in the radio?

Please show me the Bean code needed too.

Only one pnl should be showed

score 4 · Accepted Answer · edited May 23 '17 at 11:59

4

You can do it through ajax.

<h:form id="frmPanels">
    <p:selectOneRadio id="sorPanelShow" binding="#{sorPanelShow}">
        <f:selectItem itemLabel="Hide pnl1" itemValue="1" />
        <f:selectItem itemLabel="Hide pnl2" itemValue="2" />
        <p:ajax update="pnlContainer" />
    </p:selectOneRadio>

    <h:panelGroup id="pnlContainer" layout="block">
        <h:panelGrid id="pnl1" rendered="#{sorPanelShow.value eq '2'}">
            //More stuff here...
        </h:panelGrid>

        <h:panelGrid id="pnl2" rendered="#{sorPanelShow.value eq '1'}">
            //More stuff here...
        </h:panelGrid>
    </h:panelGroup>
</h:form>

Note that you have to use a <h:panelGroup> to wrap the <h:panelGrid> to re-render. This is because each non-rendered UIComponent (rendered="false") won't be part of the tree component stored in the view and won't be able to be updated by ajax operations. So, instead rendering each <h:panelGrid> on their own, it is better to update the wrapper UIComponent. Also, <h:panelGroup layout="block"> will use a <div> when generating the HTML.

Associated info:

edited May 23 '17 at 11:59

Community

1
1

answered Jun 02 '14 at 17:14

Luiggi Mendoza

85,076
16
154
332

Hey that was great! but i need to evaluate different, not equal in rendered option, how to do that? – Kaz Miller Jun 02 '14 at 17:31
@KazMiller `rendered` attribute should evaluate to `false` in order to not show the component. So, just provide a field from your managed bean that has a `boolean` value and set its value on the method called by the `` event. – Luiggi Mendoza Jun 02 '14 at 17:33
where can i see all the expressions that i can use in components with binding? – Kaz Miller Jun 02 '14 at 17:47
@KazMiller it will depend on the available fields from the component. – Luiggi Mendoza Jun 02 '14 at 17:49
Gracias Brother espero tener tu ayuda en el futuro! – Kaz Miller Jun 02 '14 at 17:56
@KazMiller de nada compañero :P – Luiggi Mendoza Jun 02 '14 at 17:56

How to hide a h:panelGrid

1 Answers1

Linked