I have a <p:dataTable > which is updated from a button and is also filled. The data is displayed correctly. But the PROBLEM is that when I click/select any row, NO RESPONSE; previously while being clicked, the row was highlighted, now-> no highlight. I have done this type of design many times but this time the <p:dataTable> is behaving weirdly. I cannot find the root of problem.
My XHTML snippet for table is :
<p:dataTable id="tblSales" rowIndexVar="rowsn"
paginator="true" value="#{invSaleMB.dummyList}"
var="saleObj" selectionMode="single"
selection="#{invSaleMB.dummySaleObj}"
rowKey="#{saleObj.item.itemTypeId}">
<p:column headerText="#">
<h:outputLabel value="#{rowsn+1}" />
</p:column>
<p:column headerText="Name">
<h:outputLabel value="#{saleObj.item.itemTypeName}" />
</p:column>
<p:column headerText="Count">
<h:outputLabel value="#{saleObj.count}" />
</p:column>
<p:column headerText="Unit Price">
<h:outputLabel value="#{saleObj.unitPrice}" />
</p:column>
<p:column headerText="Total Price">
<h:outputLabel value="#{saleObj.total}" />
</p:column>
</p:dataTable>
My backing bean is #ViewScoped.
And another component which is not responding to an update trigger is <pe:inputNumber> and value for this component is 'double'. I changed the <pe:inputNumber> to <p:inputText> and worked well and displayed accurate data.
<pe:inputNumber id="totalCost" disabled="true" value="#{invSaleMB.totCost}" />
The datatable and pe:inputNumber are on same form.
What have you changed between "before" (was working) and "now" (not working)?. You are sure "#{saleObj.item.itemTypeId}" is unique for each element of the table? More code of the page could be useful.
For pe:inputNumber to work remember to include xmlns:pe="http://primefaces.org/ui/extensions" in your html tag.
Related
In a Primefaces <p:dataTable>, on each row, I have a column containing a commandButton.
This commandButton update a value of the bean corresponding to the current row.
How to refresh the current row where I have just clicked so that the reader column will refresh?
<p:dataTable id="repositoryBean"
currentPageReportTemplate="Total : {totalRecords}"
lazy="true"
resizableColumns="false"
rows="200"
rowsPerPageTemplate="10,15,20"
sortBy="#{row.name}"
sortOrder="ascending"
style="margin:20px 0px;"
value="#{repositoryBean.users}"
var="row"
styleClass="small-datatable"
editable="true"
>
<p:ajax event="rowSelect" listener="#{repositoryBean.onDisplay}"
onstart="PF('loading').show()"
/>
<p:column headerText="#{label.cvs_repo_user_firstname}" sortBy="#{row.firstname}" sortOrder="ascending">
<h:outputText value="#{row.firstname}" />
</p:column>
<p:column headerText="#{label.cvs_repo_user_is_reader}" sortBy="#{row.reader}" sortOrder="ascending">
<h:outputText value="#{row.reader}" />
</p:column>
<p:column headerText="#{label.cvs_repo_user_action}" style="text-align:center" >
<p:commandButton
value="Reader"
styleClass="btn-off"
action="#{repositoryBean.onSetReader(row)}"
/>
</p:column>
</p:dataTable>
Use the Omnifaces utility library for this. It has 'Ajax' functionality to update rows of a datatable and even has a specific PrimeFaces example.
It works like:
Ajax.updateRow(table, index);
where table is the reference to the component (not id!, but via binding) and index is the row index.
I have a problem with primefaces datatables. I have one datatable with some entries and a column with a button inside. If the button is pressed a popup is opened with another datatable. The entries in the second datatable are depending on the row in which the button is pressed.
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Entries" widgetVar="edit_entries" modal="true"
resizable="false">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</p:dialog>
</form>
Bean2
public void updateEntries(Item selectedItem) {
this.entriesList = this.entriesQuery.getAllEntriesByItemID(selectedItem.getId());//db query could take some time
System.out.println("entrieslist size: " + this.entriesList.size()); //prints the correct size
}
The problem is that there are no entries listed in the popup datatable although there are some in the list after the db query.
Any ideas how to fix this bug?
Thanks in advance!
UPDATE 1:
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries" update=":dialogUpdateEntries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
</h:form>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Enries" id="dialogUpdateEntries" widgetVar="edit_entries" modal="true"
resizable="false">
<h:form id="formEntriesList">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</form>
</p:dialog>
You're indeed not updating the data table in the dialog. JSF doesn't automatically update the view on change of the model, you have to explicitly tell the view to do so. You can use the ajax action component's update attribute for this. This takes a JSF client ID which can be found by rules as outlined in this related answer: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar".
Given the markup as shown in the question, that'll be
<p:commandButton ... update=":list:list2" />
However, there's another potential problem. You're using <p:dialog modal="true"> inside a form instead of giving the dialog its own form. This way the dialog may not be available in the HTML DOM tree as JavaScript (the one responsible for dealing with ajax stuff) would expect to find it. Giving the dialog its own form should fix this matter. It'll also fix the potential future problems with invoking actions from inside the dialog as handled in this related question: <p:commandbutton> action doesn't work inside <p:dialog>.
<h:form id="viewForm">
...
<p:commandButton ... update=":editDialog" />
...
</h:form>
<p:dialog id="editDialog" modal="true">
<h:form id="editForm">
...
</h:form>
</p:dialog>
Try adding update="list2" to Edit Entries command button (even update="#widgetVar(edit_entries)" should work).
If, because of page layout and structure, you can't target the second datatable using above suggestions, then add styleClass="tList2" to second table, and update it with update="#(.tList2)" on edit button.
I have a PrimeFaces p:dataTable with one column of type p:cellEditor with an p:inputText field.
This inputText is supposed to be required but if I set required="true" and leave the input empty nothing happens / no message is shown. The form including the above is submitted anyway.
Here's my code, especially the <p:column headerText="Data Value"> part:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="rowReorder" update="#form"/>
<p:column headerText="Order Position">
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Data Name">
<h:outputText value="#{dataItem.name}" />
</p:column>
<p:column headerText="Data Value">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{dataItem.value}" /></f:facet>
<f:facet name="input"><p:inputText required="true" requiredMessage="Please insert a value" id="valueInput" value="#{dataItem.value}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<div>
<h:commandLink action="#{backingBean.submit()}">Submit</h:commandLink>
</div>
<h:messages id="validateMsg" />
</h:form>
The submitting h:commandLink is not an ajax call. But in my opinion it shouldn't submit the form anyway as long as the required p:inputText fields are empty.
I also tried using h:inputText instead of p:inputText with the same result.
I tried to add a required h:inputText outside the p:dataTable which works as expected and prevents the form from being submitted as long as it is empty.
Any ideas about how I get a required p:inputText field in p:cellEdit ?
According to rion18's suggestion. I'm checking in my backing bean if all values are set. Only if all values are set the submit button is shown. Here's how I ended up doing this:
<h:form id="my-form">
<p:dataTable var="dataItem" rowIndexVar="rowIndex" value="#{backingBean.dataList}" draggableRows="true" editable="true" editMode="cell">
<p:ajax event="cellEdit" update=":#{p:component('submit-button-group')}" />
<p:column>
...
</p:column>
</p:dataTable>
<div>
<h:panelGroup id="submit-button-group">
<h:commandLink action="#{backingBean.submit()}" rendered="#{backingBean.isAllValuesSet()}">Submit</h:commandLink>
</h:panelGroup>
</div>
</h:form>
In my backing bean I have a simple function that iterates over the dataList:
public boolean isAllValuesSet(){
for(DataItem item:dataItems){
if(item.getValue()==null || item.getValue().isEmpty()){
return false;
}
}
return true;
}
I am working on a xhtml file that has inputtexts, commandlinks and data table. Part of the content of the file would be something like this:
<div>
<h:inputText value="#{MyBean.inputval}" />
<p:commandLink value="Button A" action="#{MyBean.actionA}" />
<p:commandLink value="Button B" action="#{MyBean.actionB}" />
</div>
<p:dataTable value="#{MyBean.dataList}" var="data">
<p:columnGroup type="header">
<p:row>
<p:column headerText="headerA" selectionMode="multiple" rowspan="2" />
<p:column headerText="headerB" />
</p:row>
<p:row>
<p:column headerText="headerB2" />
</p:row>
</p:columnGroup>
// This column is the source of the problem
<p:column selectionMode="multiple" />
<p:column><h:outputText value="#{data.get('hb')}" /><br/>
<h:outputText value="#{data.get('hb2')}" />
</p:column>
</p:dataTable>
The above works fine if I remove the selectionMode="multiple" on the part of the dataTable, I have pointed out via a comment. The issue is none of my commandlinks work. I get no errors whatsoever, nothing just happens.
However, if I removed the selectionMode="multiple", all of my commandlinks work but the checkbox on the table header that will select all checkboxes is disabled.
My question is how can I make both work? What am I doing wrong? Please help
Your p:column in the header cant have a headerText because this is a special primefaces function. You want to check the header checkbox for all subrows be selected. just adpot the same style as used in the showcase.
I have a requirement where I want the user to move the datatable rows up and down.I thought Context Menu would come handy as there would be a Move up and Move down menu item .For this I tried implementing the context Menu for datatable example from Primefaces Showcase. However I am not getting the selected values from the datatable rows to be displayed on the dialog.
Please find the below code:
<p:contextMenu for="availableCars">
<p:menuitem value="View" update="display" icon="ui-icon-search" oncomplete="carDialog.show()"/>
</p:contextMenu>
<p:dataTable id="availableCars" var="car" value="#{RequestBean.formFields}" rowKey="#{car.car_group}" selectionMode="single" selection="#{RequestBean.selectedField}">
<p:column headerText="Field Label">
<h:outputText value="#{car.car_label}" />
</p:column>
<p:column headerText="Field Group">
<h:outputText value="#{car.car_group}" />
</p:column>
<p:column headerText="Field Name">
<h:outputText value="#{car.car_name}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold" id="dialog">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Car label:" />
<h:outputText value="#{RequestBean.selectedField.car_label}" style="font-weight:bold"/>
<h:outputText value="car Group" />
<h:outputText value="#{RequestBean.selectedField.car_group}" style="font-weight:bold"/>
<h:outputText value="Car Name:" />
<h:outputText value="#{RequestBean.selectedField.car_name}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
Any help would be appreciated.
N.B: I am using PF 2.2.1
It looks like the selection doesn't get sent using ajax - you need to set the onRowSelectUpdate attribute on the data table.
From Primefaces documentation:
In both single and multiple selection options described before, enclosing form needs to be submitted
by user so that the selections would be processed and set to the selection value reference. If you’d
like to execute custom logic whenever the row is selected instantly bind a rowSelectListeneror or define onRowSelectUpdate option.