Change color of a line in the datatable when checking a checkbox

Asked

Viewed 447 times

1

I am developing an application using the bootsfaces framework in Javaweb.

On one of my screens I have a datatable of bootsfaces with the values coming from my Bean and a checkbox of the first faces that assists in the deletion or alteration of a certain record.

I need to make sure that when clicking any of the fields of a given record in the datatable, the checkbox of the first faces is triggered and the respective line has its color changed.

The xhtml code so far:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:b="http://bootsfaces.net/ui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="frm">
            <b:dataTable value="#{beanUsuario.usuarios}" style="width: 100%; " id="tabelaUsuario"
                         page-length="5" page-length-menu="5,10,20,50,100" var="usuario"
                         widgetVar="usuario" customLangUrl="json/Portuguese-Brasil.json">
                <b:dataTableColumn header-style="text-align:center;
                                   border-right:none;" content-style="border:none; text-align:center;" label="Nome" >
                    <label for="check#{usuario.nome}">
                        #{usuario.nome}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Email">
                    <label for="check#{usuario.nome}">
                        #{usuario.email}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Endereço">
                    <label for="check#{usuario.nome}">
                        #{usuario.endereco}
                    </label>
                </b:dataTableColumn>
                <b:dataTableColumn header-style="text-align:center;" content-style="border:none; text-align:center;" label="Telefone">
                    <label for="check#{usuario.nome}">
                        #{usuario.telefone}
                    </label>
                </b:dataTableColumn>

                <b:dataTableColumn label="Check box Prime" header-style="text-align:center;" content-style="border:none; text-align:center;" >
                    <p:selectBooleanCheckbox id="check#{usuario.nome}">
                        <p:ajax listener="#{beanUsuario.selecionaUsuario(usuario.nome)}" /> 
                    </p:selectBooleanCheckbox>
                </b:dataTableColumn>
            </b:dataTable>
        </h:form>
    </h:body>
</html>

Here is my Bean:

package com.controller.usuario;

import com.model.usuario.Usuario;
import javax.inject.Named;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.RequestScoped;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.context.RequestContext;

@Named(value = "beanUsuario")
@RequestScoped
public class BeanUsuario implements Serializable {

    private Usuario usuario;
    private Usuario usuarioSelecionado;
    private List<Usuario> usuarios;



    public BeanUsuario() {
        usuarios = new ArrayList<Usuario>();
        usuario = new Usuario();

        teste = 0;

        for (int i = 0; i < 20; i++) {
            Usuario u = new Usuario();

            u.setDescricao("ALGO" + i);
            u.setEmail("[email protected]");
            u.setEndereco("estrada" + 1);
            u.setTelefone(i);
            u.setNome("user" + i);
            u.setTelefone(1232 + i);

            usuarios.add(u);
        }

    }


    public Usuario getUsuario() {
        return usuario;
    }

    public void setUsuario(Usuario usuario) {
        this.usuario = usuario;
    }



    public List<Usuario> getUsuarios() {
        return usuarios;
    }

    public void setUsuarios(List<Usuario> usuarios) {
        this.usuarios = usuarios;
    }



}
jsf primefaces bootsfaces

1 answer

2


(English version Below - Please apologize my bad Portuguese).

It seems you have discovered a missing feature of Bootsfaces. However, if you can do without the Primefaces checkbox, use the attributes select="true" and selectionMode="multiple". They allow you to select a single line. You can also call a method using AJAX when the line is selected.

It seems you’ve discovered a Missing Feature of Bootsfaces. However, if you can do without the Primefaces checkbox, use the Attributes select="true" and selectionMode="multiple". They allow you to select a single Row. You can also call a method using AJAX when the Row is Selected.

  • Your solution partially solved my problem, because when using these elements of the datatable the color of the line is changed but the "onSelect" ajax is not triggered. The funny thing is that when using the primeface p:selectBooleanCheckbox it performs exactly the requested function.

  • Could you give me a few more tips on how "onSelect" works?

  • I was able to make the function be called by "onSelect". Ao invés de fazer a chamada do método desse jeito: onselect="#{beanUsuario.selecionaUsuario(usuario.nome)}" fiz assim : onselect="ajax:beanUsuario.selecionaUsuario(usuario.nome);" como explicado no site do bootsfaces

  • 1

    Maybe we should improve that, too. It’s a common trapdoor. I have deliberately decided to add AJAX to existing Javascript callback methods. But the JSF standard does a little different, many developers try to convey the method as EL expression. -- Maybe we should improve this, Too. It’s a common trapdoor. I deliberately decided to add AJAX to existing Javascript callback methods. But standard JSF does it a bit Different, so Many Developers Try to pass the method as EL Expression.

  • https://github.com/TheCoder4eu/BootsFaces-OSP/issues/835 e https://github.com/TheCoder4eu/BootsFaces-OSP/issues/836.

Browser other questions tagged jsf primefaces bootsfaces

You are not signed in. Login or sign up in order to post.