PrimeFaces Panel collapses on update

Question

I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.

The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?

I use PF 3.2 and JSF2.1

<p:fieldset style="width:200px;height:300px;overflow:auto;">

        <h:outputLabel value="Available Applications"
    style="font-weight: bold;font-size: 14px;" />
                <br />
                <br />
                <h:panelGroup>

                    <ui:repeat var="category"
                        value="#{epsEditController.subscriptionCategoryVOs}">

                        <p:panel header="#{category.applicationCategory.name}"
                            id="panell" toggleable="true" closable="false" toggleSpeed="500"
                            collapsed="true"
                            widgetVar="panel_#{category.applicationCategory.name}">

                            <h:panelGrid columns="2" border="0">
                                <h:outputLabel value="Select all"
                                    style="font-weight: bold;float:left;" />
                                <p:selectBooleanCheckbox value="#{category.allSelected}">
                                    <p:ajax event="change"
                                        listener="#{epsEditController.selectionChanged(category)}"
                                        update="panell" />
                                </p:selectBooleanCheckbox>
                            </h:panelGrid>

                            <ui:repeat var="subcat"
                                value="#{category.applicationSubcategoryVOs}">

                                <p:selectBooleanCheckbox value="#{subcat.selected}"
                                    title="#{subcat.applicationSubcategory.name}"
                                    itemLabel="#{subcat.applicationSubcategory.name}" />

                </ui:repeat>

                </p:panel>
            </ui:repeat>
        </h:panelGroup>
    </p:fieldset>

You have `collapsed="true"` in your panel. Try to change the `true` for a bean variable that will be `true` at beginning but `false` after you have executed your action. — Luiggi Mendoza, Apr 11 '12 at 14:28
This might be useful http://stackoverflow.com/questions/9964759/how-to-update-the-label-of-pselectcheckboxmenu-without-the-component-being-clos/9971685#9971685 — Daniel, Feb 05 '17 at 21:04

score 5 · Answer 1 · edited Feb 01 '18 at 12:21

The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways

Just updating the content of the panel and not the panel
Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute

Updating the content

By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.

                <p:panel header="#{category.applicationCategory.name}" id="panell"
                    toggleable="true" closable="false" toggleSpeed="500"
                    collapsed="true"
                    widgetVar="panel_#{category.applicationCategory.name}">

                    <h:form id="epsAppForm">

                        <h:panelGrid columns="2" border="0">
                            <h:outputLabel value="Select all"
                                style="font-weight: bold;float:left;" />
                            <p:selectBooleanCheckbox value="#{category.allSelected}">
                                <p:ajax event="change"
                                    listener="#{epsEditController.selectionChanged(category)}"
                                    update="@form" />
                            </p:selectBooleanCheckbox>
                        </h:panelGrid>

                       ........
                    </h:form>
                </p:panel>

Using EL instead of a fixed value

You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like

collapsed="#{myBean.toggleStates[category.applicationCategory]}"

You can then keep track of the state of the pannel via ajax calls

<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />

...'myBean' code:

Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();

... prepopulate toggleStates on @init or something

public void toggleState(ApplicationCategory myCategory) {
    toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}

PrimeFaces Panel collapses on update

1 Answers1

Updating the content

Using EL instead of a fixed value

Linked