CODEWITHSUNDEEP
jsfprimefaces
goku
goku

Reputation: 223

p:ajax rowSelectCheckbox event is not working in column header check box

When i select the checkbox inside the data table its working fine but when i select the column header check box only visibly the checkbox get selected but value is setting behind. Is we need to bind the value for the column header check box separatly.

<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>

Upvotes: 3

Views: 9010

Answers (2)

wittakarn
wittakarn

Reputation: 3164

What Primefaces version that you used? If you use Primefaces 5.0 or higher, you must change oncomplete="multiCarDialog.show();" to oncomplete="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;
    }
}

Upvotes: 0

wittakarn
wittakarn

Reputation: 3164

You must have p:ajax event="toggleSelect" in case handle checkbox is toggled in header.

<p:ajax event="toggleSelect" 
        oncomplete="PF('multiCarDialog').show()" 
        update="checkboxDT,:formc:multiCarDetail" >
</p:ajax>

Upvotes: 2

Related Questions