Dependent columns in Primefaces datatable - jsf

I'm using an editable Primefaces p:datatable to show the data to the user. In this datatable, I have a p:column with a h:selectOneMenu, and another one with a p:selectBooleanCheckbox.
I want to check or uncheck and disable or enable the checkbox depending on the value selected in the h:selectOneMenu.
If I only had one h:selectOneMenu and one p:selectBooleanCheckbox, I'd use a p:ajax to attach a listener to the change event, and I'd manipulate the p:selectBooleanCheckbox in this method. But I have a pair of h:selectOneMenu and p:selectBooleanCheckbox per row and I don't know how to do this.
This is what I tried:
<h:form>
<p:dataTable var="appointment" value="#{prescController.appointmentsToday}" editable="true" id="tblAppointments">
<p:ajax event="rowEdit"
listener="#{prescController.onEdit}" update=":messages" />
<p:column sortBy="presc.drug" headerText="Drug">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{appointment.presc.drug.name}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{appointment.presc.drug}"
converter="#{drugConverter}" required="true">
<f:selectItem itemLabel="" noSelectionOption="true" />
<f:selectItems value="#{prescController.drugs}"
var="drug" itemLabel="#{drug.name}" />
<p:ajax update="autoAmount" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="presc.autoAmount" headerText="Auto amount">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="Y"
rendered="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}" />
<h:outputText value="N"
rendered="#{empty appointment.presc.drug.rules or not appointment.presc.autoAmount}" />
</f:facet>
<f:facet name="input">
<p:selectBooleanCheckbox id="autoAmount"
value="#{not empty appointment.presc.drug.rules and appointment.presc.autoAmount}"
disabled="#{appointment.presc.drug.name eq 'somethingsomething'}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
</h:form>

The post Retrieving other component's client ID in JSF 2.0 describes how to retrieve ids of other components in a page. In my opinion, the #{p:component('sampleButton')} should find the next component having this ID in the component tree - this should be the same row.
Alternatively, you should be able to rerender the whole row via JSF 2 #{component.parent.clientId} functionality (measure out, how many "parent" steps you need, e.g. #{component.parent.parent.clientId}).
Hope it helps, else just add comments... :-)

I can't imagine why you are unsatisfied with simple update="checkboxId"but what you can try is updating component through widgetVar which you can generate during page render.
Tiny example:
<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table Example</title>
</h:head>
<h:body>
<h:form prependId="false">
<p:dataTable var="data" value="#{tableBean.data}">
<p:column headerText="Command">
<p:commandButton value="Toggle" actionListener="#{tableBean.toggleSelection(data.id)}"
update="#widgetVar(tableCheckboxComponent_#{data.id})" />
</p:column>
<p:column headerText="Value">
<h:outputText value="#{data.value}" />
</p:column>
<p:column headerText="Selected">
<p:selectBooleanCheckbox widgetVar="tableCheckboxComponent_#{data.id}" value="#{data.selected}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
Backing bean:
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class TableBean {
private Map<String, MyData> data;
public List<MyData> getData(){
return new ArrayList<MyData>(data.values());
}
public TableBean() {
data = new HashMap<String, MyData>();
for (int i = 0; i<22; i++) {
String id = "id" + Integer.toString(i);
data.put(id, new MyData( id , i));
}
}
public void toggleSelection(String id) {
MyData myData = data.get(id);
myData.setSelected(!myData.isSelected());
}
}
And Data object:
public class MyData {
private String id;
private boolean selected;
private int value;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
public MyData(String id, int value) {
this.id = id;
this.value = value;
this.selected = false;
}
}

I still don't know why my approach didn't work.
In the end, I added a listener to the p:ajax component to manipulate the SelectBooleanCheckbox in the managed bean
<p:ajax listener="#{prescBean.onDrugSelected}" update="autoAmount" />
public void onDrugSelected(AjaxBehaviorEvent event) {
Drug drug = (Drug) ((UIOutput) event
.getSource()).getValue();
boolean hasRules = drug.getRules().size() > 0;
SelectBooleanCheckbox cbAutoAmount = (SelectBooleanCheckbox) ComponentUtils
.findComponent(FacesContext.getCurrentInstance().getViewRoot(),
"autoAmount");
cbAutoAmount.setDisabled(!hasRules);
cbAutoAmount.setValue(hasRules);
}

Related

CommandButton in Dialog containing Picklist doesn't fire action method

