Primefaces datatable Identify if the current column is of date type - jsf

I am trying to make a common datatable using primefaces.
I want to check if the current column of datatable is of Date type. If it is a Date I want to add DatetimeConverter -
Here is my code -
<ui:component>
<p:dataTable id="#{tableId}" value="#{data}" var="row" styleClass="stdTable vertLines fndTable vertLinesRightBorder"
style="table-layout:fixed; border-color: #dddddd;">
<p:columns value="#{tableColumns}" var="column" sortBy="#{row[column.property]}">
<f:facet name="header">
#{column.header}
</f:facet>
#{row[column.property]}
</p:columns>
</p:dataTable>
</ui:component>
I am calling the above xhtml as follows-
<ui:include src="table.xhtml">
<mbcpos:param name="tableId" value="#{me.id}hTabel1" />
<mbcpos:param name="data" value="#{taskListBean.receivedOwnerTasks}" />
<mbcpos:param name="tableColumns"
value="#{me.columns}" />
</ui:include>
Can we identify the column datatype :
e.g., #{row[column.property]} equals Date
If the column is a date I want to format the date.

Your column model should be where you put the data type it holds and other data type presentation related things like masks, currency, alignment etc.
On the page, for each data type (according to your needs), inside the p:columns
you should do something like this:
<h:outputText rendered="#{column.dateType}" value="#{row[column.property]}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</h:outputText>

Related

JSF dataTable: conditional filter facets

I've got a dynamic dataTable and would like to display different filter types depending on the column but it seems that I can only use one object within a filter facet at a time. If I try to use multiple input types I get a
java.lang.ClassCastException: javax.faces.component.UIPanel cannot be cast to javax.faces.component.ValueHolder
My current (not working) code looks like this:
<f:facet name="filter">
<p:inputText onkeyup="PF('myTable').filter()" rendered="#{column.filterType=='TEXT'}" />
<p:selectOneMenu onchange="PF('myTable').filter()" rendered="#{column.filterType=='LIST'}">
<f:selectItems value="#{column.filterMap}" />
</p:selectOneMenu>
</f:facet>
The inputText and selectOneMenus are displayed correctly, but I can't filter my table because of the ClassCast Exception.
If I only use one of the input types, the filtering works as expected.
Is it possible to conditionally show different filter facets or input types within the facet?
The only "solution" I found, is to always use selectOneMenus and make them editable and look like inputTexts if the filter type is "TEXT"
<p:selectOneMenu onchange="PF('myTable').filter()" editable="#{column.filterType=='TEXT'}" styleClass="#{column.filterType}">
following your 2nd comment I tested this code and it works; The idea is that the filter depends on the column, so:
<p:column filterBy="#{column.attribute}" filterMatchMode="contains" rendered="#{column.filterType=='TEXT'}" >
<f:facet name="filter">
<p:inputText onkeyup="PF('myTable').filter()" />
</f:facet>
</p:column>
<p:column filterBy="#{column.attribute}" filterMatchMode="equals" rendered="#{column.filterType=='LIST'}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('myTable').filter()" >
<f:selectItems value="#{column.filterMap}" />
</p:selectOneMenu>
</f:facet>
</p:column>
you show and hide the column, not the filter.
NB : The filter mode of an inputText is contains AND for a List is Equals.

Column header not visible when column is conditionally rendered

