Primefaces datatable unselect row on click with multiple selection - jsf

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>

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

Related

ui:repeat in datatable export as XLS (Primefaces)

I'm trying to export my datatable to Excel by using the following code:
<p:dataTable id="potentialDonorFileTable" var="potentialDonorFile"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
value="#{analyseBackingBean.allPotentialDonorFiles}" rows="30"
paginator="true" lazy="true">
<f:facet name="{Exporters}">
<h:commandLink>
<h:outputText id="downloadAsXls" value="download"/>
<p:dataExporter type="xls" target="potentialDonorFileTable" fileName="potontial-donor-files"/>
</h:commandLink>
</f:facet>
<p:column headerText="#{msgs['registration.number']}">
<h:outputText value="#{potentialDonorFile.registrationNumber}"/>
</p:column>
</p:dataTable>
and this is working correctly. However, now I need to display a list of items in a certain column and also export that list to excel.
<p:column headerText="#{msgs['reason']}">
<ui:repeat value="#{potentialDonorFile.list}"
var="item">
<h:outputText
value="#{msgs['enum.translation.'.concat(item)]}"/>
</ui:repeat>
</p:column>
The values are correctly displayed, but when I'm exporting this datatable to excel then I'm getting the following cell: "com.sun.faces.facelets.component.UIRepeat#6063d832". Is there any way to work around this using primefaces 5.2?

Primefaces Accordion Tab empty when rendered="true"

I had a perfectly working accordion with forms and datatables, until I decided to hide some tabs according to a get param. For example /editarContrato.jsf?id=19
Now the rendered tabs appear but empty. I now the boolen is correctly evaluated, and that the tab header is showing when it should, but not the content.
Thanks!
<p:accordionPanel multiple="true" dynamic="true" cache="false"
id="mainAccordion">
<p:tab title="#{msg['label.contrato']}" id="mainTab">
<h:form styleClass="form-horizontal" id="form">
</h:form>
</p:tab>
<p:tab title="Plan de Pagos" rendered="#{not empty param.id}">
<h:form styleClass="form-horizontal" id="formPago">
<p:dataTable id="dataPagos" value="#{pagoMB.dataPagos}" var="pago"
editable="true" ajax="true" royKey="#{pago.id}" scrollable="true"
scrollWidth="100%" rows="10" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15" style="table-layout: auto">
<f:facet name="header">Plan de Pagos
</f:facet>
</p:dataTable>
</h:form>
</p:tab>
Try:
<p:tab title="Plan de Pagos" rendered="#{not empty param['id']}">
Param is a map of values and id can't be resolved this way.

How to fix my Primefaces datatable pagination layout?

I use primefaces to display a list in a datatable with pagination.
The layout for the Page DropDown is not correct.
Screenshot:
How can I set this layout?
It now stretches along the whole width of the table. This is not good.
<p:dataTable id="dataTable" value="#{bean.lazyModel}" var="item"
paginator="true"
rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,50,100"
lazy="true"
selectionMode="single"
selection="#{orderEntrySearchBacking.selected}"
rowKey="#{item.id}">
<f:facet name="header">
Patients
<p:commandButton id="toggler" type="button" value="Columns"
style="float:right" icon="ui-icon-calculator" />
<p:columnToggler datasource="dataTable" trigger="toggler" />
</f:facet>
<p:column>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column>
<h:outputText value="#{item.date}"/>
</p:column>
....
This problem is related to the {RowsPerPageDropdown}, but I can't get the style correct. Help is appreciated.
That's all folks!
It looks like your <select> element has style width: 100%.
Inspect dropdown and find where style rule come from.
To fix it you should override this rule. One of the ways is to add following style rule to your .css file.
select.ui-paginator-rpp-options{
width:auto;
}

How to clean <p:dataTable> globalFilter field?

I have the following requirement:
In case the user push one of the paginator buttons and there is a value in the globalFilter inputText then the value should be deleted.
This is the table (lazy loading):
<p:dataTable id="osTable"
var="os"
value="#{bean.lazyModel}"
selection="#{bean.selectedObjectSet}"
selectionMode="single"
rowKey="#{os.ID}"
paginator="true"
paginatorPosition="bottom"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15"
rows="10"
widgetVar="table">
<f:facet name="header">
<p:outputPanel style="float: right">
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter"
value="#{bean.find}"
onkeypress="if (event.keyCode == 13) {table.filter()}"
style="width:150px">
</p:inputText>
</p:outputPanel>
</f:facet>
I guess I need to do that via javascript but I don’t know how to implement this kind of functionality.
try this :
<p:ajax event="page" oncomplete="jQuery('#yourFormID\\:yourDataTableID\\:globalFilter').val('')"/>
this should clean the filter on pagination complete....

Dynamically enable/disable a commandButton on a Primefaces table row selection basis

