Primefaces DataTable cellEdit required inputText not evaluated - jsf

can someone explain why following minimal example won't evaluate the required element? Or is it the "wrong" way and there is a better one I don't know.
I'm aware that my question is similiar to this question: Primefaces cellEditor required inputText. For me it seems that the solution is more of a workaround than a valid way to cope with this problem. So yeah any ideas how to deal with this?
Code:
<p:dataTable id="ruleTableID" var="rule" value="#{rC.rules}" widgetVar="rowsTable"
rows="20" editable="#{rC.editable}"
editMode="cell" paginator="true"
paginatorPosition="bottom" paginatorTemplate="{Save}"
emptyMessage="#{t['rule.empty']}">
<p:ajax event="cellEdit" update=":newRules:messages, :newRules:" />
<p:column headerText="#{t['policy.registerNumber']}">
<p:cellEditor>
<f:facet name="input">
<p:inputText styleClass="ruleInputText" value="#{rule.registerNr}" required="true" maxlength="4">
<f:validateLength minimum="4" />
<f:validateRegex pattern="([A-Z\d]{4})" />
<p:clientValidator/>
</p:inputText>
</f:facet>
<f:facet name="output">
<h:outputText value="#{rule.registerNr}" />
</f:facet>
</p:cellEditor>
</p:column>
<f:facet name="{Save}">
<p:commandButton id="saveButton" value="#{t['button.save']}" action="#{rC.saveRules}" update=":newRules" rendered="#{rC.isAllValueSet}" />
</f:facet>
</p:dataTable>

If you are using client side validation you have to add the attributes ajax="false" and validateClient="true" to your commandButton
You can see a example here:
http://www.primefaces.org/showcase/ui/csv/event.xhtml

Related

SummaryRow in p:dataTable not working

I am trying to show a total value on my dataTable, my code is similar to the primefaces showcase DataTable - SummaryRow and still not working.
<p:dataTable id="dtCaixa" var="list" value="#{caixaMB.list}" paginator="true" rows="7"
paginatorPosition="bottom" rowsPerPageTemplate="10,15,20" liveScroll="true"
paginatorAlwaysVisible="false" emptyMessage="Nenhuma entrada!" liveResize="true">
<p:column headerText="Nome" sortBy="#{list.produtoFK.nome}" style="width:15%;">
<h:outputText value="#{list.produtoFK.nome}" />
</p:column>
<p:column headerText="Funcionário" sortBy="#{list.funcionarioFK.nome}">
<h:outputText value="#{list.funcionarioFK.nome}" />
</p:column>
<p:column headerText="Quantidade" sortBy="#{list.quantidade}">
<h:outputText value="#{list.quantidade}" />
</p:column>
<p:column headerText="Preço" >
<h:outputText value="#{list.produtoFK.preco}" rendered="#{not empty list.produtoFK}">
<f:convertNumber pattern="R$ #0.00" locale="pt_BR"/>
</h:outputText>
</p:column>
<p:column headerText="Total" sortBy="#{list.total}" >
<h:outputText value="#{list.total}" >
<f:convertNumber pattern="R$ #0.00" locale="pt_BR"/>
</h:outputText>
</p:column>
<p:column headerText="Remover" class="centered">
<p:commandButton icon="ui-icon-trash" title="excluir" onclick="PF('confirmaExclusao').show();">
<f:setPropertyActionListener target="#{caixaMB.itemSelecionado}" value="#{list}" />
</p:commandButton>
</p:column>
<p:summaryRow>
<p:column colspan="3" style="text-align:right">
<h:outputText value="Total:" />
</p:column>
<p:column>
<h:outputText value="#{caixaMB.total}">
</h:outputText>
</p:column>
</p:summaryRow>
</p:dataTable>
Does anybody have any idea why is this happening?
You need to sort the dataTable using at least one column if you want to use summaryRow. Check the Primefaces documentation.
E.g. put the attribute sortBy="#{myList.myOrderValue}" on the <p:datatable> tag.
I think what you're trying to achieve is the overall total of the column showing up at the bottom. I was caught out by the summaryRow function too, until I realised it was a grouping function and not a totalling summary. What I did you get around this was for the last column I added some footerText. You will have to calculate your totals manually (iterate over your dataset etc), then you can use something like:
<p:column style="text-align: right" footerText="$ #{invoicesbean.total}">
<f:facet name="header">
<h:outputText value="Amount" />
</f:facet>
........ etc
This worked well for me but YMMV!

