I need explanation for the below value binding in the outputText inside p:dialog .I dont clear with that and is there any other way.
In my sample :
I have tried ,if i select the single or many check box the value get binded but when I click root check box which used for selecting all the check boxes, its getting selected but the values not get stored in the back end.
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
<f:facet name="footer">
<p:commandButton process="checkboxDT"
update=":form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
</f:facet>
</p:dataTable>
<p:dialog header="Selected Cars"
widgetVar="multiCarDialog"
modal="true"
showEffect="fade"
hideEffect="fade"
resizable="false"
width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}"
var="car">
<h:outputText value="#{car.id} - #{car.brand}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
You should update checkboxDT because update is used to determines id’s of components to be updated (refreshed with updated values from server). If you do not update checkboxDT, the selectedCars do not update too.
<p:commandButton process="checkboxDT"
update="checkboxDT,:form:multiCarDetail"
icon="ui-icon-search"
value="View"
oncomplete="PF('multiCarDialog').show()" />
Related
I am trying to capture the value of cell in a data table each time the user clicks it and update the same in a textbox. I referred this primefaces showcase url: https://www.primefaces.org/showcase/ui/data/datatable/edit.xhtml
CellEdit event doesn't work for me as I do not want the user to edit the cell and hence have disabled the input text box for the cell.
As there is no event for cell select, how can I make it work using javscript/jquery or anything.
<h:form id="form">
<p:dataTable id="cars2" var="car" value="#{dtEditView.cars2}"
editable="true" editMode="cell" widgetVar="cellCars">
<f:facet name="header">
Cell Editing with Click and RightClick
</f:facet>
<p:ajax event="cellEdit" listener="#{dtEditView.onCellEdit}" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{car.id}" disabled="true"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{car.year}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{car.year}" disabled="true"
style="width:96%" label="Year" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:contextMenu for="cars2" widgetVar="cMenu">
<p:menuitem value="Edit Cell" icon="ui-icon-search"
onclick="PF('cellCars').showCellEditor();return false;" />
<p:menuitem value="Hide Menu" icon="ui-icon-close"
onclick="PF('cMenu').hide()" />
</p:contextMenu>
</h:form>
This is where I want the cell values to get updated as soon as the user clicks on any cell. This textarea is present in the same form as the data table.
<p:panel style="width:56%;height:56%;">
<p:inputTextarea id="notesTextArea" value="#{tree.result}"/>
</p:inputTextarea>
</p:panel>
Please help.
I try to export some data loded from database.
With the code below, the exported file shows empty values in all columns althought my variable marchebean.selectedmarche.marchetraveau contains values.
Is there anything wrong in my code ?
I'm using Primefaces 4.0 and this is my xhtml page
<h:form id="form">
<p:tabView>
<p:tab title="Visualiser ">
<p:panel>
<h:commandLink >
<p:commandButton value="exporter" />
<p:dataExporter type="xls" target="crs" fileName="prixde" pageOnly="true" />
</h:commandLink>
<p:dataTable id="crs" var="marche" value="#{marchebean.selectedmarche.marchetraveau}" >
<f:facet name="header">
Tbaleau des travaux
</f:facet>
<f:facet name="footer">
<h3> Total HTVA = #{marchebean.calculdetotaltravhtva()}</h3>
<h3> Total TTC = #{marchebean.calculdetotaltravttc()} </h3>
</f:facet>
<p:column headerText="article" width="10%" >
<h:outputText value="#{marche.traveaux.article}"/>
</p:column>
<p:column headerText="Désignation des traveaux" width="40%" >
<h:outputText value="#{marche.traveaux.designation}"/>
<h:outputText value="#{marche.traveaux.paragraph}"/>
</p:column>
<p:column headerText="Unité">
<h:outputText value="#{marche.traveaux.unite}"/>
</p:column>
<p:column headerText="PUHTVA">
<h:outputText value="#{marche.prixunitaire}"/>
</p:column>
<p:column headerText="PUTTC">
<h:outputText value="#{marchebean.calcultva(marche.prixunitaire)}" />
</p:column>
<p:column headerText="Qtt">
<h:outputText value="#{marche.quantite}"/>
</p:column>
<p:column headerText="MHTVA">
<h:outputText value="#{marchebean.calculmonthtva(marche.prixunitaire ,marche.quantite)}" />
</p:column>
<p:column headerText="MTTC">
<h:outputText value="#{marchebean.calculmontttc(marche.prixunitaire ,marche.quantite)}" />
</p:column>
</p:dataTable>
</p:panel>
</p:tab>
</p:tabView>
</h:form>
we need to provide the
<f:facet name="header>
<h:outputText value="aricle"/>
</f:facet>
then exporter will add the headers to your exported document.
<p:column headerText="article" width="10%" >
<f:facet name="header">
<h:outputText value="article" />
</f:facet>
<h:outputText value="#{car.traveaux.article}"/>
</p:column>
This works for me. Maybe it needs validation and that's why it's empty at the end. Adding immediate="true" skips the validation.
<h:form id="confColaForm" .....>
<p:dataTable id="tablacolas" ... >
<f:facet name="header">
<h:commandLink id="exportar" update=":confColaForm:tablacolas" style="align:right;" immediate="true" >
<h:graphicImage library="images" name="iconexcel.png" style="width:30px;height:30px; "
title="Exportar" />
<p:dataExporter type="xls" target="tablacolas" fileName="ConfiguracionColas" />
</h:commandLink>
</f:facet>
...(columns here)
</p:dataTable/>
</h:form>
possible reason may be the "managedbean scope"...
1)change scope to "view"
2)serialize managedbean
this worked for me
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.
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.
I've been running Primefaces 3.0, no issues, and now am trying an upgrade to 3.4.x - I've tried 3.4, 3.4.1, and 3.4.2 and this problem occurs in all 3 - basically for the datatable with the selectionMode="single" option when I click on a row it remains selected no matter how many other rows I select. At the same time I'm quite sure the selection="#{databrowser.selectedData}" variable is not being set when I'm clicking on the rows. The table is fully populated and no 2 rows have the exact same data in all columns. Tested and this occurs in both Chrome and Firefox. I can't find any similar problem posted - wondering if anyone else has had this issue?
Apart from the element referencing this is the 3.0 code I've used:
<p:layoutUnit position="center" resizable="true" header="Data Set Details" styleClass="east_panel_header" >
<h:form id="tblbrowser">
<p:dataTable id="dataTable" emptyMessage="No data sets found." style="width: 100%" var="datlis" resizableColumns="true" value="#{databrowser.selectedDataModel}" widgetVar="dataTable" selection="#{databrowser.selectedData}" selectionMode="single" >
<p:ajax event="rowSelect" update=":usercomments:commentsTable, :tblbrowser:dataTable" />
<f:facet name="header" >
<p:outputPanel>
<h:outputText value="Search all fields " />
<p:inputText id="globalFilter" onkeyup="dataTable.filter()"/>
</p:outputPanel>
</f:facet>
<p:column id="owner" filterBy="#{datlis.uname}" headerText="Added By" filterMatchMode="contains" >
<h:outputText value="#{datlis.uname}" />
</p:column>
<p:column id="name" filterBy="#{datlis.name}" headerText="Name" >
<h:outputText value="#{datlis.name}" />
</p:column>
<p:column id="description" filterBy="#{datlis.description}" headerText="Description" filterMatchMode="endsWith" >
<h:outputText value="#{datlis.description}" />
</p:column>
<p:column id="datatype" filterBy="#{datlis.data_type}" headerText="Data Type"
filterOptions="#{databrowser.dataTypeOptions}" filterMatchMode="exact" >
<h:outputText value="#{datlis.data_type}" />
</p:column>
<p:column id="quality" filterBy="#{datlis.quality}" headerText="Source Type"
filterOptions="#{databrowser.qualityOptions}" filterMatchMode="exact" >
<h:outputText value="#{datlis.quality}" />
</p:column>
<p:column id="added" headerText="Date Added" filterMatchMode="endsWith" >
<h:outputText value="#{datlis.added}" />
</p:column>
<p:column headerText="Metadata" style="width:40px" >
<p:commandButton id="selectButton" rendered="#{datlis.has_metadata}" icon="ui-icon-circle-arrow-s" title="View" ajax="false" >
<f:param name="filepath" value="#{datlis.filepath}" />
<p:fileDownload value="#{filedownloader.mfile}" />
</p:commandButton>
</p:column>
<p:column headerText="Data File(s)" style="width:90px" >
<p:commandButton id="selectButton2" rendered="#{datlis.has_datafiles}" icon="ui-icon-circle-arrow-s" title="View" ajax="false" >
<f:param name="datafiles" value="#{datlis.datafiles}" />
<p:fileDownload value="#{filedownloader2.dfile}" />
</p:commandButton>
<h:outputText value=" " />
<h:outputText value="#{datlis.zipsize}" />
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
You are missing the rowKey attribute which should be the unique identifier of each row.
Example, if your selectedData object has a unique field id, your dataTable component should look like:
<p:dataTable id="dataTable" rowKey=#{datlis.id}
value="#{databrowser.selectedDataModel}" var="datlis"
selection="#{databrowser.selectedData}" selectionMode="single" >
No need to update the same table within p:ajax to see the selection, so you can probably remove the :tblbrowser:dataTable from the update target and have only:
<p:ajax event="rowSelect" update=":usercomments:commentsTable" />