Change DataTable row color on checkbox selection

Question

I have a <p:dataTable> , with a checkbox on the last column. I want to color the rows of the table based on the status of the checkbox.

<p:dataTable var="acs" value="#{myBean.listaRevogaveis}"
emptyMessage="#{rotulo.mensagemSemDados}" paginator="true"
rows="10" id="tableacs"
paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
<p:column headerText="Nome" sortBy="#{acs.nome}"
filterBy="#{acs.nome}">
<h:outputText value="#{acs.nome}" />
</p:column>
<p:column headerText="Address" sortBy="#{acs.address}" filterMatchMode="contains"
filterBy="#{acs.address}" filterMaxLength="8">
<h:outputText value="#{acs.address}" />
</p:column>
<p:column headerText="Perfil" sortBy="#{acs.cdPerfil}"
filterBy="#{acs.cdPerfil}"  filterMaxLength="2">
<h:outputText value="#{acs.cdPerfil}" />
</p:column>
<p:column headerText="Cadastramento">
<h:outputText value="#{acs.tsSolicitacao}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Concedido">
<h:outputText value="#{acs.concedidoPor}" />
</p:column>
<p:column headerText="Revogar">
    <p:selectBooleanCheckbox value="#{acs.ativo}" >
<p:ajax event="valueChange" oncomplete="toggleColor(this, #{acs.ativo}" listener="#{myBean.checkBox}" update="@form"/>
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>

So on the toggling of #{acs.ativo} I want that row to receive a different background color.

Following the answer of this question I tried to add this to my xhtml:

<style type="text/css">
.linhaDestacada {   background-color: red !important;}
</style>
<script type="text/javascript">
    function toggleColor(col, status) {

        var linha = jQuery(col).parent();

        if(status) {
            linha.removeClass('linhaDestacada');
        } else {
            linha.addClass('linhaDestacada');           
            }
        }

</script>

But that's of no use. I put some alerts to see if the function was being called, it is. However, trying to see the tagName, or any property of the linha variable returns null.

There is another interesting point, the callback is being called with the previous value of the checkbox. When box is checked, javascript toggleColor() is receiving false on the status, when its unchecked it receives true.

How can I make the row background toggle together with the checkbox toggle?

if someone can help me with the formatting of the code blocks, appreciated. — Mindwin Remember Monica, Dec 06 '12 at 13:47

score 0 · Accepted Answer · edited May 23 '17 at 12:34

Ok, there were a TON of bugs and problems in that one.

First:

primefaces sets the background of the rows to a blank image (depending on the skin). you have to override the url() of the background, so the CSS should look like:

.linhaDestacada { background: url('') red !important;}

Second:

Calling the javascript from the ajax tag was causing the jQuery to find nulls (dunno why). move the callback to the checkbox tag, using its onchange attribute.

The final javascript fragment was:

    <script type="text/javascript">
    function toggleColor(col, status) {

        var linha = jQuery(col).parent().parent().parent().parent().parent();

        if(status) {
            linha.removeClass('linhaDestacada');
            //alert("remove " + linha.html());
        } else {
                linha.addClass('linhaDestacada');
                //alert("add "  + linha.html());

            }
        }

     </script>

Third:

Updating the WHOLE form is a no-no (the css class you added with javascript was being erased)... you should update only what really matters (in this case, the checkbox and the command button.

<p:selectBooleanCheckbox value="#{acs.ativo}" onchange="toggleColor(this, #{acs.ativo})">
    <p:ajax event="valueChange" listener="#{myBean.checkBox}" update="@this :formAcesso:btnRevogaNuke" />
</p:selectBooleanCheckbox>

Fourth:

the commandButton was not rendering. It would be updated on the ajax response, but the browser did not display it. Found this answer, and moved the id btnRevogaNuke on the encapsulating element:

<h:panelGroup id="btnRevogaNuke" layout="block">
    <p:commandButton icon="ui-icon-alert" value="Confirmar rendered="#{myBean.confirmar()}" style="margin-left:600px;" action="#{acessoBean.revogaTodos()}" process="@this @form" update="@form" />
</h:panelGroup>

Change DataTable row color on checkbox selection

1 Answers1