the problem I have is that the command button in my dialog doesn't fire the action method in the controller. No logger outputs for the example method "greet". Can anybody look over please and give me hints? What am I doing wrong?
My JSF-Page:
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view id="bestellungLieferantView">
<f:metadata>
<f:event type="preRenderView"
listener="#{camundaTaskForm.startTaskForm()}" />
</f:metadata>
<h:head>
<title>Paket zusammenstellen</title>
</h:head>
<h:body>
<h:form id="bestellungLieferantForm">
<p:dialog id="komponentenAuswahlDialog"
header="Komponenten auswählen" widgetVar="komponentenAuswahlDialog"
modal="true" height="auto" width="auto">
<p:pickList id="komponenteAuswahlPickList"
value="#{bestellungLieferantController.komponentenDualListModel}"
var="komponente" itemLabel="#{komponente.serienNummer}"
converter="entityConverter"
itemValue="#{komponente}" showSourceFilter="true"
showTargetFilter="true">
<f:facet name="sourceCaption">Quelle</f:facet>
<f:facet name="targetCaption">Ziel</f:facet>
</p:pickList>
<p:commandButton process="#this"
action="#{bestellungLieferantController.greet}"
id="auswahlSpeichern" value="Auswahl speichern"
oncomplete="PF('komponentenAuswahlDialog').hide();" />
</p:dialog>
<h:panelGrid id="paketInformationPG" columns="2" border="1">
<f:facet name="header">
<h:outputText value="Paket zusammenstellen" />
</f:facet>
<h:outputLabel value="Kunde:" />
<h:outputText value="#{processVariables['kunde']}" />
<h:outputLabel value="Betriebssystem:" />
<h:outputText value="Platzhalter" />
<h:outputLabel value="Benutzer:" />
<h:outputText value="#{processVariables['benutzerName']}" />
</h:panelGrid>
<h:panelGrid id="komponentenZusammenstellungPG" columns="2"
border="1">
<f:facet name="header">
<h:panelGrid columns="2">
<h:outputText value="Komponenten" />
<p:commandButton id="auswahlKomponenteButton"
action="#{bestellungLieferantController.createAvailableKomponentDualListModel()}"
type="button" onclick="PF('komponentenAuswahlDialog').show();"
value="+" />
</h:panelGrid>
</f:facet>
<p:dataTable id="komponenteTable" widgetVar="komponenteTable"
var="komponente"
value="#{bestellungLieferantController.komponentenList}">
<p:column>
<f:facet name="header">Typ</f:facet>
<h:outputText value="#{komponente.produkt.typ.name}" />
</p:column>
<p:column>
<f:facet name="header">Bezeichnung</f:facet>
<h:outputText value="#{komponente.produkt.name}" />
</p:column>
<p:column>
<f:facet name="header">SN</f:facet>
<h:outputText value="#{komponente.serienNummer}" />
</p:column>
<p:column headerText="Kaufdatum">
<f:facet name="header">Kaufdatum</f:facet>
<h:outputText value="#{komponente.bestellDatum}" />
</p:column>
<p:column>
<f:facet name="header">Aktion</f:facet>
<p:commandLink value="Bearbeiten" />
<p:commandLink value="Enfernen" />
</p:column>
</p:dataTable>
</h:panelGrid>
</h:form>
</h:body>
</f:view>
</html>
My Bean:
#ManagedBean(name="bestellungLieferantController")
#SessionScoped
public class BestellungLieferantController implements Serializable{
/**
*
*/
private static final long serialVersionUID = 2862985625231368306L;
#EJB
private BestellungFacade bestellungFacade;
#EJB
private PaketFacade paketFacade;
#EJB
private KomponenteFacade komponenteFacade;
#EJB
private BetriebssystemFacade betriebssystemFacade;
// Komponent-List with added komponent items
private List<Komponente> komponentenList = new ArrayList<Komponente>();
private DualListModel<Komponente> komponentenDualListModel;
private static final Logger logger = Logger.getLogger(BestellungLieferantController.class);
public DualListModel<Komponente> getKomponentenDualListModel() {
return komponentenDualListModel;
}
public void setKomponentenDualListModel(DualListModel<Komponente> komponentenDualListModel) {
this.komponentenDualListModel = komponentenDualListModel;
}
public List<Komponente> getKomponentenList() {
logger.info("KomponenList-Size: " + this.komponentenList.size());
return komponentenList;
}
public void setKomponentenList(List<Komponente> komponentenList) {
logger.info("Setting a new KomponentenList...");
this.komponentenList = komponentenList;
}
public void greet(){
logger.info("Greet Method Invoked!");
}
/**
* Gets the actual Model with the distinct source and
* #param targetList
* #return
*/
#PostConstruct
public void createAvailableKomponentDualListModel(){
// Logger
logger.info("CreateAvailableKomponentDualList invoked!");
List<Komponente> sourceKomponenteList = this.komponenteFacade.getAllAvailableKomponente();
List<Komponente> sourceKomponenteDistinctList = new ArrayList<Komponente>();
if (this.komponentenList.size() != 0){
for(Komponente k : sourceKomponenteList){
if (!komponentenList.contains(k)){
sourceKomponenteDistinctList.add(k);
}
}
} else {
sourceKomponenteDistinctList = sourceKomponenteList;
}
// komponentenDualListModel.setSource(sourceKomponenteDistinctList);
// komponentenDualListModel.setTarget(komponentenList);
this.setKomponentenDualListModel(new DualListModel<Komponente>());
this.getKomponentenDualListModel().setSource(sourceKomponenteDistinctList);
this.getKomponentenDualListModel().setTarget(this.komponentenList);
}
public void putSelectionIntoKomponenteList(){
logger.info("PutSelectionIntoKomponentList");
logger.info("KOMPONENTELIST: " + komponentenDualListModel.getTarget());
this.komponentenList = this.komponentenDualListModel.getTarget();
}
}
My Converter:
#FacesConverter(value = "entityConverter")
public class EntityConverter implements Converter {
// Checking the converter
private static final Logger logger = Logger.getLogger(EntityConverter.class);
private static Map<Object, String> entities = new WeakHashMap<Object, String>();
#Override
public String getAsString(FacesContext context, UIComponent component, Object entity) {
synchronized (entities) {
logger.info("[Converter] GetAsString: " + ", Class:" + entity.getClass() + ", Component-ID: " + component.getId());
if (!entities.containsKey(entity)) {
String uuid = UUID.randomUUID().toString();
entities.put(entity, uuid);
return uuid;
} else {
return entities.get(entity);
}
}
}
#Override
public Object getAsObject(FacesContext context, UIComponent component, String uuid) {
logger.info("[Converter] GetAsString: " + ", UUID:" + uuid + ", Component-ID: " + component.getId());
for (Entry<Object, String> entry : entities.entrySet()) {
if (entry.getValue().equals(uuid)) {
return entry.getKey();
}
}
//return uuid;
return null;
}
}
you need actionListener attribute instead of action in your p:commandbutton tag. and Also use #ViewScoped instead of #SessionScoped in your backing bean. and add ajax="false" in p:commandButton

