I am trying to make an Editable DataTable by cell in Primefaces, but after an edit of a cell, the event not submitted and my code can't detect the newValue, and there is no error or log in the stack trace
here is my code:
xhtml:
<p:dataTable id="ListC"
value="#{recruitmentProcessMB.candidateListInProcess}"
var="candid" rowKey="#{candid.idCandidate}"
style="border:0px; " editable="true" editMode="cell">
<p:ajax event="cellEdit"
update="ListC"
listener="#{recruitmentProcessMB.onCellEdit}"
/>
<p:column headerText="Date d'entretien">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{candid.interviewDateCandidate}">
<f:convertDateTime type="date" dateStyle="short"
pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
</h:outputText>
</f:facet>
<f:facet name="input">
<p:calendar id="date"
value="#{candid.interviewDateCandidate}"
navigator="true" pattern="dd/MM/yyyy" mask="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column id="vRH" headerText="Validation Par RH " disabledSelection="#{candid.currentTask!='InterviewAndValidationByRH'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText
value="#{candid.decisionOfRh}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu id="rhDecision" style="display: inline-block;"
value="#{candid.decisionOfRh}"
disabled="#{candid.currentTask!='InterviewAndValidationByRH'}" >
<f:selectItem itemLabel="Selectionner..." />
<f:selectItem itemLabel="Accepté" itemValue="Accepté"/>
<f:selectItem itemLabel="Refusé" itemValue="Refusé"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Bean:
public void onCellEdit(CellEditEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
Candidate c = context.getApplication().evaluateExpressionGet(
context, "#{candid}", Candidate.class);
System.out.println("+++++++++++ "+c.getFirstNameCandidate()+" "+c.getNameCandidate());
System.out.println("*********** "+event.getNewValue().toString());
logger.info(c.getInterviewDateCandidate().toString());
}
try to add the attribute immediate="true" in the in the tag p:ajax and my bean method was called
<p:ajax event="cellEdit"
update="ListC"
immediate="true"
listener="#{recruitmentProcessMB.onCellEdit}"
process="#this"
/>
Related
I am using PrimeFaces editable p:dataTable
But When I select from selectCheckboxMenu I not call method event change not trigerred
<p:column headerText="Allowed Sec Action" style="width:250px">
<p:cellEditor>
<f:facet name="input">
<p:selectCheckboxMenu multiple="true" value="#{validation.detail.allowedSecAction}"
collectionType="java.util.ArrayList" >
<f:selectItems var="item" itemValue="#{item}"
itemLabel="#{item}"
value="#{emdValidationView.allowedSecActionList}" />
</p:selectCheckboxMenu>
</f:facet>
<f:facet name="output">
<p:selectCheckboxMenu multiple="true" value="#{validation.detail.allowedSecAction}"
collectionType="java.util.ArrayList">
<p:ajax event="change" update="#form"
listener="#{emdValidationView.handleChange()}" />
<f:selectItems var="item" itemValue="#{item}"
itemLabel="#{item}"
value="#{emdValidationView.allowedSecActionList}" />
</p:selectCheckboxMenu>
</f:facet>
</p:cellEditor>
</p:column>
I am having issue in firing an ajax call on the cellEdit event of a Data Table. The table shows up just fine on the UI but nothing happens when I click any of the cell.
xhtml
<h:form>
<p:dataTable id="decisionTree" var="tree"
value="#{treeBean.content}" editable="true" editMode="cell"
styleClass="smallGrid">
<f:facet name="header">
Notes Decision Tree
</f:facet>
<p:ajax event="cellEdit" listener="#{treeBean.onCellEdit}"
immediate="true" update=":#{p:component('notesTextArea')}" />
<p:column headerText="Comment Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.commentType}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.commentType}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="MTCNs">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.mtcns}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.mtcns}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Call Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.callType}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.callType}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Phone">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.phone}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.phone}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Dispute Reason">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.disputeReason}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.disputeReason}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Placement Decision">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{tree.placementDescision}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{tree.placementDescision}" disabled="true" />
</f:facet>
</p:cellEditor>
</p:column>
<!--
<p:column>
<p:rowEditor />
</p:column>
-->
</p:dataTable>
</h:form>
Here is the Bean.
#Component("treeBean")
#Scope(value = "view", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class TreeBean {
private List<TreeDto> content;
private String result="";
public List<TreeDto> getContent() {
return content;
}
public void setContent(List<TreeDto> content) {
this.content = content;
}
#PostConstruct
public void init() {
content=new ArrayList<TreeDto>();
TreeDto dto1=new TreeDto();
dto1.setCommentType("First Attempt");
dto1.setMtcns("mtcn1");
dto1.setCallType("OBC");
dto1.setPhone("8975730838");
dto1.setDisputeReason("Fraud");
dto1.setPlacementDescision("Write Off");
content.add(dto1);
}
public void onCellEdit(CellEditEvent event) {
RequestContext.getCurrentInstance().showMessageInDialog(new FacesMessage(FacesMessage.SEVERITY_INFO, "Status","something clicked"));
}
}
My intention to capture the value of the cells clicked. But I am not able to get an event fired in the first place on cell edit. Please give me some suggestions on how to resolve this.
Try to add a widgetVar to your dataTable and then edit your cell with a contextMenu for your data table, which call onclick="PF('yourWidgetVar').showCellEditor();return false;"
Somenthing like this
<p:contextMenu for="decisionTree" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="ui-icon-search" onclick="PF('yourWidgetVar').showCellEditor();return false;"/>
<p:menuitem value="Hide Menu" icon="ui-icon-close" onclick="PF('cMenu').hide()"/>
</p:contextMenu>
You can take a look to Primefaces documentation too:
https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
I have the following code
<p:ajax id="rowEditInit" event="rowEditInit"
listener="#{assignIssueController.onEditInit}" />
<p:commandLink id="linkId" action="#{assignIssueController.initMethod}" >
<p:rowEditor>
</p:rowEditor>
</p:commandLink>
This is part of my editable datatable is there any way I can call my ajax event "rowEditInit" after commadlink is called?
Following is my Datatable
<h:form id="formId">
<p:dataTable id="dTable" var="il"
value="#{assignIssueController.issueList}" editable="true"
style="margin-bottom:20px">
<f:facet name="header">
Assign Issues
</f:facet>
<p:ajax event="rowEdit"
listener="#{assignIssueController.onRowEdit}" />
<p:ajax event="rowEditCancel"
listener="#{assignIssueController.onRowCancel}" />
<p:ajax id="rowEditInit" event="rowEditInit"
listener="#{assignIssueController.onEditInit}" />
<p:column headerText="Issue Number">
<h:outputText value="#{il.issueNumber}" />
</p:column>
<p:column headerText="Issue Discribtion">
<h:outputText value="#{il.issueDescribtion}" />
</p:column>
<p:column headerText="Assign To">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{il.assignToUserId}" id="userId" />
</f:facet>
<f:facet name="input">
<p:autoComplete id="assignUserId" multiple="true"
value="#{assignIssueController.selectedUserList}"
completeMethod="#{assignIssueController.complete}" var="usr"
itemLabel="#{usr.userId}" itemValue="#{usr}"
converter="#{userConverter}">
</p:autoComplete>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Updated By">
<h:outputText value="#{il.updatedByUserId}" />
</p:column>
<p:column headerText="Issue Type">
<h:outputText value="#{il.issueStatus}" />
</p:column>
<p:column style="display: none">
<f:facet name="output">
<h:outputText value="#{il.issueType}" />
</f:facet>
</p:column>
<p:column style="width:32px">
<p:commandLink id="linkId" action="#{assignIssueController.initMethod}">
<p:rowEditor>
</p:rowEditor>
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
And here are the methods that are called by ajax events
public void onEditInit(RowEditEvent event) {
System.out.println(event.getObject());
AssignIssueList obj = (AssignIssueList) event.getObject();
issueName = obj.getIssueNumber();
System.out.println(obj.getAssignToUserId().toString());
selectedUserList = usersBo.getUserNameList(obj.getAssignToUserId().toString());
}
public void initMethod() {
System.out.println("Hello world");
}
My web app is built on the Spring boot + JSF and Primefaces.
To update my dataTable I am using roweditor primefaces element.
Here is my dataTable:
<p:dataTable id="table" var="categoryLevel"
value="#{cardCategoryLevelController.categoryLevels}"
editable="true">
<p:ajax event="rowEdit"
listener="#{cardCategoryLevelController.onRowEdit}"
update=":categoryLevelForm:msgs" />
<p:ajax event="rowEditCancel"
listener="#{cardCategoryLevelController.onRowCancel}"
update=":categoryLevelForm:msgs" />
<p:column headerText="Id">
<h:outputText value="#{categoryLevel.id}" />
</p:column>
<p:column headerText="Category Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{categoryLevel.cardCategory.name}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu id="category"
value="#{categoryLevel.cardCategory}"
style="width:125px">
<f:selectItems value="#{cardCategoryLevelController.categories}"
var="category" itemLabel="#{category.name}"
itemValue="#{category}" />
<f:converter binding="#{categoryConverter}"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Level Name">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{categoryLevel.level.name}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu id="level"
value="#{categoryLevel.level}"
style="width:125px">
<f:selectItems value="#{cardCategoryLevelController.levels}"
var="level" itemLabel="#{level.name}" itemValue="#{level}" />
<f:converter binding="#{levelConverter}"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Card Drop Rate">
<h:outputText value="#{categoryLevel.cardDropRate}" />
</p:column>
<p:column headerText="Created Date">
<h:outputText value="#{categoryLevel.createdDate}">
<f:convertDateTime type="time" pattern="MM-dd-yyyy HH:mm:ss" />
</h:outputText>
</p:column>
<p:column headerText="Updated Date">
<h:outputText value="#{categoryLevel.updatedDate}">
<f:convertDateTime type="time" pattern="MM-dd-yyyy HH:mm:ss" />
</h:outputText>
</p:column>
<p:column headerText="Actions">
<p:rowEditor style="float:left; padding:5px;"/>
<p:commandButton styleClass="no-btn" icon="ui-icon-trash"
rendered="#{not empty categoryLevel}"
action="#{cardCategoryLevelController.delete(categoryLevel.id)}"
update="table">
<p:confirm header="Confirmation"
message="Are you sure you want to delete this card category level"
icon="ui-icon-alert" />
</p:commandButton>
</p:column>
</p:dataTable>
And roweditor method:
public void onRowEdit(RowEditEvent event) {
CardCategoryLevel cardCategoryLevel = (CardCategoryLevel) event.getObject();
cardCategoryLevel = cardCategoryLevelService.update(cardCategoryLevel);
if (cardCategoryLevel != null) {
FacesMessage msg = new FacesMessage("Card Category Level Edited", cardCategoryLevel.getId().toString());
FacesContext.getCurrentInstance().addMessage(null, msg);
} else {
FacesMessage msg = new FacesMessage("Such card category level already exists");
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
The problem is when I edit some dataTable row, and the update on the my db was not performed successfully, wrong values (instead of old ones) are displayed on the updated row.
How can I solved that?
Nice work around is to implement custom validator, which is called before back end logic. In case validation failed, the data table row becomes red, and appropriate message is displayed.
I have a datatable includes some cell for edit, and these cells are disabled in specific conditions and after an other cell edition will be enabled.
My problem is after the edit, the new data stored in the database but the datatable not updated directly, it will be updated after reloading the page.
All what I want is how can I make the hole datatable updated after the edit or making the page reloaded
and here is my code:
<h:form id="process">
<p:remoteCommand name="onCellEdit" update=":process:ListC" />
<p:dataTable id="ListC"
value="#{recruitmentProcessMB.candidateListInProcess}"
var="candid" rowKey="#{candid.idCandidate}"
style="border:0px; " paginator="true"
paginatorTemplate="{PreviousPageLink} {NextPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="3,5,10" paginatorPosition="top"
rows="10" editable="true" editMode="cell">
<f:facet name="footer" >
<h:outputLabel value="Valider processus pour le Manager:" style="display: inline-block;"/>
<h:selectOneMenu id="managersInProcess" style="display: inline-block;"
value="#{recruitmentProcessMB.selectedManagerInProcess}">
<f:selectItem itemLabel="Selectionner..." itemValue="#{null}"/>
<f:selectItems value="#{recruitmentProcessMB.managersInProcess}" />
</h:selectOneMenu>
<h:outputText value=" " />
<h:outputText value=" " />
<h:outputText value=" " />
<h:outputText value=" " />
<h:outputText value=" " />
<p:commandButton icon="ui-icon-seek-next"
value="Valider le processus"
ajax="true"
style="display: inline-block;"
disabled="false"></p:commandButton>
</f:facet>
<p:ajax event="cellEdit"
update=":process:ListC"
immediate="true"
listener="#{recruitmentProcessMB.onCellEdit}"
process="#this"
oncomplete="onCellEdit()"
/>
<p:column headerText="Prenom">
<h:outputText value="#{candid.firstNameCandidate}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{candid.nameCandidate}" />
</p:column>
<p:column headerText="Specialité">
<h:outputText value="#{candid.specialityCandidate}" />
</p:column>
<p:column headerText="Niveau d'etude">
<h:outputText value="#{candid.levelStudyCandidate}" />
</p:column>
<p:column headerText="CV" style="text-align: center ;width:30px;">
<p:commandButton icon="ui-icon-arrowthickstop-1-s"
ajax="false"
actionListener="#{recruitmentProcessMB.downloadAction(candid.cvCandidate,candidate.nameCandidate,candidate.firstNameCandidate)}">
<p:fileDownload
value="#{recruitmentProcessMB.downloadContentProperty}" />
</p:commandButton>
</p:column>
<p:column headerText="Manager" style="position:center;">
<h:outputText
value="#{candid.employee.firstNameEmployee} #{candid.employee.nameEmployee}" />
</p:column>
<p:column headerText="Date d'entretien">
<p:cellEditor id="c1">
<f:facet name="output">
<h:outputText value="#{candid.interviewDateCandidate}">
<f:convertDateTime type="date" dateStyle="short"
pattern="dd/MM/yyyy" timeZone="Europe/Paris" />
</h:outputText>
</f:facet>
<f:facet name="input" >
<p:calendar id="dateInterview"
value="#{candid.interviewDateCandidate}"
navigator="true" pattern="dd/MM/yyyy" mask="true" immediate="true" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Validation Par Manager " >
<p:cellEditor id="c2">
<f:facet name="output" >
<h:outputText
value="#{candid.decisionOfManager}" />
</f:facet>
<f:facet name="input" >
<h:selectOneMenu id="manegerDecision" style="display: inline-block;"
value="#{candid.decisionOfManager}"
disabled="#{candid.currentTask!='InterviewAndValidationByManager'}"
immediate="true">
<f:selectItem itemLabel="Selectionner..." />
<f:selectItem itemLabel="Accepté" itemValue="Accepté"/>
<f:selectItem itemLabel="Refusé" itemValue="Refusé"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Validation Par RH " >
<p:cellEditor id="c3" >
<f:facet name="output">
<h:outputText
value="#{candid.decisionOfRh}" />
</f:facet>
<f:facet name="input">
<h:selectOneMenu id="rhDecision" style="display: inline-block;"
value="#{candid.decisionOfRh}"
disabled="#{candid.currentTask!='InterviewAndValidationByRH'}"
immediate="true">
<f:selectItem itemLabel="Selectionner..." />
<f:selectItem itemLabel="Accepté" itemValue="Accepté"/>
<f:selectItem itemLabel="Refusé" itemValue="Refusé"/>
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>