0

I have a Primefaces datagrid with a bunch of togglable panels.

These panels are updated by an ajax poll.

I would like to refresh the panels without losing their toggle status.

The updateNodes method just ask for new values and return the value object used by the datagrid...

Here is my code:

    <h:form id="server_node_form">
        <p:poll interval="10" listener="#{serverNodesView.updateNodes}" update="nodeDataGrid" />
        <p:dataGrid var="node"
            value="#{serverNodesView.dragoNodeGroup.dragoNodes}" columns="3"
            layout="grid" rows="10" paginator="false" id="nodeDataGrid" >

            <f:facet name="header">
            Estados de los nodos del servidor
            </f:facet>
            <p:panel toggleable="true" collapsed="true"
                toggleTitle="Información detallada del nodo">
                <f:facet name="header">
                    <p:panelGrid columns="2" layout="grid"
                        styleClass="ui-panelgrid-blank"
                        columnClasses="ui-grid-col-3,ui-grid-col-9">
                        <p:graphicImage
                            name="images/server_#{node.status.toLowerCase()}.png" width="64"
                            height="64" />
                        <p:panelGrid columns="1" styleClass="ui-panelgrid-blank">
                            <h:outputText value="#{node.hostname}"
                                style="font-weight: bold; font-size: 120%" />
                            <h:outputText value="#{node.ip}: #{node.status}"
                                style="font-weight: bold; font-size: 120%" />
                            <h:outputText value="#{node.alias}"
                                style="font-weight: bold; font-size: 90%" />
                        </p:panelGrid>
                    </p:panelGrid>
                </f:facet>
                <p:panelGrid columns="2" layout="grid">
                    <p:outputPanel>
                        <h:panelGrid columns="2">
                            <h:outputText value="CPU (utilizada):" />
                            <h:outputText value="#{node.cpuUsed}" />
                            <h:outputText value="RAM (utilizada):" />
                            <h:outputText value="#{node.ramUsed}" />
                        </h:panelGrid>
                    </p:outputPanel>
                    <p:outputPanel>
                        <h:panelGrid columns="2">
                            <h:outputText value="ETH1 (entrada):" />
                            <h:outputText value="#{node.net1in}" />
                            <h:outputText value="ETH1 (salida):" />
                            <h:outputText value="#{node.net1out}" />
                        </h:panelGrid>
                    </p:outputPanel>
                </p:panelGrid>
            </p:panel>
        </p:dataGrid>    
    </h:form>
Néstor Almeida
  • 101
  • 7
  • You yourself set the collapsed attribute to true. So behaviour is as expected. – Kukeltje Jan 31 '18 at 19:07
  • Problem is when I expand the panel, when ajax executes the update of the component the expanded panels collapse... The behaviour that I want is to keep expanded panels status. – Néstor Almeida Feb 01 '18 at 08:21
  • Yes that is what you already meantioned in the question, so let me repeat myself too: You TELL it to be collapsed when (re)rendering by setting `collapsed="true"` – Kukeltje Feb 01 '18 at 09:11
  • Yes I know, because it's the initial state of the panels... I just want to preserve the latest states, when the user expand the panels... I need to refresh the data inside the panels but I want to keep the expanded panels. – Néstor Almeida Feb 01 '18 at 09:42
  • It's the initial state when rendering (re-rendering in an ajax update is also rendering) – Kukeltje Feb 01 '18 at 09:58
  • If you don't see what I try to do and you only focus in the "initial state thought" you don't help too much... I render the grid, I render the panels... the panel content refresh the data, an user open a panel and next refresh closes the panel, yes.. because it's the initial status at the refresh do that, but just it's what I'm trying to solve... – Néstor Almeida Feb 01 '18 at 10:08
  • Possible duplicate of [PrimeFaces Panel collapses on update](https://stackoverflow.com/questions/10107795/primefaces-panel-collapses-on-update) – Kukeltje Feb 01 '18 at 12:39

1 Answers1

0

Finally I found a way to update the component without loosing the toggle status of the panels... the bean method updates the array of data used by the panels and the poll updates only the text (you need to inspect in your browser to find the classes used by the component)

In the poll tag you can tell Primefaces to update only certain component classes... It's called "PrimeFaces Selectors" and I found it in a question asked here in stackoverflow

<div class="ui-panelgrid-cell ui-g-12 ui-md-6"><div id="tabViewForm:tabView:server_node_form:nodeDataGrid:0:j_idt70" class="ui-outputpanel ui-widget">

Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes

<p:poll interval="10" listener="#{serverNodesView.updateNodes}" update="@(.ui-outputpanel) @(.ui-panelgrid)" />
Néstor Almeida
  • 101
  • 7