Primefaces exporting only one expandable table - jsf

I am trying to export a view to xlsx using PrimeFaces extensions. I have a main table and an expandable row with 2 tables inside.
The exporter works fine for the first dataTable in the expandable row, but not for the other one. Any ideas?
<p:dataTable id="mainTable" var="mainObject" value="#{mainBean.mainList}">
<p:column exportable="false" width="5%">
<p:rowToggler />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="main column A"/>
</f:facet>
<h:outputText value="#{mainObject.columnA}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="main column B"/>
</f:facet>
<h:outputText value="#{mainObject.columnB}" />
</p:column>
<p:rowExpansion>
<p:datTable id="relatedTableA" var="relatedA" value="#{mainObject.relatedA}">
<f:facet name="header">
<h:outputText value="Related A"/>
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Related A column A"/>
</f:facet>
<h:outputText value="#{relatedA.columnA}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Related A column B"/>
</f:facet>
<h:outputText value="#{relatedA.columnB}" />
</p:column>
</p:dataTable>
<p:datTable id="relatedTableB" var="relatedB" value="#{mainObject.relatedB}">
<f:facet name="header">
<h:outputText value="Related B"/>
</f:facet>
<p:column>
<f:facet name="header">
<h:outputText value="Related B column A"/>
</f:facet>
<h:outputText value="#{relatedB.columnA}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Related B column B"/>
</f:facet>
<h:outputText value="#{relatedB.columnB}" />
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
<h:commandLink>
<p:graphicImage url="/resources/images/Excel32.png" width="32"/>
<pe:exporter type="xlsx" target="mainTable" fileName="fileExport" facetBackground="#AAFFBB" datasetPadding="4" />
</h:commandLink>
I followed this guide: https://www.primefaces.org/showcase-ext/sections/exporter/expandableTable.jsf
In my app, the view works perfect. I use the toggle and then it shows the 2 tables. The only problem is that it exports only one of the expandables.
Thanks for your time.

Seemes this is simply not supported.
In the exporter component source code when it comes to exporting the row expensions they have hard coded to consider the first child for each rowExpansion only:
if (rowExpansion.getChildren().get(0) instanceof DataTable) {
final DataTable childTable = (DataTable) rowExpansion.getChildren().get(0);
// ...
}
This is why you only get the first sub table in your output.
Using the customExporter feature you have the chance to extend the ExcelExporter and override the method exportCells which seemes responsible for your problem. Then change the behavior to do a loop on rowExpansion.getChildren() instead of just getting the first element.
General steps to configure a custom exporter from the linked site:
Step 1: Create a folder named META-INF under resouces folder.Below
META-INF folder create another folder called services.
Step 2: Creae a
file with the name "ExporterFactory" as a service(Fully binary name of
the service).
Here it should be org.primefaces.extensions.component.exporter.ExporterFactory.
Step 3:
Provide your own implementaions/providers of Exporter factory anywhere
in your project.
And copy the absolute path of custom exporter factory implementation in the ExporterFactory file
How to do : Copy the file content of DefaultExporterFactory and rename the file as CustomExporterFactory.Copy the absolute path
org.primefaces.extensions.showcase.util.CustomExporterFactory in
ExporterFactory file.
Step 4: Copy the exporter implementations and
add your own changes.And call these custom implementations(Ex
PDFCustomExporter,ExcelCustomExporter) instead built-in
implmentations(Ex PDFExporter,ExcelExporter)

Related

PrimeFaces dataTable with variable columns and specific editable cells

