<b:datatable> con dialogs
Bootfaces ofrece el componente b:datatable , difiere un poco del de primefaces.
Contamos con un <b:datatable>, tiene el inconveniente con el select item diferente al de primefaces.
En este ejemplo usamos un <b:dropMenu donde mostramos otros botones y un boton para comentarios que al presionarlo muestra el dialogo.
Se muestra el dialogo para agregar la observación.
Creamos un componente
<?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:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:b="http://bootsfaces.net/ui"
xmlns:e="http://xmlns.jcp.org/jsf/composite/extensions"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<composite:interface >
<composite:attribute name="rendered" />
</composite:interface>
<composite:implementation>
<p:panelGrid columns="2" styleClass="form-group ui-panelgrid-blank" layout="grid"
rendered="#{cc.attrs.rendered}">
<p:row>
<p:column>
<b:dropMenu styleClass="danger" value="" tooltip="#{msg['button.clasificacion']}" iconAwesome="fa-address-card">
<!--<b:panel >-->
<p:panelGrid columns="4" styleClass="form-group ui-panelgrid-blank" layout="grid">
<p:repeat value="#{clienteController.clasificacionclienteServices.clasificacionclienteList}" var="itemclasificacion">
<b:commandButton value="#{clienteController.primerCaracter(itemclasificacion.descripcion)}"
look="#{clienteController.look(itemclasificacion.descripcion)}"
title="#{itemclasificacion.descripcion}"
process=":form:dataTable"
action="#{clienteController.updateClasificacion(item,itemclasificacion)}"
oncomplete="remoteshowall();"
/>
</p:repeat>
<b:commandButton
iconAwesome="fa-comment-o"
action="#{clienteController.forEdit(item)}"
oncomplete="PF('dlg').show();"
update=":form:content" />
</p:panelGrid>
<!--</b:panel>-->
</b:dropMenu>
</p:column>
</p:row>
<p:dialog header="#{msg['field.observacion']}" widgetVar="dlg" id="amodal2" dynamic="true" styleClass="customDialog">
<p:outputPanel autoUpdate="true" id="paneldialogo" >
<p><b:inputTextarea value="#{clienteController.observacion}"/></p>
<b:commandButton value="#{app['button.save']}"
iconAwesome="fa-floppy-o"
title="#{app['button.save']}"
action="#{clienteController.editObservacion(clienteController.observacion)}" />
</p:outputPanel>
</p:dialog>
</p:panelGrid>
</composite:implementation>
</html>En el datatable
<b:dataTable value="#{clienteController.clienteDataModel}"
var="item"
id="dataTable2"
paginated="false"
select="true"
row-style-class="#{item.clasificacioncliente.idclasificacioncliente > 1?'red':'light'}"
onpage="console.log('page');">
<b:dataTableColumn value="#{item.idcliente}" label="#{msg['field.idcliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/>
<b:dataTableColumn value="#{item.cedula}" label="#{msg['field.cedula']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"/>
<b:dataTableColumn value="#{item.nombre}" label="#{msg['field.nombre']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
<b:dataTableColumn value="#{item.telefono}" label="#{msg['field.telefono']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
<b:dataTableColumn value="#{item.celular}" label="#{msg['field.celular']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
<b:dataTableColumn value="#{item.tipocliente.idtipocliente}" label="#{msg['field.idtipocliente']}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
<b:dataTableColumn value="#{item.clasificacioncliente.descripcion}" style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}"
label="#{msg['field.clasificacioncliente']}" />
<b:dataTableColumn value="#{item.observacion}" label="#{msg['field.observacion']}"
style="color: #{clienteController.columnColor(item.clasificacioncliente.descripcion)}" />
<b:dataTableColumn value="#{item.activo}" label="#{msg['field.activo']}" />
<b:dataTableColumn label="">
<a:column
edit="#{clienteController.prepare('view',item)}"
delete="#{clienteController.delete(item,false)}"
rendered="#{applicationMenu.cliente.delete}"
/>
</b:dataTableColumn>
<b:dataTableColumn label="">
<e:columncategoriacliente
rendered="#{applicationMenu.cliente.edit}"
/>
</b:dataTableColumn>
</b:dataTable>Controller
public String forEdit(Cliente cliente){
clienteSelected = cliente;
this.cliente = cliente;
this.observacion = cliente.getObservacion();
return "";
}
public String columnColor(String descripcion ){
String color="";
try {
switch(JsfUtil.primerCaracter(descripcion)){
case "M":
color="red";
break;
default:
color="black";
}
} catch (Exception e) {
JsfUtil.errorMessage("color() " + e.getLocalizedMessage());
}
return color;
}Last updated