I have a h:dataTable. I would like to render a row conditionally as follows:
<h:dataTable value="#{myController.entities}" var="entity">
<h:column rendered="#{entity.selected}">
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" />
</h:column>
</h:dataTable>
In my controller there is variable List <Entity> entities which has getters and setters.
Entity class contains two variables : boolean selected and String name with its getters and setters.
When #{entity.selected} is false, then the row is hidden. When #{entity.selected} is true, then the row is shown, but without header. When I do not use the rendered attribute on the column my header becomes visible.
This question is similar to p:column header facet is not shown when rendered attribute is used on p:column
But none of the solution given works for me and Iam not using primefaces.
Can somebody help me with this? Iam new to JSF and the mistake might be something silly and fix fairly easy, but please help me figure it out. Thanks.
Iam posting the outputs that I get when I tried the above code.
**Header**
name 0
name 1
name 2
name 3
name 4
This output shows the datatable using simply <h:column> without trying to render it conditionally. The header can be seen.
Now when I use conditional rendering:
name 1
name 3
In this output Iam trying to use conditional rendering <h:column rendered="#{entity.selected}">. As you can see that for "name 0", "name 3" and "name 5" the #{entity.selected} is false and hence its not rendering.
This is exactly what I need but only if the header shows up.
I want to render my row invisible where the #{entity.selected} value is false. Also show the column header. Can this be possible?
You need to put the rendered condition on the cell, not on the column.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
<h:outputText value="#{entity.name}" rendered="#{entity.selected}" />
</h:column>
</h:dataTable>
Or, if you've multiple components or plain text representing cell content, wrap it in a <h:panelGroup> or <ui:fragment>.
<h:dataTable value="#{myController.entities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
<h:panelGroup rendered="#{entity.selected}">
Blah blah #{entity.name} blah blah
</h:panelGroup>
</h:column>
</h:dataTable>
(note: you don't necessarily need h:outputText over all place, see also Is it suggested to use h:outputText for everything?)
Apply if necessary the following CSS on the table to hide empty cells in case you've applied e.g. borders or bgcolors on table cells:
table {
empty-cells: hide;
}
A completely different alternative is to provide a new model which contains only the desired entities:
<h:dataTable value="#{myController.selectedEntities}" var="entity">
<h:column>
<f:facet name="header">
header
</f:facet>
#{entity.name}
</h:column>
</h:dataTable>
Instead of
...
<f:facet name="header">
<h:outputText value="header" />
</f:facet>
...
try simply
...
<f:facet name="header">Header</f:facet>
...

Masking numbers in PrimeFaces datatable

Related to the question Display formatted decimal numbers in Primefaces 4, how can I display - in a PrimeFaces datatable - a number masked like this:
1.987.654,32
The original data, which are read from a float column in SQLServer database table, is (e.g.):
1987654.32
I've tried the code below, but no success:
<p:column sortBy="#{item.value}" filterBy="#{item.value}">
<f:facet name="header">
<h:outputText value="#{epoBundle.ListUpbTitle_value}"/>
</f:facet>
<h:outputText value="#{item.value}">
<f:convertNumber pattern="#0.000" locale="pt_BR"/>
</h:outputText>
</p:column>
Thanks in advance.
The correct pattern for the <f:convertNumber .../> you want is: ###,###.000. You can read more about decimal formatting here: http://docs.oracle.com/javase/tutorial/i18n/format/decimalFormat.html
Bonus: for different masks, you can use other locales: https://stackoverflow.com/a/11836387/1362049

p:selectOneMenu, custom content and editable=true

I have the following usage of the p:selectOneMenu:
<p:selectOneMenu id="selectField"
value="#{someBean.someField}"
converter="#{selectItemConverter}" var="x" editable="true">
<f:selectItems
value="#{selectItemsBean.getSelectItems(tab, field)}" var="si"
itemLabel="#{si.label}" itemValue="#{si}" />
<p:column>
<h:outputText value="#{si.label}" />
</p:column>
<p:column>
<h:graphicImage library="images" name="noway_16x16.png"
title="#{si.disabledReason}" rendered="#{si.disabled}" />
</p:column>
<p:ajax event="change" update="#form" partialSubmit="true" process="selectField" />
</p:selectOneMenu>
As you can see, I use custom content in combination with editable=true. When I submit the form, the Converter gets the label of a selected item as the value, not the actual value. In the HTML page, the values are correct, e.g. <option value="C">C-style mounting</option>. With editable=false, the correct value (e.g. C is sent to the converter, with editable=true the converter retrieves C-style mounting.
What I want is that the user can either select one of the pre-defined items in the list and the server submits that value of the item OR the user enters something and that is submitted as value. But the current behavior is a bit strange - or am I just wanting too much?

convert screen into primefaces data table

I need to create a datatable in jsf using primefaces where i need to have one row in which one column contains static data with one button.When i will click on this button then the other columns(within the same row) should display some input text fields with label and data should be populated from database.It means if there are two records coming, then the column in that row should get spanned into the number of rows according to number of records.It means one column will be static and other column in that row should get dynamically spanned and some components should be added in the column within the row.please help me how to do this?
Hi somewhere down the line I found some sample code for dynamically creating rows, further u can nest it as required.
<p:column>
<f:facet name="header">
<h:outputLabel value="Field 2" />
</f:facet>
<h:outputLabel value="#{myTableVar.Field2}" />
</p:column>
<f:facet name="footer">
<p:commandButton value="New" action="#{myBean.prepareForInsert}" update=":myForm:myPanel"/>
</f:facet>
</p:dataTable>
<h:panelGrid id="myPanel" columns="2" >
<h:outputLabel value="Field 1"/>
<p:inputText id="fld1" value="#{myBean.newRec.field1}" />
<h:outputLabel value="Field 2"/>
<p:inputText id="fld2" value="#{myBean.newRec.field2}" />
<p:commandButton action="#{myBean.createAction}" value="Submit" update="myGrowl myTable" />
</h:panelGrid>
When New button is clicked, create an emty instance of newRec in prepareForInsert routine of myBean. So that myPanel is filled with blanks in the fields. On Submit, add the newRec to list_Recs and the new record is diplayed in the data table because of the update on myTable. Hope this helps.

Resources