Is there a way to dynamically enable/disable a commandButton on a table row selection basis?
In the next example, I want to enable ‘deleteBtn’ only if there is any row selected:
<p:dataTable
var="department" value="#{departmentCtrl.departmentTable}"
selection="#{departmentCtrl.departmentList}">
<p:column selectionMode="multiple" styleClass="w18" />
<p:column headerText="#{msgs.id}" sortBy="#{department.id}">
<h:outputText value="#{department.id}" />
</p:column>
<p:column headerText="#{msgs.name}" sortBy="#{department.name}">
<h:outputText value="#{department.name}" />
</p:column>
</p:dataTable>
<p:commandButton id="deleteBtn" value="#{msgs.delete}" disabled="???" />
Thanks
You should update your button every time a select or unselect event
occurs.
You should disable it when the departmentList is empty.
<p:dataTable var="department"
value="#{departmentCtrl.departmentTable}"
selection="#{departmentCtrl.departmentList}">
<p:ajax event="rowSelect" update="deleteBtn"/>
<p:ajax event="rowUnselect" update="deleteBtn"/>
<p:column selectionMode="multiple" styleClass="w18" />
<p:column headerText="#{msgs.id}" sortBy="#{department.id}">
<h:outputText value="#{department.id}" />
</p:column>
<p:column headerText="#{msgs.name}" sortBy="#{department.name}">
<h:outputText value="#{department.name}" />
</p:column>
</p:dataTable>
<p:commandButton id="deleteBtn" value="#{msgs.delete}"
disabled="#{fn:length(departmentCtrl.departmentList) == 0}" />
BTW don't forget to add the fn namespace to your facelets file.
A bit late to the party perhaps, but here is what it took for me to enable and disable based on every possible type of click in a Checkbox selection table. In my case I just needed to tell the Print and Delete buttons to disable when there was nothing selected.
<p:ajax event="rowSelect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="toggleSelect" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowSelectCheckbox" update=":form:printBtn,:form:deleteBtn" />
<p:ajax event="rowUnselectCheckbox" update=":form:printBtn,:form:deleteBtn" />
It is possible that you don't actually need all five events but I did. rowSelect and rowUnselect handled the mouse clicks that are not in the checkboxes. toggleSelect handles the checkbox that selects all/none (the one in the column headers) and the rowSelectCheckbox and rowUnselectCheckbox handle the checkboxes in the rows.
I am too late to response. But it might help someone. I got the same requirement to disable the button, when the user does not select any checkbox.
I am using Primefaces 5.1
Here is my proposed solution.
I am using widgetVar to check the selected row count and enable/disable the command button.
From the Primefaces document we have client side API for the data table:
Also we have client side API for command button
Now we will come back to the implementation part
<p:dataTable var="line" varStatus="loop"
value="#{myexpense.lazyModel}" paginator="true"
rows="#{myexpense.rows}"
rendered="#{myexpense.userIdSearch eq null}"
rowIndexVar="row"
emptyMessage="#{tk.expense_table_empty}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink}
{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
widgetVar="expenseEntryTable"
rowsPerPageTemplate="#{myexpense.rowsPerPageTemplate}"
id="lazyDataTable" lazy="true"
selection="#{myexpense.selectedExpenseEntryList}"
rowKey="#{line.oid}">
<p:ajax event="toggleSelect" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:ajax event="rowSelectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:ajax event="rowUnselectCheckbox" oncomplete="disableOrEnableCommandButton();" update="updateBtn"/>
<p:column selectionMode="multiple" width="3%" styleClass="centerAlignColumn selectAll" id="selectAll"/>
.... more column
<f:facet name="footer">
<p:commandButton process="lazyDataTable" value="#{tk.expense_update_selected}" partialSubmit="true" ajax="true" widgetVar="updateBtn" disabled="#{myexpense.disableUpdateButton}"
actionListener="#{myexpense.updateSelected}"
update="lazyDataTable #form" rendered="#{myexpense.form.myOnly}" />
</f:facet>
</p:dataTable>
As you can see I have defined 2 widgetVar, one for data table (expenseEntryTable) and another one for command button (updateBtn).
Also I have defined disbaled attribute #{myexpense.disableUpdateButton}, which will be helpful when the page load.
private Boolean disableUpdateButton;
public Boolean getDisableUpdateButton(){
disableUpdateButton = !((selectedExpenseEntryList!=null) && (!selectedExpenseEntryList.isEmpty()));
return disableUpdateButton;
}
Now you can write the java script.
function disableOrEnableCommandButton() {
if (PrimeFaces.widgets['expenseEntryTable']) {
if (PF('expenseEntryTable').getSelectedRowsCount() > 0) {
PF('updateBtn').enable();
} else {
PF('updateBtn').disable();
}
}
}
Hope it helps anyone!!!
[SOLVED]
In the manage bean I change from:
List departmentList;
to
Department[ ] departmentList;
Then I can use:
<p:ajax event="rowSelectCheckbox" listener="#{departmentCtrl.departmentSelected}"
update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>
<p:ajax event="rowUnselectCheckbox" listener="#{departmentCtrl.departmentUnselected}"
update=":formManageDepartment:departmentBtnPanel,:formManageDepartment:deleteDepartmentBtn"/>

Resources