Row style in dataTable is not updated

Question

I have a datatable with cell editing enabled. The table has a rowStyleClass that assigns background color based on a row status (INSERTED, UPDATED, DELETED or NONE). So when I edit a row, it gets an UPDATED status, when delete button is clicked, row gets a DELETE status,... Based on that status, row background should be properly coloured (green for UPDATED, red for DELETED, yellow for INSERTED).

My code:

<p:dataTable id="tblElement" var="eltItem" value="#{bean.elementList}" binding="#{bean.dtElements}" emptyMessage="No data to be displayed."
                editable="true" editMode="cell" rowIndexVar="rowIndexElt" rowKey="#{eltItem.id}" resizableColumns="true" styleClass="eltStyle"
                rowStyleClass="#{bean.elementRowStyle}">

                <p:ajax event="cellEdit" listener="#{bean.doMarkRowAsUpdated}" update=":form1:tabView:tblElement" />

                <p:column>
                    <p:commandButton id="btnMarkAsDeleted" icon="ui-icon ui-icon-trash" update="tblElement" action="#{bean.doBtnMarkAsDeleted}">
                        <p:confirm header="Confirm" message="Do you really want to delete an element?" icon="ui-icon-alert" />
                    </p:commandButton>
                </p:column>

                <p:column headerText="Key">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{eltItem.key}" />
                        </f:facet>
                        <f:facet name="input">
                            <p:inputText value="#{eltItem.key}" />
                        </f:facet>
                    </p:cellEditor>
                </p:column>

               <!-- some more columns -->
<p:dataTable>

When a cell is edited, doMarkRowAsUpdated method should be executed... and it is. Row status is set to UPDATED, so edited row background should be colored to green, but it is NOT. Note that rowStyleClass value is as it should be because the whole coloring thing works when table edit mode is set to 'row'. One more thing to mention... Let's say that I edit some row. As already mentioned, background color doesn't change. But if my next action is marking some other row as deleted, that row IS colored in red. And that's not all - previously edited row is ALSO colored in green! It's like after 'button click' method is executed, row style is updated, but after 'cellEdit' event method is executed, row style is not updated.

Any suggestion how to make row coloring work?

I'm using PF 5.1.

Maybe your update attribute in the ajax is wrong? I can see that the ajax component is updating: update=":form1:tabView:tblElement", while your commandButton has the update="tblElement"? — Emil Kaminski
@EmilKaminski because the commandButton is inside tblElement. It's ok with just update="tblElement", it worked fine in 'row edit' mode. I also tried with update=":form1:tabView:tblElement"... no luck. — peterremec
Look at one of these: stackoverflow.com/questions/15257554/… or stackoverflow.com/questions/30120998/… — Kukeltje

SamuelN. SamuelN. · Accepted Answer · 2016-03-29T08:02:29

It should work when you embed the table in a form and update the form with a remoteCommand like this:

<p:remoteCommand name="onCellEdit"  update="@form" />
<p:dataTable ... rowStyleClass="#{bean.elementRowStyle}">
<p:ajax 
   event="cellEdit"
   listener="#{bean.doMarkRowAsUpdated}"
   oncomplete="onCellEdit()"/>

Row style in dataTable is not updated

1 Answers