Search code examples
datatableprimefacesradio-buttonselection

DataTable selection with radioButtons not working


I have a p:dataTable that is editable via RowEditor. Now, I want to add a single selection per radio button (since rowSelection by simply clicking on the row does not work with cellEditor).

The issue is that when I click on the radio button the selection doesnt change and the rowSelect event isnt triggered

Im using PrimeFaces 13.0.7 and heres the document: https://primefaces.github.io/primefaces/13_0_0/#/components/datatable

Here is my DataTable

<p:dataTable id="exampleDatatable"
                                             var="item" 
                                             value="#{bean.itemList}" 
                                             editable="true"
                                             rowKey="#{item.id}"
                                             selectionMode="single"
                                             selection="#{bean.selectedItem}"
                                             >
  <p:ajax event="rowEdit" listener="#{bean.onRowEditItem}"/>
  <p:ajax event="rowSelect" listener="#{bean.rowSelectItem"}/>
  <p:column></p:column>
  <p:column headerText="Id">
    <p:cellEditor>
      <f:facet name="output">
        <h:outputText value="#{item.id}"/>
      </f:facet>
      <f:facet name="input">
        <h:outputText value="#{item.id}" style="width:100%"/>
      </f:facet>
    </p:cellEditor>
  </p:column>
</p:dataTable>

Solution

  • your code is wrong this is what you need to do...

    selectionMode="single" goes on the p:column not on the DataTable.

    See docs: https://primefaces.github.io/primefaces/13_0_0/#/components/datatable?id=single-selection-with-radiobutton

    the value for selection="#{bean.selectedItem}" must be a single item and it will detect it.

    <p:dataTable var="car" value="#{carBean.cars}" selection="#{carBean.selectedCar}" rowKey="#{car.id}">
        <p:column selectionMode="single"/>
        ...columns
    </p:dataTable>