b.lopes
b.lopes

Reputation: 475

Primefaces datatable unselect row on click with multiple selection

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>

Upvotes: 2

Views: 9554

Answers (1)

estevamdf
estevamdf

Reputation: 23

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

Upvotes: 1

Related Questions