Primefaces datatable unselect row on click with multiple selection

Question

How to unselected a selected row on a dataTable primefaces using only a click, the same way that it work to select the row.

This is the code I am using to select and unselect at the moment, but the unselect needs to press the Ctrl or CMD (on mac) key.

<p:dataTable
    value="#{adminiClubReconManager.bankMovementsFound}" var="movs"
    style="width:90%;border: 0px;"
    selection="#{adminiClubReconManager.selectedBankMovement}"
    rowKey="#{movs.id}" editable="true" styleClass="rowStyle"
    paginator="true" rowsPerPageTemplate="5,10,15" rows="10"
    selectionMode="mutiple"
    paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
    <p:ajax event="rowSelect"
        listener="#{adminiClubReconManager.onBankRowSelect()}"
        update="@form:reconMessages" />
    <p:ajax event="rowUnselect"
        listener="#{adminiClubReconManager.onBankRowUnselect()}"
        update="@form:reconMessages" />
    <p:column
        style="background:transparent;border:0px;text-align:left">
        <c:facet name="header">
            <h:outputText
                value="#{msg['admini.common.movement.recon.number']}" />
        </c:facet>
        <h:outputText value="#{movs.id}"
            style="background:transparent;border:0px" />
    </p:column>
    ...
</p:dataTable>

rowSelectMode. Giving it the value 'add' might lead to what you want. — Kukeltje
what do you mean by giving it a value 'add' ? how and where to do that ' on the p:ajax ? — b.lopes
Ok I just saw that: 'Defines row selection mode for multiple selection. Valid values are "new", "add" and "checkbox". But this does not work for unselect a selected row and keep the others already selected — b.lopes
Yes I was using the version 5.3, now I am with 6.0 but still the same, I need the crtl key to unselect the selected rows — b.lopes

estevamdf estevamdf · Accepted Answer · 2017-03-10T17:52:38

We've 2 possibilities for solve this issue.

First

Create commandButton and call primefaces method unselectAllRows();

<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}" paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
   <p:commandButton widgetVar="buttonClear" value="Clear selection" onclick="dataTableWidgetVar.unselectAllRows();"/>
</p:dataTable>

After the click you have the rows deselected

Second

Via ajaxEvent call primefaces method unselectAllRows();

<p:dataTable id="dataTableId" var="p" value="#{myBean.dataModel}"                                                                                                                     paginator="true" rows="50" paginatorPosition="bottom" emptyMessage="Empty results" rowKey="#{p.attribute}" selection="#{myBean.atributeList}" widgetVar="dataTableWidgetVar">`
    <p:ajax event="page" update="dataTableId" oncomplete="dataTableWidgetVar.unselectAllRows();"/>
 ...
</p:dataTable>

In this case you selected the data of the first page when you click another page for example page 3, the ajax execute the method UnselectAllRows (); And you clear you have selected.

For solve this i finded this material at primefaces forum in: https://forum.primefaces.org/viewtopic.php?f=3&t=24144

Primefaces datatable unselect row on click with multiple selection

1 Answers