Render different columns in Primefaces datatable

I have a datatable on a page with columns Unit/Set, Vehicle, Next Maintenance, Day 1,...,Day 7. I have two radio buttons also to change the sorting of the data, when I change to the other radio button which sorts by Date instead of Unit/Set the columns should change to Date, A Exams, B Exams, C Exams,...
I assume I need to create two datatables and then use the rendered attribute to decide which table is shown depending on which sort is selected.
<p:dataTable id="dataTableEnquiryNextDue" styleClass="editable-datatable"
rows="20"
scrollable="true"
frozenColumns="2"
rendered=>
<p:column headerText="Unit/Set" />
<p:column headerText="Vehicle" />
<p:column headerText="Next Maintenance" />
<p:column headerText="Day 1" />
<p:column headerText="Day 2" />
<p:column headerText="Day 3" />
<p:column headerText="Day 4" />
<p:column headerText="Day 5" />
<p:column headerText="Day 6" />
<p:column headerText="Day 7" />|
</p:dataTable>
This is my code for the datatable, except I have left the rendered blank at the minute, I believe I'll have to make some kind of bean, I think it will get the value of the radio buttons then I will have something like
rendered="#{Bean.searchSort == Unit}
or
rendered="#{Bean.searchSort == Date}
I have created a bean with the following code
#ManagedBean
#ViewScoped
public class DepotWorkloadBean implements Serializable {
public enum Sort {
UNIT, DATE
}
private Sort sortMode = Sort.UNIT;
public Sort getSortMode() {
return sortMode;
}
public void enterUnitSort() {
sortMode = Sort.UNIT;
}
public void enterDateSort() {
sortMode = Sort.DATE;
}
}
And in my table added the line
rendered="#{depotWorkloadBean.sortMode == 'UNIT'}"
I have also created my other table the same way but with
rendered="#{depotWorkloadBean.sortMode == 'DATE'}"
and different columns.
For my radio buttons I have written
<p:radioButton id="UnitSetNumber" for="customRadio3" itemIndex="0"
onchange="#{depotWorkloadBean.enterUnitSort}" update="dataTableDaySortUnit dataTableDaySortDate"/>
<p:radioButton id="DateDue" for="customRadio3" itemIndex="1"
onchange="#{depotWorkloadBean.enterDateSort}" update="dataTableDaySortUnit dataTableDaySortDate"/>
At the moment I am getting an error saying
The class 'DepotWorkloadBean' does not have the property 'enterUnitSort'.
This is quite confusing as it clearly does and as far as I can tell I have spelt everything correctly. I'm still not sure if my approach is actually correct though, so again any advice will be appreciated.
Here is my selectOneRadio
<p:selectOneRadio id="customRadio3" layout="custom">
<f:selectItem itemLabel="UnitSetNumber" itemValue="1" binding="{depotWorkloadBean.enterUnitSort}"
update=":mainForm"/>
<!-- <f:ajax listener="#{depotWorkloadBean.enterUnitSort}" render="#all"/> -->
<f:selectItem itemLabel="DateDue" itemValue="2" binding="{depotWorkloadBean.enterDateSort}"
update=":mainForm"/>
<!-- <f:ajax listener="#{depotWorkloadBean.enterDateSort}" render="#all"/> -->
<f:selectItem itemLabel="DueInValue" itemValue="3" />
</p:selectOneRadio>
EDIT: Here is my updated selectOneRadio
<p:selectOneRadio id="customRadio3" layout="custom"
value="#{depotWorkloadBean.sortMode}"
update=":mainForm">
<f:selectItem itemLabel="UNIT.name" itemValue="UNIT" value="#{depotWorkloadBean.sortMode}"
var="UNIT"/>
<!-- <f:ajax listener="#{depotWorkloadBean.enterUnitSort}" render="#all"/> -->
<f:selectItem itemLabel="DATE.name" itemValue="DATE" value="#{depotWorkloadBean.sortMode}"
var="DATE"/>
<!-- <f:ajax listener="#{depotWorkloadBean.enterDateSort}" render="#all"/> -->
<f:selectItem itemLabel="DueInValue" itemValue="3" />
</p:selectOneRadio>
And here is my updated bean
#ManagedBean
#ViewScoped
public class DepotWorkloadBean implements Serializable {
public enum Sort {
UNIT, DATE
}
private Sort sortMode = Sort.UNIT;
public Sort getSortMode() {
return sortMode;
}
public Sort[] getSortValues() {
return Sort.values();
}
public void setSortMode(Sort sortMode) {
this.sortMode = sortMode;
}
}
EDIT: After a bit of thinking I have taken a new approach, so now my radio button group is like so:
<!-- <f:facet name="actions"> -->
<p:selectOneRadio id="customRadio3" layout="custom"
partialSubmit="true"
value="#{depotWorkloadBean.selectSort}">
<p:ajax update="mainForm" listener="#{depotWorkloadBean.updateSortMode}"/>
<f:selectItem itemLabel="UnitSet" itemValue="UnitSet"/>
<f:selectItem itemLabel="DateDue" itemValue="DateDue"/>
<f:selectItem itemLabel="DueInValue" itemValue="DueInValue"/>
</p:selectOneRadio>
<!-- </f:facet> -->
I have commented out the facet tag as it causes the error
"javax.servlet.ServletException" and I have no idea why.
My tables are as they were before except the rendered line is now
rendered="#{depotWorkloadBean.sortMode == 'UnitSet'}">
and similar for 'DateDue'. And my bean is as follows:
#ManagedBean
#ViewScoped
public class DepotWorkloadBean implements Serializable {
private static final Log log = LogFactory.getLog(DepotWorkloadBean.class);
/*public enum Sort {
UNIT, DATE
}
private Sort sortMode = Sort.UNIT;*/
private String sortMode = "UnitSet";
private String selectSort = "UnitSet";
public void updateSortMode () {
log.info("In updateSortMode " + " State [" + selectSort + "]");
sortMode = selectSort;
}
public String getSortMode() {
return sortMode;
}
public void setSortMode(String sortMode) {
this.sortMode = sortMode;
}
public String getSelectSort() {
return selectSort;
}
public void setSelectSort(String selectSort) {
log.info("Setting selectSort to [" + selectSort + "]");
this.selectSort = selectSort;
sortMode = selectSort;
}
I have only just found out about the log and it seems very useful. When my page builds and I click between the radio buttons my log records 'In updateSortMode State []' "Setting selectSort to State []" so there is clearly something going wrong in the method. The other thing I should mention is my radio buttons are actually displayed further down in the same panelGrid, like so..
<p:row>
<p:column>
<p:radioButton id="UnitSetNumber" for="customRadio3" itemIndex="0"/>
</p:column>
<p:column>
<h:outputLabel for="UnitSetNumber" value="Unit/set number" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:radioButton id="DateDue" for="customRadio3" itemIndex="1"/>
</p:column>
<p:column>
<h:outputLabel for="DateDue" value="Date due" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:radioButton id="DueInValue" for="customRadio3" itemIndex="2" />
</p:column>
<p:column>
<h:outputLabel for="DueInValue" value="Due in value" />
</p:column>
</p:row>
Not sure if that would affect the ajax listener?
Thanks
You don't need an onchange listener, the update= attribute will do the job.
Use a <p:selectOneRadio> with a nested <f:selectitems> that will set the sortMode value of your bean (you might need a converter). Then ensure the parent component of both tables is updated upon selection. This will re-evaluate the rendered= attributes of your tables with the newly set sortMode valule.
Example:
The view:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>TEST</title>
</h:head>
<h:body>
<h:form>
<p:selectOneRadio id="radiogroup"
value="#{testController.selectedValue}">
<f:ajax render=":content"/>
<f:selectItems value="#{testController.valuesTypes}"
var="val"
itemLabel="#{val.name()}"
itemValue="#{val}"/>
</p:selectOneRadio>
</h:form>
<h:form id="content">
<p:outputPanel rendered="#{testController.selectedValue eq 'VALUEA'}">
Value A panel
</p:outputPanel>
<p:outputPanel rendered="#{testController.selectedValue eq 'VALUEB'}">
Value B panel
</p:outputPanel>
<p:outputPanel rendered="#{testController.selectedValue eq 'VALUEC'}">
Value C panel
</p:outputPanel>
</h:form>
</h:body>
</html>
And the bean:
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
#ManagedBean
#ViewScoped
public class TestController {
public enum ValueTypes {
VALUEA,
VALUEB,
VALUEC
}
private ValueTypes selectedValue;
public ValueTypes getSelectedValue() {
return selectedValue;
}
public void setSelectedValue(ValueTypes selectedValue) {
this.selectedValue = selectedValue;
}
#PostConstruct
public void init() {
selectedValue = ValueTypes.VALUEA;
}
public ValueTypes[] getValuesTypes() {
return ValueTypes.values();
}
}

primefaces dynamic nested datatable

With primefaces I made a multicheckbox with several divisions to choose. After clicking the submit Button the chosen divisions should be listed in a datatable with the associated items in a subtable. There could be 0 - n items which should be shown in the subtable.
division1 -> item1, item2
division2 -> item3, item4, item5
The first impression of the webpage looks fine. When I only choose one division and press submit the fitting items will be shown. But when I want to display other items they get overwritten. e.g. when I choose division2 it will display the items item1, item2 and item 5.
How can I make it so that the items will be loaded correctly every time?
I also changed the subtable to a nested datatable, but the behaviour was the same.
I've primefaces version 4.0
Below is my code:
division_list.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Gruppenverwaltung</title>
</h:head>
<h:body>
<f:view>
<h:form id="myForm">
<h2>
<h:outputText value="Division List" />
</h2>
<h:outputText value="Grid: " />
<p:selectOneRadio id="grid" value="#{divisionController.selectedDivisions}" layout="grid" columns="3"
converter="DivisionConverter">
<f:selectItems value="#{divisionController.divisions}" />
</p:selectOneRadio>
<p:commandButton value="Submit" update=":myForm" />
<p:dataTable id="dtDivisions" value="#{divisionController.selectedDivisions}" var="division">
<p:subTable id="stItems" var="item" value="#{division.items}">><f:facet name="header">
<h:outputText value="#{division.name}" />
</f:facet>
<p:column>
<h:inputText value="#{item.name}" />
</p:column>
<p:column>
<p:commandButton icon="ui-icon-disk" action="#{divisionController.doUpdateItem(item)}" />
<p:commandButton icon="ui-icon-trash" oncomplete="confirm.show()">
<f:setPropertyActionListener target="#{divisionController.selectedItem}" value="#{item}" />
</p:commandButton>
</p:column>
</p:subTable>
</p:dataTable>
</h:form>
<p:confirmDialog message="Gewählter Eintrag löschen?" widgetVar="confirm"> --><h:form
id="formDialog">
<p:commandButton value="Yes" action="#{divisionController.doDeleteItem}"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" oncomplete="confirmation.hide()" />
<p:commandButton value="No" type="button" onclick="confirm.hide()" styleClass="ui-confirmdialog-no"
icon="ui-icon-close" />
</h:form>
</p:confirmDialog>
</f:view>
</h:body>
</html>
DivisonController.java:
...
#ManagedBean
#ViewScoped
public class DivisionController implements Serializable {
...
private List<DivisionDto> divisions;
private List<DivisionDto> selectedDivisions;
...
#PostConstruct
public void init() throws MappingTOException {
....
if (divisions == null) {
divisions = club.getDivisions();
}
}
...
DivisionDto.java
...
public class DivisionDto {
....
private List<ItemDto> items;
private String name;
...
ItemDto.java
...
public class ItemDto {
...
private DivisionDto division;
private String name;
...
DivisionConverter.java
#FacesConverter(value = "DivisionConverter")
public class DivisionConverter implements Converter {
private static Map<String, DivisionDto> divisionCache = new HashMap<String, DivisionDto>();
#Override
public Object getAsObject(FacesContext context, UIComponent component, String value) {
DivisionDto val = divisionCache.get(value);
if (val == null) {
val = new DivisionDto();
val.setName(value);
}
return val;
}
#Override
public String getAsString(FacesContext context, UIComponent component, Object value) {
if (value instanceof DivisionDto) {
DivisionDto division = (DivisionDto) value;
divisionCache.put(division.getName(), division);
return division.getName();
} else {
return "";
}
}
}
I would be really grateful for any help.
I solved the issue wie a datatable in a datatable and put a filter on the first datatable. Now it works as expected.

How to display text in a dialog box?

The Data that I have entered in the input text field of the prime faces data table is not displayed in the dialog box JSF file and Data is not displayed in the dialog box
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add/Remove Row</title>
</h:head>
<body>
<h:form id="form">
<p:dataTable id="buss" value="#{busBean.mediumBusModel}" var="bus"
selection="#{busBean.selectedBus}" selectionMode="single" >
<p:column headerText="Brand" style="width:5%">
<p:inputText value="#{bus.brand}" />
</p:column>
<p:column headerText="Model" style="width:5%">
<p:inputText value="#{bus.model}" />
</p:column>
<p:column headerText="Action" style="width:10%">
<p:commandButton actionListener="#{busBean.addBus()}" icon="ui-icon-plus" update=":form" ajax="false" title="add"/>
<p:commandButton actionListener="#{busBean.removeBus(bus)}" icon="ui-icon-minus" update=":form" ajax="false" title="remove"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:displayBus" oncomplete="PF('singleBusDialog').show()"/>
</f:facet>
</p:dataTable>
<br/>
<p:dialog id="dialog" header="Bus Detail" widgetVar="singleBusDialog" resizable="false"
showEffect="fade" hideEffect="explode">
<h:panelGrid id="displayBus" columns="2" cellpadding="4">
<h:outputText value="Brand:" />
<h:outputText value="#{bus}" style="font-weight:bold"/>
<h:outputText value="Model:" />
<h:outputText value="#{bus}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
</h:form>
</body>
</html>
Below is the bean class that I have used
package com.bus.bean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
import com.bus.bean.Bus;
#ManagedBean
#SessionScoped
public class BusBean implements Serializable {
private List<Bus> busList;
private Bus selectedBus;
private BusDataModel mediumBusModel;
public BusBean() {
busList=new ArrayList<Bus>();
busList.add(new Bus("a","b"));
mediumBusModel = new BusDataModel(busList);
//populateRandomCars(cars, 50);
}
public List<Bus> getBusList()
{
return busList;
}
public void setBusList(List<Bus> busList) {
this.busList = busList;
}
public void addBus()
{
Bus newBus=new Bus();
busList.add(newBus);
}
public Bus getSelectedBus() {
return selectedBus;
}
public void setSelectedBus(Bus selectedBus) {
this.selectedBus = selectedBus;
}
public void removeBus(Bus bus)
{
busList.remove(bus);
}
public BusDataModel getMediumBusModel() {
return mediumBusModel;
}
}
-------------------------------------------------------
package com.bus.bean;
import java.util.List;
import javax.faces.model.ListDataModel;
import com.bus.bean.Bus;
import org.primefaces.model.SelectableDataModel;
public class BusDataModel extends ListDataModel<Bus> implements SelectableDataModel<Bus> {
public BusDataModel() {
}
public BusDataModel(List<Bus> data) {
super(data);
}
#Override
public Bus getRowData(String rowKey) {
//In a real app, a more efficient way like a query by rowKey should be implemented to deal with huge data
List<Bus> buss = (List<Bus>) getWrappedData();
for(Bus bus : buss) {
if(bus.getModel().equals(rowKey))
return bus;
}
return null;
}
#Override
public Object getRowKey(Bus bus) {
return bus.getBrand();
}
}
-----------------------------------------------------------------------------------------------/
package com.bus.bean;
import java.io.Serializable;
public class Bus implements Serializable
{
public String model;
public String brand;
public Bus()
{
}
public Bus(String Model,String Brand)
{
this.model = model;
this.brand = brand;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String getBrand() {
System.out.println("in set:"+brand);
return brand;
}
public void setBrand(String brand) {
System.out.println("in set:"+brand);
this.brand = brand;
}
#Override
public boolean equals(Object obj) {
if(obj == null)
return false;
if(!(obj instanceof Bus))
return false;
Bus compare = (Bus) obj;
return compare.model.equals(this.model);
}
#Override
public int hashCode() {
int hash = 1;
return hash * 31 + model.hashCode();
}
#Override
public String toString() {
return "Bus{" + "model=" + model + ", brand=" + brand + '}';
}
enter code here
}
Please let me know how to get the data that I have entered in the text field of Primefaces data table to the dialog box
You should use the selected value from the datatable.
selection="#{busBean.selectedBus}"
So , in your dialog box
<h:outputText value="Brand:" />
<h:outputText value="#{busBean.selectedBus.brand}" />
Also,
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:displayBus,:form:dialog" oncomplete="PF('singleBusDialog').show()"/>
Updating the dialog box with value of the selected row.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add/Remove Row</title>
</h:head>
<body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:contextMenu for="buss">
<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('busTable').showCellEditor();return false; "/>
</p:contextMenu>
<p:dataTable id="buss" var="bus" value="#{busBean.busModel}" editable="true" editMode="cell" widgetVar="busTable"
selection="#{busBean.selectedBus}">
<p:ajax event="cellEdit" listener="#{busBean.onCellEdit}" update=":form:messages" />
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Brand" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{bus.brand}" /></f:facet>
<f:facet name="input"><p:inputText id="brandInput" value="#{bus.brand}" style="width:96%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Model" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{bus.model}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{bus.model}" style="width:96%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Action" style="width:10%">
<p:commandButton actionListener="#{busBean.addBus()}" icon="ui-icon-plus" update=":form" ajax="false" title="add"/>
<p:commandButton actionListener="#{busBean.removeBus(bus)}" icon="ui-icon-minus" update=":form" ajax="false" title="remove"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":form:buss,:form:displayBus,:form:dialog" oncomplete="PF('singleBusDialog').show()"/>
</f:facet>
</p:dataTable>
<br/>
<p:dialog id="dialog" header="Bus Detail" widgetVar="singleBusDialog" resizable="false"
showEffect="fade" hideEffect="explode">
<h:panelGrid id="displayBus" columns="2" cellpadding="4">
<h:outputText value="Brand:" />
<h:outputText value="#{busBean.selectedBus.brand}" style="font-weight:bold"/>
<h:outputText value="Model:" />
<h:outputText value="#{busBean.selectedBus.model}"/>

<p:dialog> Primefaces Probleme?

I have created a complexe dataTable for my DiplomeBean and it shows Correctly
The deal is whene i select a row from the list ,nothing happend
I want whene i select a row it shows me the elements of the diplome.
My Bean
package com.beans;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import com.bo.DiplomeBo;
import com.converter.DiplomeDataModel;
import com.model.Collaborateur;
import com.model.Diplome;
public class DiplomeBean {
public Integer idDiplome;
public String ecole;
public String typeEcole;
public String typeDiplome;
public Integer promotion;
private Set<Collaborateur> collaborateurs = new HashSet<Collaborateur>(0);
public Diplome selectedDiplome;
public Diplome getSelectedDiplome() {
return selectedDiplome;
}
public void setSelectedDiplome(Diplome selectedDiplome) {
this.selectedDiplome = selectedDiplome;
}
public Integer getIdDiplome() {
return idDiplome;
}
public void setIdDiplome(Integer idDiplome) {
this.idDiplome = idDiplome;
}
private DiplomeBo diplomeBo;
public String getEcole() {
return ecole;
}
public void setEcole(String ecole) {
this.ecole = ecole;
}
public String getTypeEcole() {
return typeEcole;
}
public void setTypeEcole(String typeEcole) {
this.typeEcole = typeEcole;
}
public Integer getPromotion() {
return promotion;
}
public void setPromotion(Integer promotion) {
this.promotion = promotion;
}
public Set<Collaborateur> getCollaborateurs() {
return collaborateurs;
}
public void setCollaborateurs(Set<Collaborateur> collaborateurs) {
this.collaborateurs = collaborateurs;
}
public void setDiplomeBo(DiplomeBo diplomeBo) {
this.diplomeBo = diplomeBo;
}
public String getTypeDiplome() {
return typeDiplome;
}
public void setTypeDiplome(String typeDiplome) {
this.typeDiplome = typeDiplome;
}
public String AddDiplome(){
Diplome diplome =new Diplome();
diplome.setEcole(getEcole());
diplome.setPromotion(getPromotion());
diplome.setTypeDiplome(getTypeDiplome());
diplome.setTypeEcole(getTypeEcole());
diplomeBo.addDiplome(diplome);
clearForm();
return "Ajout Bien Fait !!";
}
public List<Diplome> getAllDiplome(){
return diplomeBo.findAllDiplome();
}
private void clearForm(){
this.setEcole("");
this.setPromotion(0);
this.setTypeEcole("Choisir type..");
this.setTypeEcole("Choisir type..");
}
}
My Page
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<f:view>
<h:outputLink value="Admin/default.xhtml">Go to your app</h:outputLink>
<h:form>
<p:dataTable value="#{diplome.getAllDiplome()}" var="d" paginator="true" rows="10" rowKey="diplome.idDiplome"
selection="#{diplome.selectedDiplome}" selectionMode="single"
onRowSelectUpdate="display" onRowSelectComplete="diplomeDialog.show()">
<f:facet name="header">
Diplome Liste
</f:facet>
<p:column sortBy="#{d.idDiplome}" filterBy="#{d.idDiplome}">
<f:facet name="header">
<h:outputText value="Model" />
</f:facet>
<h:outputText value="#{d.idDiplome}" />
</p:column>
<p:column sortBy="#{d.ecole}" filterBy="#{d.ecole}">
<f:facet name="header">
<h:outputText value="Ecole" />
</f:facet>
<h:outputText value="#{d.ecole}" />
</p:column>
</p:dataTable>
<p:dialog header="Diplome Detail" widgetVar="diplomeDialog" resizable="false"
width="200" showEffect="explode" hideEffect="explode">
<h:outputText value="id:" />
<h:outputText value="#{diplome.selectedDiplome.idDiplome}" />
<h:outputText value="Ecole:" />
<h:outputText value="#{diplome.selectedDiplome.ecole}" />
</p:dialog>
</h:form>
</f:view>
</body>
</html>
Thank's :)
Perhaps try modifying it slightly to be more like the Primefaces showcase example. For example, try something like this:
...
<h:form id="form">
...
<p:dataTable value="#{diplome.getAllDiplome()}" var="d" paginator="true" rows="10"
rowKey="diplome.idDiplome" selection="#{diplome.selectedDiplome}" selectionMode="single">
<p:ajax event="rowSelect" update=":form:display" oncomplete="PF('diplomeDialog').show()" />
...
</p:dataTable>
...
<p:dialog header="Diplome Detail" widgetVar="diplomeDialog" resizable="false"
width="200" showEffect="explode" hideEffect="explode">
<h:panelGrid id="display">
...
</h:panelGrid>
</p:dialog>
</h:form>
...
I can't test this right now, but it seems like it should work since it is essentially the same as the showcase's example.

Resources