I need to create a table where the headers list are brought from a model. The table contents are also stored in the model and p:dataTable loop on the data to show the content based on the column name.
The issue is that I need to make some specific cells editable. For outputting data there is no problem since I use model method which takes both the entity and the column name and return the correct info from the entity based on the column name. The issue is with inputs of the editable cells which I don't know how to set in the entity.
<p:dataTable id="processTable" var="entity" value="#{home.process.headerEntities}" tableStyle="width:auto" draggableColumns="true" editable="true" editMode="cell">
<p:columns value="#{home.process.columns}" var="columnHead" >
<f:facet name="header">
<h:outputText value="#{columnHead}"/>
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{home.process.getData(entity, columnHead)}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{home.process.getData(entity, columnHead)}" rendered="#{home.process.isEditable(columnHead)}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:columns>
</p:dataTable>
After change based on BEST ANSWER
<p:dataTable id="processTable" var="entity" value="#{home.process.headerEntities}" tableStyle="width:auto" draggableColumns="true" editable="true" editMode="cell">
<p:columns value="#{home.process.columns}" var="columnHead" >
<f:facet name="header">
<h:outputText value="#{columnHead}"/>
</f:facet>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{entity[home.process.columnPropertyMap[columnHead]]}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{entity[home.process.columnPropertyMap[columnHead]]}" rendered="#{home.process.isEditable(columnHead)}" style="width:100%" />
</f:facet>
</p:cellEditor>
</p:columns>
</p:dataTable>
The input component's value must be bound to a writable value expression. What you've there is a direct getter method invocation and thus essentially read-only. This is indeed not going to work. You need to specify a property name of the #{entity}. You can use the brace notation to specify the property name as a variable like so #{entity[propertyName]}.
So, basically:
<p:dataTable value="#{bean.entities}" var="entity" editable="true" editMode="cell">
<p:columns value="#{bean.propertyNames}" var="propertyNames">
<p:cellEditor>
<f:facet name="output">
#{entity[propertyName]}
</f:facet>
<f:facet name="input">
<p:inputText value="#{entity[propertyName]}" />
</f:facet>
</p:cellEditor>
</p:columns>
</p:dataTable>
As to the column header, rather refactor out that into a Map<String, String> where the key is the propertyName and the value is the header.
<f:facet name="header">
#{bean.columnHeaders[propertyName]}
</f:facet name="header">
Or better yet, use a normal i18n resource bundle for that where the propertyName represents part of the bundle key.
<f:facet name="header">
#{bundle['table.column.header.' += propertyName]}
</f:facet name="header">
As to the editable check, rather wrap propertyName and editable in another bean (and perhaps also columnHeader if you don't want to use a i18n bundle), e.g. Field and then use like below:
<p:columns value="#{bean.fields}" var="field">
<p:cellEditor>
<f:facet name="output">
#{entity[field.propertyName]}
</f:facet>
<f:facet name="input">
<p:inputText value="#{entity[field.propertyName]}" rendered="#{entity[field.editable]}" />
</f:facet>
</p:cellEditor>
</p:columns>
All in all, it just boils down to preparing and providing the right model the view expects. This way the getData() thing isn't necessary.

Insert textbox in datatable but having difficulty to save all the records

Hi i am adding a textbox in a datatable where the user will input data in each row. I need help on how to save the data...because right now it's saving only the last row. Please see code below, can someone help on this? I think there should be some sort of array but i dont know if it is possible to store value in array using el expression. I implemented a nested datatable since i want the data to be side by side. If you have a better idea other than using datatable , I would be glad if you could share it and give proper instruction on how to proceed. ( but it should be side by side)
Thanks in advance
<p:dataTable id="dta" value="#{MyCarComponent.model}" var="cur" rows="15" >
<p:column>
<f:facet name="header">
<h:outputText value="Model:" />
</f:facet>
<h:outputText value="#{current.cptModel}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Type:" />
</f:facet>
<p:dataTable id="dta1" value="#{cur.type}" var="curType" rows="15" >
<p:column>
<h:outputText value="#{curType.cptType}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Origin:" />
</f:facet>
<h:form>
<p:dataTable id="dta3" value="#{curType.origins}" var="curOrigin" rows="15" >
<p:column>
<h:outputText value="#{curOrigin.origin}" />
</p:column>
<p:column>
<h:inputText
value="#{MyCarComponent.origindetails.country}"/>
</p:column>
</p:dataTable>
</h:form>
</p:column>
</p:dataTable>
</p:column>
<f:facet name="footer">
<p:commandButton image="save" ajax="false" value="Save" action=" #. {Mycar.saveMyCar(curOrigin.origin,MyCarComponent.origindetails)}" />
</f:facet>
You're currently binding the input field of all rows to one and same bean property. So when JSF processes the form submit in the same sequence as the component tree, the value of each input field will be set in this one and same property. Of course the property will end up being the one of the last row.
You just need to bind the value of the input field to the currently iterated row, the #{curOrigin}. E.g.
<h:inputText value="#{curOrigin.country}" />
Just create the property of there if it doesn't exist yet.

JSF Primefaces datatable match mode for global filter (not individual column)

What is the filter match mode for global filter (not the individual column filter which defaults to 'startsWith') and how to change it?
The reason I ask is, when I use the global filter with match mode set to 'startsWith' in all my columns, still I get values with 'contains' filter mode. See screenshot below.
I shouldn't be getting the rows other than the first row as I specified 'startsWith' in all columns.
Here is my datatable,
<h:form id="countryTable">
<p:dataTable rowKey="" value="#{countryBean.countriesList}"
var="country" selection="#{countryBean.selectedCountries}"
styleClass="data-table-style" widgetVar="countryTableWVar"
filteredValue="#{countryBean.filteredCountries}">
<f:facet name="header">
<div class="align-left">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="countryTableWVar.filter();"
style="width:150px" />
</p:outputPanel>
</div>
</f:facet>
<p:column selectionMode="multiple" style="width:2%;" />
<p:column headerText="Numeric Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="numericCode">
<h:outputText value="#{country.numericCode}"></h:outputText>
</p:column>
<p:column headerText="Alpha_2 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha2">
<h:outputText value="#{country.alpha2}"></h:outputText>
</p:column>
<p:column headerText="Alpha_3 Code" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="alpha3">
<h:outputText value="#{country.alpha3}"></h:outputText>
</p:column>
<p:column headerText="Name" filterMatchMode="startsWith"
filterStyle="display:none" filterBy="name">
<h:outputText value="#{country.name}"></h:outputText>
</p:column>
</p:dataTable>
</h:form>
How to change the datatable global filter match mode?
If you look at the source code of primefaces
org.primefaces.component.datatable.feature.FilterFeature.java
At line 133 you can see primefaces uses contains method of String
if(columnValue.toLowerCase(filterLocale).contains(globalFilter)){
globalMatch = true;
}
So for now there is no way other than changing code according to your needs and building your own primefaces jar.
From Primefaces 4.0 docs:
Filter located at header is a global one applying on all fields, this is implemented by calling client
side API method called filter(), important part is to specify the id of the input text as globalFilter
which is a reserved identifier for datatable.
The use case would be:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="PF('carsTable').filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="model" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
<p:column filterBy="year" headerText="Year" footerText="startsWith">
<h:outputText value="#{car.year}" />
</p:column>
<p:column filterBy="manufacturer" headerText="Manufacturer"
filterOptions="#{carBean.manufacturerOptions}" filterMatchMode="exact">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column filterBy="color" headerText="Color" filterMatchMode="endsWith">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
It doesn't tell anything about startsWithor endsWith specific cases for global filter. It could be interesting to open a thread on the issue tracker.

Datatable does not update after rows removed

i have a datatable using the primefaces library, and while i have got all the functions working i have just one small issue, when i press the command link to remove the row, it works and the row gets removed but it does not automatically update the datatable to reflect this, ideally what i want is when the user presses the delete button it automatically updates the datatable to show this, how can i achieve this ?
here is the datatable
<p:dataTable id="UserTable"
widgetVar="usersTable"
value="#{userdetailsController.items}"
var="item"
emptyMessage="No details was found with given criteria">
<!--filteredValue="{userdetailsController.filteredUsers}" -->
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields: " />
<p:inputText id="globalFilter" onkeyup="usersTable.filter()" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="USERID" filterBy="id"
headerText="i.d."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_id}"/>
</f:facet>
<h:outputText value="#{item.id}"/>
</p:column>
<!--There are four different match modes, "startsWith"(default), "endsWith", "contains" and "exact"-->
<p:column id="USERNAME" filterBy="username"
headerText="username."
filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListUserdetailsTitle_username}"/>
</f:facet>
<h:outputText value="#{item.username}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
<p:commandLink action="#{userdetailsController.prepareView}" value="#{bundle.ListUserdetailsViewLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.prepareEdit}" value="#{bundle.ListUserdetailsEditLink}"/>
<h:outputText value=" "/>
<div class="divider"/>
<p:commandLink action="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}"/>
</p:column>
</p:dataTable>
You need to use the update attribute of the p:commandLink to tell PF you want to do the ajax request to obtain all data related to table UserTable like this:
<p:commandLink actionListener="#{userdetailsController.destroy}" value="#{bundle.ListUserdetailsDestroyLink}" ajax="true" update="UserTable"/>
Make sure to use actionListener as it is called before action atrib. A more detailed example is here
http://www.primefaces.org/showcase/ui/commandLink.jsf
Per the documentation, you need to make a call to Draw() after you remove a row.
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'img.icon-delete', function () {
table
.row( $(this).parents('tr') )
.remove()
.draw();
} );