Insert textbox in datatable but having difficulty to save all the records

Hi i am adding a textbox in a datatable where the user will input data in each row. I need help on how to save the data...because right now it's saving only the last row. Please see code below, can someone help on this? I think there should be some sort of array but i dont know if it is possible to store value in array using el expression. I implemented a nested datatable since i want the data to be side by side. If you have a better idea other than using datatable , I would be glad if you could share it and give proper instruction on how to proceed. ( but it should be side by side)
Thanks in advance
<p:dataTable id="dta" value="#{MyCarComponent.model}" var="cur" rows="15" >
<p:column>
<f:facet name="header">
<h:outputText value="Model:" />
</f:facet>
<h:outputText value="#{current.cptModel}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Type:" />
</f:facet>
<p:dataTable id="dta1" value="#{cur.type}" var="curType" rows="15" >
<p:column>
<h:outputText value="#{curType.cptType}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Origin:" />
</f:facet>
<h:form>
<p:dataTable id="dta3" value="#{curType.origins}" var="curOrigin" rows="15" >
<p:column>
<h:outputText value="#{curOrigin.origin}" />
</p:column>
<p:column>
<h:inputText
value="#{MyCarComponent.origindetails.country}"/>
</p:column>
</p:dataTable>
</h:form>
</p:column>
</p:dataTable>
</p:column>
<f:facet name="footer">
<p:commandButton image="save" ajax="false" value="Save" action=" #. {Mycar.saveMyCar(curOrigin.origin,MyCarComponent.origindetails)}" />
</f:facet>
You're currently binding the input field of all rows to one and same bean property. So when JSF processes the form submit in the same sequence as the component tree, the value of each input field will be set in this one and same property. Of course the property will end up being the one of the last row.
You just need to bind the value of the input field to the currently iterated row, the #{curOrigin}. E.g.
<h:inputText value="#{curOrigin.country}" />
Just create the property of there if it doesn't exist yet.

Primefaces filter datatable

Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>
It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.
You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.

onclick client event handler in <p:commandButton> causes resubmit of page

