I'm trying to add a filter to the header of each column in an existing rich:datatable in JSF. I used the Exadel demo to add the filters, which worked out just fine, but it also removed the sort functionality from the upper header. I'd like to keep the sort function in the upper label header and filter on the second inputText header.
As a quick and dirty example, this is the basic structure:
<rich:dataTable id="thetable" value="#{stuff.list}" var="s">
<f:facet name="header">
<rich:columnGroup>
<rich:column sortBy="#{s.field1}">
<h:outputText="Field 1" />
</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>
<f:facet name="header">
<h:inputText value="#{stuffSorter.field1}">
<a4j:support event="onkeyup" reRender="thetable" ignoreDupResponses="true"
requestDelay="700" onComplete"setCaretToEnd(event);" />
</h:inputText>
</f:facet>
</rich:column>
</rich:dataTable>
There would be more columns, of course, and setCaretToEnd is just a Javascript function that keeps the caret at the end of the column filter. This is almost just right. I get two headers. The one at the top is the column label, the one just below is the filter, and the results are listed below that. I've built out the filtering class and it's working splendidly. However, I can't seem to find a way to get the sort function back into the topmost header. It does work if I put the "sortBy" field next to the filter box, but I'd much rather have it above, but it seems that the data being inserted in the filter column is preventing that.
Am I missing something here, or is this just not quite possible with a rich:dataTable? I'd be okay with the name + sort and then the filter on top of each other within the same header, but I'm not having luck with that, either. Trying to put both elements into the facet (outputText and inputText) never shows the outputText, even when wrapping them individually with an s:div. I'd use a bean for sorting, but strangely, the project I'm working in is using Richfaces 3.3.3 and lacks org.richfaces.component.SortOrder, although it has a number of other items within the richfaces-ui-3.3.3-final.jar.
In Richfaces 3.3, header and filter facet are supported. The content which you put in the header facet will appear at the top. Filter code you can place inside the filter facet which will appear below header. Please check this questions :Filter Facet is not working in Richface 4.3x, old format of richfaces 3.3 is shown there.
<f:facet name="filter">
</f:facet>
Related
In a project, I have to merge two datatables (the first to set the header of the second and the second displaying the informations contained in an uploaded file) into one to simplify the legibility on the page.
Since the first datatable was using a cellEditor I tried using one in the merged one the following way for the header:
<f:facet name="header">
<p:cellEditor>
<f:facet name="output">
<h:outputLabel id="output" value="some text" />
</f:facet>
<f:facet name="input">
<p:selectOneMenu value="#{handler.selectItems}">
<!-- List of selectItems -->
<p:ajax event="change" update="output" />
</p:selectOneMenu>
</f:facet>
</p:cellEditor>
</f:facet>
But when I build the project and click on the header of my columns, I don't have any list of selectItems appearing to give me the possibility to change the header. It was used in <p:column> before without problem so I imagine the <f:facet> is the problem
I succesfully made the possibility to change the value of the header using <p:inplace> instead, but it doesn't behave exactly like I want.
I want that even if I don't modify the value when I click on the header (and make the list appears), I can click somewhere on the page and make the list disappear to have a "clean" header. I don't really want to use the editor="true" option of inplace because the goal is also to try to reduce the number of click needed for the user. I also made it a bit using <p:ajax event="blur" update="output" /> but some value of the list of selectItems make one or two inputText appear. And with that event, when I click in the text box, it closes the field automatically and I can only the value of the field once. After, the moment I click on the list to open it, it closes the field.
How can I fix that ?
Is it possible to flip datatable in primefaces, in order to have headers in the left not in the top?
I have following table:
<p:dataTable value="#{rolesMgmt.listOfMapsRoles}" var="map" id = "dataTable">
<p:columns value="#{rolesMgmt.columns}" var="column">
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{map[column.property]}" />
</p:columns>
</p:dataTable>
As you see, I have a lot of headers and 2-3 rows and I need to flip this table
No this is not possible by using some attribute on the p:dataTable itself. For this to be achieved you need to transpose your model. Maybe you can achieve something by manipulating the responsiveness. But if you have lots of columns AND lots of rows, maybe you should think of just displaying a 'summary' in a datatable and have a details view.
Or use a p:datagrid (showcase) where you can sort of free-format your records or a plain ui:repeat? Since you do not seem to need sorting/filtering etc in this case. The p:datatable seems overkill to me now
It's not possible to flip the table.
Why don't you take a look to the ColumnToggler?
You can temporarly reduce the width of the table and then, on demand, add other columns.
I'm trying to dynamically display the columns of a p:dataTable: the server dictates which columns are displayed and in which order. It doesn't look like I can set a dynamic order using the regular p:column tag so I'm stuck using the p:columns tag. The problems with the p:columns tag are:
1) The example in the showcase shows it working with String data, where you can map a column name to a field and then use an expression language map to retrieve the data (like a pseudo-getter)
http://www.primefaces.org/showcase/ui/data/datatable/columns.xhtml
If I have different data types though, then I'm probably stuck with a bunch of panels with render attributes based on the type of the data (display Strings one way, display User objects another way, etc).
Example:
<p:dataTable value="#{myBean.rows}" var="row">
<p:columns value="#{myBean.columns}" var="column">
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<!-- The content of the cell is dynamic based on the type of the field -->
<!-- display a String field -->
<h:outputText rendered="#{myBean.isStringType(column.header)}"
value="#{row[column.property]}"/>
<!-- display a Person field -->
<h:outputText rendered="#{myBean.isPersonType(column.header)}"
value="#{row[column.property].name}, #{row[column.property].email}"/>
</p:columns>
</p:dataTable>
2) p:columns only supports a single sortFunction/filterFunction for all columns. Since these columns all have different types of data, they will require many different sorting and filtering methods
A p:column easily allows for the display of different data types as well as the sorting/filtering of the data. The only thing it can't do is have a dynamic order.
Unless I'm missing something? Is there a way to get this to work with p:column ? Or is there an elegant way to have p:columns handle all of this?
It doesn't look like I can set a dynamic order using the regular p:column tag so I'm stuck using the p:columns tag.
If the #{myBean.columns} columns model is constant during at least the view scope, then you'd better use <c:forEach><p:column><c:choose>. It's faster than <p:columns>+rendered, and allows more dynamic freedom as you can declare every <p:column> individually depending on the type instead of having only one <p:columns> whose state changes every iteration round.
<p:dataTable value="#{myBean.rows}" var="row">
<c:forEach items="#{myBean.columns}" var="column">
<c:choose>
<c:when test="#{column.type eq 'STRING'}">
<p:column sortBy="#{row[column.property]}" filterBy="#{row[column.property]}">
#{row[column.property]}
</p:column>
</c:when>
<c:when test="#{column.type eq 'PERSON'}">
<p:column sortBy="#{row[column.property].name}" filterBy="#{row[column.property].name}">
#{row[column.property].name}, #{row[column.property].email}
</p:column>
</c:when>
...
</c:choose>
</c:forEach>
</p:dataTable>
See also:
JSTL in JSF2 Facelets... makes sense?
How to create dynamic JSF form fields
I'm using <p:dataTable> to show the values of my files. Inside of each file is a list of metadates. I want to show each metadate as an own column beside the other columns of the file. (I excluded the other columns to make the code more readable).
So, my problem is, that with the <p:dataList> it does not show the columns. The name of the meta is the same in every metadata, if someone believes this to be the problem.
I already tried to use <p:dataTable> instead of <p:dataList>, but as my customer originally wanted to have the metadata shown as own column this would not be my preferred way, but on the other hand it is working.
<p:dataTable id="fileList" var="f" value="#{reader.files}" rendered="#{reader.showFileTable()}">
<p:dataList value="#{f.meta}" var="meta1">
<p:column>
#{meta1.value}
</p:column>
</p:dataList>
<p:column headerText="Metadaten">
<p:dataTable value="#{f.meta}" var="meta">
<p:column headerText="#{meta.name}">
#{meta.value}
</p:column>
</p:dataTable>
</p:column>
</p:dataTable>
I am really grateful for any help, how I could make the code work so that each metadate has it's own column in the fileList-dataTable.
P.S: I already tried c:forEach and ui:repeat which also didn't work.
P.P.S: I forgot to mention, that my customer sometimes don't want to see specific metadates, so it would be very nice when it is possible to do this with the suggested solution.
You can build columns dynamically in primefaces by using the <p:columns> tag see the vdl
check the primefaces showcase for an example
Suppose you have this code:
<p:dataList id="fileList" var="f" value="#{reader.files}">
<p:dataTable value="#{f.listItems}" var="meta1">
<p:column>#{meta1.value}</p:column>
<p:columns value="#{meta1.listItems}">...</p:columns>
</p:dataTable>
</p:dataList>
Dynamic columns in nested dataTable are not generated: it seems p:columns cannot refer var like "f" and "meta1".
I can understand "meta1" is not visible, because it's producing header's table, but I really can't understand why "f" is not visible at that time.
Any idea? Thanks.
Good Afternoon,
I am trying to use the composite filter but in vain. While we struggled the whole day trying to know that it does not work if the table contains a column with action buttons and no data type, now we are wondering why it does not render the text field for the user to type his filter criteria.
We click on the (+) button = A drop
down with column names is rendered.
2- From this dropdown, we choose a
column.
3- A 'NOT' checkbox and Another
dropdown with expressions (equals,
contains...etc) is rendered.
4- We choose an expression from the
list.
5- The input text field supposed to be rendered is not rendered at all.
Which makes the composite filter non usable as the user cannot type his search criteria!
Please help.
<div>
<h:form>
<o:compositeFilter id="bookfilter" for="bookstable" autoDetect="true"/>
<o:dataTable id="bookstable" sortColumnId="title" value="#{bookController.items}" var="item" >
<o:singleRowSelection />
<f:facet name="header">
Book TABLE
</f:facet>
<f:facet name="columnMenu">
<o:columnMenu/>
</f:facet>
<o:column id="title" sortingExpression="#{item.title}" header="title">
<h:outputText value="#{item.title}"/>
</o:column>
<o:column id="topic" header="topic">
<h:outputText value="#{item.topic}"/>
</o:column>
<o:column id="writer" header="writerid" >
<h:outputText value="#{item.writer}"/>
</o:column>
</o:dataTable>
Appearently It is a bug affecting versions of Mojarra ulterior to 2.0.3 (2.0.4+).
http://requests.openfaces.org/browse/OF-81
And not fixed yet in the nightly builds.