Cell edit in primefaces is not updating the value

I have a datatable in my primefaces application . The code for the frontend has
<!-- Start of customer datatable -->
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header">
List of Customers
<p:outputPanel>
<p:commandButton value="+" type="button" onclick="addCustDlg.show()"/>
</p:outputPanel>
</f:facet>
<p:column sortBy="#{customer.id}" filterBy="#{customer.id}" update=":custList">
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<h:outputText value="#{customer.id}"/>
</p:column>
<p:column sortBy="#{customer.name}" filterBy="#{customer.name}" headerText="NAME" filterMatchMode="contains" update=":custList">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.name}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.name}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.description}" filterBy="#{customer.description}" headerText="DESCRIPTION">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.description}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.description}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.signupDate}" filterBy="#{customer.signupDate}" headerText="SIGN UP DATE">
<f:facet name="output">
<h:outputText value="#{customer.signupDate}"/>
</f:facet>
</p:column>
<p:column sortBy="#{customer.validUntil}" filterBy="#{customer.validUntil}" headerText="EXPIRY DATE">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.validUntil}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.validUntil}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column sortBy="#{customer.status}" filterBy="#{customer.status}" headerText="STATUS">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{customer.status}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{customer.status}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="CREATION DATE" sortBy="#{customer.creationDate}" filterBy="#{customer.creationDate}">
<f:facet name="output">
<h:outputText value="#{customer.creationDate}"/>
</f:facet>
</p:column>
<p:column headerText="LAST UPDATE DATE" sortBy="#{customer.lastUpdateDate}" filterBy="#{customer.lastUpdateDate}">
<f:facet name="output">
<h:outputText value="#{customer.lastUpdateDate}"/>
</f:facet>
</p:column>
<p:column headerText="Options">
<p:rowEditor/>
</p:column>
</p:dataTable>
<!-- End of dataTable (customer datatable) -->
And the function for handling the rowEvent is specified in the bean as
public void custRowEdit(RowEditEvent event){
Customer cust = (Customer) event.getObject();
EntityManagerHelper.beginTransaction();
custDao.update(cust);
EntityManagerHelper.commit();
}
However , on an update event , when I am editing the cell in the table , I do not get the new updated value of the attribute .
Like in the image below , when I edit the status of the entry with ID 1 from 11 to 4 , in the function custRowEdit , when I try to get the customer object , I still get the status of the customer as 11 and not 4 .
Can anyone help me with understanding why the value of the cell is not being set ?
from Where You are invoking custRowEdit(RowEditEvent event) method. I have not any related thing in your code.
In order to make your listener invoke add below attribute in your datatable declaration.
rowEditListener="#{customerBean.listenerInBackingBean}"
<p:dataTable var="customer" value="#{customerBean.customers}" paginator="true" selection="#{customerBean.selectedCustomer}"
selectionMode="single" onRowSelectUpdate=":custList" onRowSelectComplete="custTab.show()" id="custList" widgetVar="custList" update=":custList">
<f:facet name="header"
rowEditListener="#{customerBean.cutRowEvent}"
>
Check the implementation of customerBean.customers. I reloaded the content from the database every time the method got called. Wrong. This should happen in the constructor instead. Now everything works fine. Thought it was a JavaScript error ...
Thanks this helped me.
May I add that instead of loading the list from a query in the constructor, if one has a #SessionScoped managed bean one can instead use a reset() method to reset lists to null and then lazily populate the lists from the query. The reset can then be called on page load using an f:event:
<f:view>
<f:metadata>
<f:event type="preRenderView" listener="#{sessionScopedBean.reset}"/>
</f:metadata>
</f:view>
I encountered a similar situation that was resolved by removing the update="" tag from the dataTable. The table's default behavior is to update the row, which evidently, in my case, was not occurring.
You are missin the p:ajax event to trigger the method, function or whatever you wanna do after the cell editing
it's something like
<p:ajax event="cellEdit" listener="#{mBean.onCellEdit}" update="elementX" />

Resources