I have strange problem with following code:-
<p:dataTable id="dataTbl_mnuItmList_id" rows="5"
paginator="true" paginatorPosition="top"
value="#{addMenuItemMB.menuItemList}" var="menuItem"
style="width:100%; height:100%">
<p:column headerText="Item Name" sortBy="itemName">
<h:outputText value="#{menuItem.itemName}" />
</p:column>
<p:column headerText="Created Date" sortBy="createdDate">
<h:outputText value="#{menuItem.createdDate}">
</h:outputText>
</p:column>
<p:column headerText="Modified Date" sortBy="modifiedDate">
<h:outputText value="#{menuItem.modifiedDate}" />
</p:column>
<p:column>
<p:commandButton id="cmdBtn_edit"
onclick="widVar_menuItem.unselectAllRows()"
update=":frm_addMnuItm_dlg:outPutPnl_addMnuItmDlg_id"
oncomplete="PF('dlg_addMnuItem_widVar').show()"
icon="ui-icon-pencil" title="Edit" value="Edit">
<f:setPropertyActionListener value="#{menuItem}"
target="#{addMenuItemMB.menuItemToEdit}" />
</p:commandButton>
</p:column>
</p:dataTable>
Following is the dataTable having widgetVar="widVar_menuItem"
<p:dataTable id="dataTbl_menuItem_id" rows="5"
paginator="true" paginatorPosition="top"
widgetVar="widVar_menuItem" editable="true" editMode="cell"
value="#{addMenuItemMB.mnuItmSpecDtlListModel}"
var="mnuItmSpecDtl" rowKey="#{mnuItmSpecDtl.id}"
selection="#{addMenuItemMB.selectedLabels}">
<f:facet name="header">
<p:outputLabel value="Specification Label" />
</f:facet>
<p:column selectionMode="multiple"
style="width:2%; display:none;" />
<p:ajax event="toggleSelect"
listener="#{addMenuItemMB.onToggleSelect}" />
<p:ajax event="cellEdit"
listener="#{addMenuItemMB.onCellEdit}" />
<p:column headerText="Label" style="width:31%">
<h:outputText value="#{mnuItmSpecDtl.labelName}" />
</p:column>
<p:column headerText="Price" style="width:25%">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{mnuItmSpecDtl.price}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{mnuItmSpecDtl.price}"
style="width:50px" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Above code Having command button in datatable column which has the property f:setPropertyActionListener it is working fine. But when I added onclick client event handler the page get submitted and when I remove onclick attribute from command button it is working fine as expected. So my question is what is wrong with above code, or What I realized (it may be wrong) client side event handler are not property working with f:setPropertyActionListener attribute.
Please suggest me proper solution.
Thanks.

JSF Primefaces datatable match mode for global filter (not individual column)

What is the filter match mode for global filter (not the individual column filter which defaults to 'startsWith') and how to change it?
The reason I ask is, when I use the global filter with match mode set to 'startsWith' in all my columns, still I get values with 'contains' filter mode. See screenshot below.
I shouldn't be getting the rows other than the first row as I specified 'startsWith' in all columns.
Here is my datatable,
<h:form id="countryTable">
<p:dataTable rowKey="" value="#{countryBean.countriesList}"
var="country" selection="#{countryBean.selectedCountries}"
styleClass="data-table-style" widgetVar="countryTableWVar"
filteredValue="#{countryBean.filteredCountries}">
<f:facet name="header">
<div class="align-left">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="countryTableWVar.filter();"
style="width:150px" />
</p:outputPanel>
</div>
</f:facet>
<p:column selectionMode="multiple" style="width:2%;" />
<p:column headerText="Numeric Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="numericCode">
<h:outputText value="#{country.numericCode}"></h:outputText>
</p:column>
<p:column headerText="Alpha_2 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha2">
<h:outputText value="#{country.alpha2}"></h:outputText>
</p:column>
<p:column headerText="Alpha_3 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha3">
<h:outputText value="#{country.alpha3}"></h:outputText>
</p:column>
<p:column headerText="Name" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="name">
<h:outputText value="#{country.name}"></h:outputText>
</p:column>
</p:dataTable>
</h:form>
How to change the datatable global filter match mode?
If you look at the source code of primefaces
org.primefaces.component.datatable.feature.FilterFeature.java
At line 133 you can see primefaces uses contains method of String
if(columnValue.toLowerCase(filterLocale).contains(globalFilter)){
globalMatch = true;
}
So for now there is no way other than changing code according to your needs and building your own primefaces jar.
From Primefaces 4.0 docs:
Filter located at header is a global one applying on all fields, this is implemented by calling client
side API method called filter(), important part is to specify the id of the input text as globalFilter
which is a reserved identifier for datatable.
The use case would be:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="model" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="year" headerText="Year" footerText="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="manufacturer" headerText="Manufacturer"
filterOptions="#{carBean.manufacturerOptions}" filterMatchMode="exact">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column filterBy="color" headerText="Color" filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
It doesn't tell anything about startsWithor endsWith specific cases for global filter. It could be interesting to open a thread on the issue tracker.

Resources