I have a <p:datatable> in which there is some p:column and particularly one <p:columns>.
I'm also using one <p:columnToggler> to let user to display or hide column.
Memorize his choices is not difficult, it's to restore dynamically his choice which is a problem, especially for <p:columns> because there is no get/set for column inside <p:columns>. I'm also using a pagination and columntoggler+pagination are not friends.
What is the best way to restore users choices for a <p:dataTable> toggler ?
I use PrimeFaces 5.1.
Sorry i forgot to precise : i'm on primefaces 5.1
I found my solution !
In a first time, I put my p:columns inside a p:datatable which is inside a p:column and it's work ! The columntoggler change visibility of this whole column. So i can't hide column per column...
But i also use the pagination and columntoggler/pagination didn't work very well together... I can hide a column but if i change my page (using the paginator) in datatable, the column will re-appear empty ! But if i refresh the whole page, the paginator work correctly...
that's why i used this part of solution : Primefaces ColumnToggler does'nt work with pagination
Precisely a script to check/uncheck column visibility.
<script>
function updateToggles(widget){
$( widget.jqId + ' .ui-chkbox .ui-chkbox-box').each(function() {
var chkbox = $(this);
if(chkbox.hasClass('ui-state-active')) {
widget.check(chkbox);
} else {
widget.uncheck(chkbox);
}
});
}
</script>
<p:dataTable
id="datatable-factures"
value="#{listFactureHandler.table}"
var="facture"
label="Facture"
nativeElements="true"
paginator="true"
rowKey="#{facture.id}"
rowSelectMode="checkbox"
selection="#{listFactureHandler.selection}"
sortBy="#{facture.dateFacture.time}"
sortOrder="descending">
<f:facet name="header">
<p:commandButton id="toggler" type="button" value="Personnaliser" style="float:right;" />
<p:columnToggler widgetVar="columnToggler" id="columnToggler" datasource="datatable-factures" trigger="toggler" ><p:ajax event="toggle" listener="#{dsHandler.onToggleColumn}"/></p:columnToggler>
<p:ajax event="page" oncomplete="updateToggles(PF('columnToggler'))"/>
</f:facet>
<p:ajax event="toggleSelect" update=":formulaire:insert-actions" />
<p:ajax event="rowSelectCheckbox" update=":formulaire:insert-actions" />
<p:ajax event="rowUnselectCheckbox" update=":formulaire:insert-actions" />
<p:column selectionMode="multiple" styleClass="text-center" toggleable="false" />
[...]
<p:column id="columns-champs-perso" headerText="Champs Personnalisés" visible="false">
<p:dataTable id="subfacture" value="#{facture}">
<p:columns headerText="#{champs.libelle}" id="champspersos#{index}" value="#{listFactureHandler.dossier.champsPersonnalises}" columnIndexVar="index" var="champs">
<h:outputText value="#{facture.getChampPersonnalise(champs.code).valeur}" />
</p:columns>
</p:dataTable>
An handler (dsHandler) memorize datatable states.
On pre-rendering, i do something like that :
Map<String, Boolean> map = objlState.getColumnsVisibles();
for (String id : map.keySet()) {
Column objCol = (Column) FacesContext.getCurrentInstance().getViewRoot().findComponent(id);
if (objCol != null) {
objCol.setVisible(map.getOrDefault(id, true));
}
}
I memorize columns id, not indexes because columntoggler return columnIndex+visibility and did not pay attention to columns which are not rendered. (but datatable.getChildCount() return column number and take care of not rendered columns.
In hope that will help someone a day ;)
Related
Hi I have a datatable with a p:rowToggler, so when launch a popup from a row expasion, after I close the popup I need to update some labels in the rows. Update works! but the row expanded, collapse. How can you keep open the rowexpansion after close the popup and updated the content. thanks.
Snippet of PopUp
<p:ajax event="close" update=":id1:id2" oncomplete="someJavascript()" />
Snippet of Databable
<h:form prependId="false" id="id1">
<h:panelGroup id="id2" >
<p:dataTable tableStyleClass="win" var="element" id="table1" value="#{myBean.list}"
selectionMode="single" rowExpandMode="single" rowIndexVar="cont" widgetVar="table1"
selection="#{myBean.selectedRecord}" rowKey="#{element.id}" >
<p:ajax event="rowToggle" listener="#{myBean.methodBean(element)}" />
<p:column styleClass="rowTogglerStyle"
<p:rowToggler collapseLabel="#{bundle.show}"
expandLabel="#{bundle.show}">
</p:rowToggler>
</p:column>
</p:datatable> </h:panelGroup> </h:form>
If you save your expanded row element id you can do it like that:
<p:dataTable expandedRow="#{element.id == myBean.expandedRowElementId}">
<p:ajax event="rowToggle" listener="#{bean.setExpandedRowElementId(element.id)}"/>
To prevent it of being opened again you need to modify the setter a bit:
public void setExpandedRowElementId(String expandedRowElementId){
if(this.expandedRowElementId != null && expandedRowElementId.equals(this.expandedRowElementId)
// if the id is equal the expansion is closed, so the expanded element must be set to null
this.expandedRowElementId = null;
else
this.expandedRowElementId = expandedRowElementId;
}
Hi the problem was that the selected rowexpansion after close the popup had the class ui-state-highlight yet, so I found to do this to reopen the closed rowexpansion via javascript in onclomplete atributte in p:ajax :
jQuery('tr.ui-state-highlight').find('td.rowTogglerStyle > div.ui-row-toggler').trigger('click');
I hope it will be useful for someone else.
Prerequisites:
JSF 2.1
Primefaces 5.2
Glassfish 3.1
Story:
I got a datatable displaying some editable values.
The amount of columns is dynamic.
In the same form is a button calling a save-action of my bean to save all edited data.
The function it self is working perfectly fine
Implementation:
<p:dataTable id="dataTable" scrollable="true"
widgetVar="wigVardataTable"
value="#{myBean.dataList}"
var="data"
editable="true"
editMode="cell"
rowKey="rowkey">
<p:columns var="col"
value="#{myModel.columnList}"
style="font-size: 12px">
<f:facet name="header">
<h:outputText
value="#{col.header}" />
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText
value="#{myModel.getValueForTableCell(data, col).value}" />
</f:facet>
<f:facet name="input">
<p:inputText
id="inputTxt"
value="#{myModel.getValueForTableCell(data, col).value}"
style="width:100%">
</p:inputText>
</f:facet>
</p:cellEditor>
</p:columns>
</p:dataTable>
Problem:
When pressing the save button while a table cell is being edited and didn't loose its focus yet, the new value inside the inputtext of the tablecell won't be written back into my bean and due to that won't be saved.
Question:
How can i write back the data into my backing bean, before the button action is executed?
This behavior is caused by wrong ordering of ajax events. When the command button is invoked while having a cell editor open, then the ajax event of the command button is fired before the ajax event of the cell edit.
We'd thus like to swap around them. Without editing the PrimeFaces source code, you could achieve this by explicitly invoking saveCell() function of the <p:dataTable> widget when there's a cell editor open.
So, given a
<h:form>
<p:dataTable ... widgetVar="wigVardataTable" />
<p:commandButton ... />
</h:form>
you can achieve the desired behavior by adding the below onclick to the <p:commandButton>:
onclick="var d=PF('wigVardataTable'), c=d.jq.find('td:has(.ui-cell-editor-input:visible)'); if(c.length)d.saveCell(c)"
Basically, it first finds the cell with an open cell editor and then invokes saveCell() on it.
Another, less elegant, way is explicitly invoking showCellEditor() function of the <p:dataTable> widget without passing the expected target cell in a try-catch block where the exception is ignored.
onclick="try{PF('wigVardataTable').showCellEditor()}catch(ignore){}"
It will save any opened cell first and later throw an error that no new target cell was specified as argument, but that could be ignored as shown above.
Noted should be that this all works regardless of whether you use <p:columns> or <p:column>, and also regardless of whether you use a normal model or an overcomplicated model ;) This trick is tested on both your PrimeFaces 5.2 version and the current PrimeFaces 6.0 version.
Here is a generic solution inspired by BalusC answer if you have other datatables with cell editMode :
<script type="application/javascript">
function saveAllCellsBeforeSubmit() {
for (var widgetName in PrimeFaces.widgets) {
if (PrimeFaces.widgets[widgetName].hasOwnProperty('cfg') && PrimeFaces.widgets[widgetName].cfg.hasOwnProperty('editMode') && PrimeFaces.widgets[widgetName].cfg.editMode === 'cell') {
var d = PF(widgetName);
var c = d.jq.find('td:has(.ui-cell-editor-input:visible)');
if (c.length) {
d.saveCell(c);
}
}
}
}
</script>
I am having difficulty re-rendering a PrimeFaces Datatable once a cell has been edited. Changing the value in one cell may change entries in the other cells, hence the need to refresh the entire table.
Here's the JSF page:
<h:form id="testForm">
<p:outputPanel id="testContainer">
<p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
<p:column headerText="Col1">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{entry.col1}" /></f:facet>
<f:facet name="input"><p:inputText value="#{entry.col1}" /></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Col2">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{entry.col2}" /></f:facet>
<f:facet name="input"><p:inputText value="#{entry.col2}" /></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
</p:outputPanel>
</h:form>
And here's the backing bean:
#ManagedBean(name = "tableBean", eager = false)
#ViewScoped
public class TableBean {
public TableBean() {
RowData entry = new RowData("a1", "b1");
entries.add(entry);
entry = new RowData("a2", "b2");
entries.add(entry);
entry = new RowData("a3", "b3");
entries.add(entry);
}
public class RowData {
private String col1;
private String col2;
public RowData(String col1, String col2) {
this.col1 = col1;
this.col2 = col2;
}
public String getCol1() {
return col1;
}
public void setCol1(String col1) {
this.col1 = col1;
}
public String getCol2() {
return col2;
}
public void setCol2(String col2) {
this.col2 = col2;
}
}
private ArrayList<RowData> entries = new ArrayList<RowData>();
public List<RowData> getData() {
return entries;
}
public void onCellEdit(CellEditEvent event) {
entries.get(event.getRowIndex()).setCol1("Dummy Col 1");
entries.get(event.getRowIndex()).setCol2("Dummy Col 2");
}
}
When including update=":testForm:testContainer" within the cellEdit AJAX event, changing a cell value deletes the datatable on screen and only renders the cell content (along with the button) -- I do not understand why this is. When the update attribute is not specified, the table remains on screen with the active cell updated, but none of the other cells are updated (as to be expected).
The desired behaviour can be achieved (in a non-automated way) by not specifying the update attribute within the AJAX cellEdit event and clicking the Redisplay button after editing a cell's value. How can I achieve this in an automated way, and why does the update attribute not work as I expect?
I am using PrimeFaces 4.0.
The rowEdit and cellEdit events does by design inside the table not update/re-render anything else than the current row, even not when explicitly specified in update attribute. It's the consequence of PrimeFaces' a bit overzealous attempt to minimize the response size. This makes sense in most of the cases, but not in specifically your case. It's worth an issue report.
In the meanwhile, until they fix this behavior, your best bet is using <p:remoteCommand> to invoke the desired listener method and perform a full update of the table.
Rewrite
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
...
</p:dataTable>
to
<p:remoteCommand name="onCellEdit" action="#{tableBean.onCellEdit}" update="testContainer" />
<p:dataTable ...>
<p:ajax event="cellEdit" oncomplete="onCellEdit()" />
...
</p:dataTable>
The BaLusC solution has not worked directly for me. The onCellEdit needs a CellEditEvent as param. My workaround is as following:
<p:remoteCommand name="onCellEdit" update="testContainer" />
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" oncomplete="onCellEdit()" />
...
</p:dataTable>
If none of the solutions worked for you, this worked for me
<p:dataTable ... id="theId" widgetVar="theWidget" ...>
<p:ajax event="rowEdit" listener="#{...}"
oncomplete="PF('theWidget').filter()"/>
....
I'm calling the filter method on the PF widget on ajax complete, any method that does a "reload" of the table should work, I used filter because my table had column filters.
I tested your code. First I moved p:commandButton out of p:outputPanel. Here is modified code:
<h:form id="testForm">
<p:outputPanel id="testContainer">
<p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
(...)
</p:dataTable>
</p:outputPanel>
<p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
</h:form>
I think this code doesn't work correctly. if you change anything in table, the p:ajax every time render full table. So, the program load basic data from TableBean constructor and deleted new data.
If I omit your p:ajax code there is not disapears any new data from screen. The refreshButton p:commandButton work correctly.
When including update=":testForm:testContainer" within the cellEdit
AJAX event, changing a cell value deletes the datatable on screen and
only renders the cell content (along with the button) -- I do not
understand why this is.
I think it is bad design add update=":testForm:testContainer" to ajax, because it's update your outputPanel more than as exepted (first time work correctly, second time couldn't edit cell, because the program update to many times table).
I don't know what is your goal. If you want render table without a commandButton, then could you specify one javascript event or p:message and this disappear you can render table.
I think if you omit update in p:ajax or specify update of one p:message, and move p.commandButton out of testContainer your code start work correctly.
After 5 years, this problem still exists. Unfortunately, while Baukes solution is extremly helpful and includes important insights it's still incomplete, as ltlBeBoy already pointed out in his comment. Subsequent edits without change lead to an inconsistent table state, where no more edits are possible. The reason is, that the oncomplete remote update comes after the edit mode of the new cell is already activated. So the edit mode of the new cell is destroyed by the update. However, the update can't be done in Ajax listener tableBean#onCellEdit, as this would display the table erroneously with one cell only.
The solution is, to execute the update in the remote commands listener and only, if a change happend. So, in tableBean you implement a programmatic update, a remote listener and a flag that indicates change:
public static void update(String id) {
PrimeFaces pf = PrimeFaces.current(); //RequestContext.getCurrentInstance() for <PF 6.2
if(pf.isAjaxRequest()) pf.ajax().update(id);
}
/** Whether onCellEdit changed the value */
boolean onCellEditChange;
public void onCellEditRemote() {
if(!onCellEditChange) update("testContainer");
}
public void onCellEdit(CellEditEvent event) {
... onCellEditChange= /*Change happend*/ ...
}
The remote command has no update attribute any more:
<p:remoteCommand name="onCellEdit" actionListener="#{tabelBean.onCellEditRemote}"/>
try using process
<p:remoteCommand name="onCellEdit" update="testContainer" process="#this" />
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" oncomplete="onCellEdit()" process="#this" />
...
</p:dataTable>
This is my first post ever in here. As ltlBeBoy mentioned, BalusC's solution works only if the cell editing is done with an enter key hit.
None of the other suggestions listed in here worked for me.
In my case, I just wanted to update a specific row (that has each column's average) in the table on cellEdit event. I'm posting this in case if someone out there is looking for a solution: I managed to achieve this by separating that row in a second datatable right below the main one. Here's the code:
<pf:ajax event="cellEdit"
listener="#{newAgentMetricBacking.onCellEdit}"
update="c21413" />
<pf:dataTable id="c21413"
styleClass="noHeader"
value="">
<pf:column>
<h:outputText value="#{bundle.TeamAverage}"/>
</pf:column>
<pf:columns columnIndexVar="j"
value="#{newAgentMetricBacking.averageArray}"
var="avg">
<h:outputText value="#{newAgentMetricBacking.
averageArray[j]}"/>
</pf:columns>
</pf:dataTable>
Otherwise, as of today, I couldn't find a better solution for updating either the whole table or a specific row specifically upon success of cellEdit event.
Cheers!
I am having difficulty re-rendering a PrimeFaces Datatable once a cell has been edited. Changing the value in one cell may change entries in the other cells, hence the need to refresh the entire table.
Here's the JSF page:
<h:form id="testForm">
<p:outputPanel id="testContainer">
<p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
<p:column headerText="Col1">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{entry.col1}" /></f:facet>
<f:facet name="input"><p:inputText value="#{entry.col1}" /></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Col2">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{entry.col2}" /></f:facet>
<f:facet name="input"><p:inputText value="#{entry.col2}" /></f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
<p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
</p:outputPanel>
</h:form>
And here's the backing bean:
#ManagedBean(name = "tableBean", eager = false)
#ViewScoped
public class TableBean {
public TableBean() {
RowData entry = new RowData("a1", "b1");
entries.add(entry);
entry = new RowData("a2", "b2");
entries.add(entry);
entry = new RowData("a3", "b3");
entries.add(entry);
}
public class RowData {
private String col1;
private String col2;
public RowData(String col1, String col2) {
this.col1 = col1;
this.col2 = col2;
}
public String getCol1() {
return col1;
}
public void setCol1(String col1) {
this.col1 = col1;
}
public String getCol2() {
return col2;
}
public void setCol2(String col2) {
this.col2 = col2;
}
}
private ArrayList<RowData> entries = new ArrayList<RowData>();
public List<RowData> getData() {
return entries;
}
public void onCellEdit(CellEditEvent event) {
entries.get(event.getRowIndex()).setCol1("Dummy Col 1");
entries.get(event.getRowIndex()).setCol2("Dummy Col 2");
}
}
When including update=":testForm:testContainer" within the cellEdit AJAX event, changing a cell value deletes the datatable on screen and only renders the cell content (along with the button) -- I do not understand why this is. When the update attribute is not specified, the table remains on screen with the active cell updated, but none of the other cells are updated (as to be expected).
The desired behaviour can be achieved (in a non-automated way) by not specifying the update attribute within the AJAX cellEdit event and clicking the Redisplay button after editing a cell's value. How can I achieve this in an automated way, and why does the update attribute not work as I expect?
I am using PrimeFaces 4.0.
The rowEdit and cellEdit events does by design inside the table not update/re-render anything else than the current row, even not when explicitly specified in update attribute. It's the consequence of PrimeFaces' a bit overzealous attempt to minimize the response size. This makes sense in most of the cases, but not in specifically your case. It's worth an issue report.
In the meanwhile, until they fix this behavior, your best bet is using <p:remoteCommand> to invoke the desired listener method and perform a full update of the table.
Rewrite
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
...
</p:dataTable>
to
<p:remoteCommand name="onCellEdit" action="#{tableBean.onCellEdit}" update="testContainer" />
<p:dataTable ...>
<p:ajax event="cellEdit" oncomplete="onCellEdit()" />
...
</p:dataTable>
The BaLusC solution has not worked directly for me. The onCellEdit needs a CellEditEvent as param. My workaround is as following:
<p:remoteCommand name="onCellEdit" update="testContainer" />
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" oncomplete="onCellEdit()" />
...
</p:dataTable>
If none of the solutions worked for you, this worked for me
<p:dataTable ... id="theId" widgetVar="theWidget" ...>
<p:ajax event="rowEdit" listener="#{...}"
oncomplete="PF('theWidget').filter()"/>
....
I'm calling the filter method on the PF widget on ajax complete, any method that does a "reload" of the table should work, I used filter because my table had column filters.
I tested your code. First I moved p:commandButton out of p:outputPanel. Here is modified code:
<h:form id="testForm">
<p:outputPanel id="testContainer">
<p:dataTable id="testTable" value="#{tableBean.data}" var="entry" editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" update=":testForm:testContainer" />
(...)
</p:dataTable>
</p:outputPanel>
<p:commandButton id="refreshButton" value="Redisplay" update="testContainer" />
</h:form>
I think this code doesn't work correctly. if you change anything in table, the p:ajax every time render full table. So, the program load basic data from TableBean constructor and deleted new data.
If I omit your p:ajax code there is not disapears any new data from screen. The refreshButton p:commandButton work correctly.
When including update=":testForm:testContainer" within the cellEdit
AJAX event, changing a cell value deletes the datatable on screen and
only renders the cell content (along with the button) -- I do not
understand why this is.
I think it is bad design add update=":testForm:testContainer" to ajax, because it's update your outputPanel more than as exepted (first time work correctly, second time couldn't edit cell, because the program update to many times table).
I don't know what is your goal. If you want render table without a commandButton, then could you specify one javascript event or p:message and this disappear you can render table.
I think if you omit update in p:ajax or specify update of one p:message, and move p.commandButton out of testContainer your code start work correctly.
After 5 years, this problem still exists. Unfortunately, while Baukes solution is extremly helpful and includes important insights it's still incomplete, as ltlBeBoy already pointed out in his comment. Subsequent edits without change lead to an inconsistent table state, where no more edits are possible. The reason is, that the oncomplete remote update comes after the edit mode of the new cell is already activated. So the edit mode of the new cell is destroyed by the update. However, the update can't be done in Ajax listener tableBean#onCellEdit, as this would display the table erroneously with one cell only.
The solution is, to execute the update in the remote commands listener and only, if a change happend. So, in tableBean you implement a programmatic update, a remote listener and a flag that indicates change:
public static void update(String id) {
PrimeFaces pf = PrimeFaces.current(); //RequestContext.getCurrentInstance() for <PF 6.2
if(pf.isAjaxRequest()) pf.ajax().update(id);
}
/** Whether onCellEdit changed the value */
boolean onCellEditChange;
public void onCellEditRemote() {
if(!onCellEditChange) update("testContainer");
}
public void onCellEdit(CellEditEvent event) {
... onCellEditChange= /*Change happend*/ ...
}
The remote command has no update attribute any more:
<p:remoteCommand name="onCellEdit" actionListener="#{tabelBean.onCellEditRemote}"/>
try using process
<p:remoteCommand name="onCellEdit" update="testContainer" process="#this" />
<p:dataTable ...>
<p:ajax event="cellEdit" listener="#{tableBean.onCellEdit}" oncomplete="onCellEdit()" process="#this" />
...
</p:dataTable>
This is my first post ever in here. As ltlBeBoy mentioned, BalusC's solution works only if the cell editing is done with an enter key hit.
None of the other suggestions listed in here worked for me.
In my case, I just wanted to update a specific row (that has each column's average) in the table on cellEdit event. I'm posting this in case if someone out there is looking for a solution: I managed to achieve this by separating that row in a second datatable right below the main one. Here's the code:
<pf:ajax event="cellEdit"
listener="#{newAgentMetricBacking.onCellEdit}"
update="c21413" />
<pf:dataTable id="c21413"
styleClass="noHeader"
value="">
<pf:column>
<h:outputText value="#{bundle.TeamAverage}"/>
</pf:column>
<pf:columns columnIndexVar="j"
value="#{newAgentMetricBacking.averageArray}"
var="avg">
<h:outputText value="#{newAgentMetricBacking.
averageArray[j]}"/>
</pf:columns>
</pf:dataTable>
Otherwise, as of today, I couldn't find a better solution for updating either the whole table or a specific row specifically upon success of cellEdit event.
Cheers!
I have a p:datatable with multiple selection mode and a paginator.
<p:datatable value=#{rows} selection=#{selectedRows} pagintor="true" rows="20" rowsPerPageTemplate="10,20,50,100" paginatorPosition="bottom">
<p:column selectionMode="multiple"/>
<p:ajax event="toggleSelect"/>
... columns ...
</p:datatable>
When i click the header checkbox all rows are selected. When i click on the header checkbox to select all rows and then want to export the selected rows (by using the values of 'selection'), it only returns 20 objects. I expect that when i use the header checkbox it selects all rows of the datatable, and not only the one of the page. I have a datatable with more then 200 pages, so you can imagine it is a very tedious job to export all of the when using a paginator ;).
I suppose it is a bug I should log, or am I missing something? I looked through the documentation but it says nothing about using multiple selection mode together with pagination... Thanks for your feedback!
I had the exact same requirement - select all rows across pages.
What I did - provided an <p:inputSwitch /> to toggle all rows across all the pages.
Copied and is as below -
<p:dataTable id="id" var="var" widgetVar="wvar" rowsPerPageTemplate="7,15" reflow="true"
value="#{backingBean.dataModel}" paginator="true" rows="7" rowIndexVar="index" rowKey="#{var.id}"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
selection="#{backingBean.selectedItems}">
<c:facet name="header"...
<p:inputSwitch value="#{backingBean.allRecords}" onLabel="All" offLabel="None" >
<p:ajax onstart="if (PF('wvar').getSelectedRowsCount() == 0) PF('wvar').selectAllRows(); else PF('wvar').unselectAllRows();" />
</p:inputSwitch>
private boolean allRecords;//Getter++Setter++
And, defined toggleSelect event as below -
<p:ajax event="toggleSelect" onstart="if (PF('wvar').getSelectedRowsCount() == 7 || PF('wvar').getSelectedRowsCount() == 15) PF('wvar').selectAllRows(); else PF('wvar').unselectAllRows();" />
where 7 and 15 comes from the datatable rowsPerPageTemplate="7,15".
Works for me.(PrimeFaces 5.3)
FOR JSF 2 ,for selected all rows on datatable in selectionMode multiple with paginator=true:
In Page
<p:dataTable widgetVar="tableArea" yourtags...>
<p:ajax event="toggleSelect" oncomplete="teste()" /> /// toggleSelect is dispared on click to checkbox header
<p:column id="columnId" selectionMode="multiple"/>
In js:
function teste(){
var checked = $(document).find(":checkbox")["0"].checked; ///Find checkbox header and verify if checkbox is checked
if(checked == true){
PF('tableArea').selectAllRows(); // if true, selectAllRows from datatable
} else {
PF('tableArea').unselectAllRows(); //
}
}
Sample Code:-
**JAVA (your backing bean class)
==============================**
//Stores the checked items from data table.
private List<String> selectedIds = new ArrayList<>();
private List<String> getSomeList() {
// return list of strings to data table
return someList;
}
public void selectAllCheckboxes(ToggleSelectEvent event) {
if (selectedIds != null) {
selectedIds.clear();
if (event.isSelected()) {
selectedIds.addAll(someList); //Add all the elements from getSomeList()
}
}
}
**XHTML
=====**
<p:dataTable id="data-table-id" value="#{backingBean.someList}"
selection="#{backingBean.selectedIds}" rowKey="#{id}" var="id"
paginator="true" rows="10" paginatorPosition="bottom"
paginatorAlwaysVisible="false" rowSelectMode="checkbox"
rowsPerPageTemplate="10,20,30,50">
<p:column selectionMode="multiple" />
<p:ajax event="toggleSelect"
update="#this"listener="#backingBean.selectAllCheckboxes}"/>
</p:dataTable>
I expect that when i use the header checkbox it selects all rows of the datatable, and not only the one of the page.
This is a wrong expectation.
I suppose it is a bug I should log,
Nope.
or am I missing something?
No, it is by design. So other than having the wrong expectation you did not miss anything. The fact that you are the first one in SO to ask this and the second one if you count the number of requests in the PrimeFaces forum to is an indication of this.
Not even GMail does this btw. They give you the option to select all message on the page you are on, and when you do this they give you an additional option to select all messages across all pages