P: ajax rowSelectCheckbox event not working on column header
When I check the box inside the data table, it works fine, but when I select the column header, only visible, the checkbox is selected and the value is set behind it. Whether to bind the value for the column header header separately.
<div class="ContentSection">
<p:tab title="Result"
id="dataTable_selectionDemoTab">
<h2>Table RowSelection with Checkbox</h2>
<p:panel id="checkboxSelectTableContent_xhtml" >
<div class="TableSection">
<p:dataTable value="#{dataTableBean.defaultRecord}"
var="car"
id="carDemo33"
style="margin-bottom:0"
selection="#{dataTableBean.selectedRecords}"
rowKey="#{car.productNmr}">
<p:ajax event="rowSelectCheckbox"
process="carDemo33"
update="carDemo33,:tableform:multiCarDetail"
oncomplete="multiCarDialog.show();" >
</p:ajax>
<p:ajax event="rowUnselectCheckbox"
oncomplete="multiCarDialog.show();"
update="carDemo33,:tableform:multiCarDetail" >
</p:ajax>
<p:column selectionMode="multiple"
style="width:16px;text-align:center"/>
<p:column headerText="productNmr" width="172">
<h:outputText value="#{car.productNmr}" />
</p:column>
<p:column headerText="productName" width="161">
<h:outputText value="#{car.productName}" />
</p:column>
<p:column headerText="address" width="161">
<h:outputText value="#{car.address}" />
</p:column>
<p:column headerText="leziDate" width="135">
<h:outputText value="#{car.leziDate}" />
</p:column>
</p:dataTable>
</div>
</p:panel>
</p:tab>
</p:tabView>
</div>
<p:dialog id="tablePopup"
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="#{dataTableBean.selectedRecords}"
var="car">
<h:outputText value="#{car.productNmr} - #{car.address}"
style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
+3
source to share
2 answers
Which version of Primefaces did you use? If you are using Primefaces 5.0 or higher, you must change oncomplete="multiCarDialog.show();"
tooncomplete="PF('multiCarDialog').show();"
This is my example code.
XHTML
<h:form id="formc">
<p:dataTable id="checkboxDT"
var="car"
value="#{dtSelectionView.cars6}"
selection="#{dtSelectionView.selectedCars}"
rowKey="#{car.id}"
style="margin-bottom:0">
<p:ajax event="rowSelectCheckbox"
process="checkboxDT"
update="checkboxDT,:formc:multiCarDetail"
oncomplete="PF('multiCarDialog').show()" >
</p:ajax>
<p:ajax event="rowUnselectCheckbox"
oncomplete="PF('multiCarDialog').show()"
update="checkboxDT,:formc:multiCarDetail" >
</p:ajax>
<p:ajax event="toggleSelect"
oncomplete="PF('multiCarDialog').show()"
update="checkboxDT,:formc:multiCarDetail" >
</p:ajax>
<f:facet name="header">
Checkbox
</f:facet>
<p:column selectionMode="multiple"
style="width:2%;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=":formc: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>
</h:form>
ManagedBean
@ManagedBean(name="dtSelectionView")
@ViewScoped
public class SelectionView implements Serializable {
private List<Car> cars6;
private List<Car> selectedCars;
@ManagedProperty("#{carService}")
private CarService service;
@PostConstruct
public void init() {
cars6 = service.createCars(10);
}
public List<Car> getCars6() {
return cars6;
}
public void setService(CarService service) {
this.service = service;
}
public List<Car> getSelectedCars() {
return selectedCars;
}
public void setSelectedCars(List<Car> selectedCars) {
this.selectedCars = selectedCars;
}
}
0
source to share