Blinking in case "p:poll" update "p:columnToggler" problem

[_Olga_]

When polling works (or other ajax, but in case pooling it is very visibly) and updating table with p:columnToggler menu (with list of columns) appears for a second.

Example:

Code: Select all

   <p:poll interval="2"
                      listener="#{dtBasicView.init}"
                      update="cars"/>


            <p:dataTable id="cars" var="car" value="#{dtBasicView.cars}">
                <f:facet name="header">
                    List of Cars

                    <p:commandButton id="toggler" type="button" value="Columns" style="float:right"
                                     icon="ui-icon-calculator"/>
                    <p:columnToggler datasource="cars" trigger="toggler"/>
                </f:facet>

                <p:column headerText="Id">
                    <h:outputText value="#{car.id}"/>
                </p:column>

                <p:column headerText="Year">
                    <h:outputText value="#{car.year}"/>
                </p:column> ...

Every 2 second on the lest side of table I can see menu with list of columns.
Thanks in advance!

[sudheer]

What do you mean? Is it columnToggler menu shown/opened for poll updates? Please explain the scenario clearly

[_Olga_]

When pooling updates DataTable menu appears in the left side of the table ( not in place) and rapidly hides.

User sees flicker of the menu.

[sudheer]

I see.I will try to replicate the issue on PF 5.0 showcase.Is it only occurring with poll component update or any ajax update?

[_Olga_]

Any ajax update

[_Olga_]

Participial update solves this problem:

Code: Select all

    <p:poll  update="@(.table-cell-style)" ..

              <p:dataTable  styleClass="@(.table-cell-style)"
                                      id="tableId"..

Notice: table should has own id

[sudheer]

Glad it works.I was not able to replicate with ajax update from commandbutton.Whereas somehow p:poll breaks my page when tried to replicate this issue

[ivanildosilva77]

Hi. I have same problem, but when update a table with <commandButton/>


CommandButton:

<p:commandButton id="btnPesquisaRelat" value="Consultar" process="@this, :formUm:tabs:tblRelatorio,
:formUm:tabs:cnae, :formUm:tabs:dataValidadeLinceca, :formUm:tabs:gridCount"
update=":formUm:tabs:tblRelatorio, :formUm:tabs:gridCount,:msgGlobal"
actionListener="#{relatorioController.apresentarDadosEmpresa(actionEvent)}"/>

DataTable with ColumnToggler

<p:dataTable id="tblRelatorio" var="empresa" value="#{relatorioController.empresas}"
emptyMessage="A consulta não retornou Registros!">
<f:facet name="header">

<p:commandButton id="toggler" type="button" title="Adição/Remoção" value="Colunas"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler id="columnToogler" datasource="tblRelatorio" trigger="toggler" >
<p:ajax event="toggle" listener="#{relatorioController.onToggle}"/>

How to solve this?

[aogonzalez]

Hi, I had the same problem when updating the table. After calling update from any component, column toggler blinked in top-left corner. I solved the problem using the styleClass example, but it still blinks the first time I enter the page. Any ideas why?

ivanildosilva77, try this (same problem as I had):

<p:commandButton id="btnPesquisaRelat" value="Consultar" process="@this, :formUm:tabs:tblRelatorio,
:formUm:tabs:cnae, :formUm:tabs:dataValidadeLinceca, :formUm:tabs:gridCount"
update="@(.table-cell-style), :formUm:tabs:gridCount,:msgGlobal"
actionListener="#{relatorioController.apresentarDadosEmpresa(actionEvent)}"/>

<p:dataTable id="tblRelatorio" styleClass="@(.table-cell-style)" var="empresa" value="#{relatorioController.empresas}"
emptyMessage="A consulta não retornou Registros!">

[aogonzalez]

Digging a little more, i found out that the component is created every time an ajax request is done.

Watch this:



The column-toggler component is being created with same id each time you make an ajax request.
I think that's a bug...

On the other hand, what I've done to "fix" the blinking, is to add this css:

.ui-columntoggler {
display: none;
}

I undid the previous changes using the @ in the styleCalss and update attributes and works ok.

In any case, I think the first case is a bug.