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.
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 ?
I have a form that has a few fields that take input from the user. That input is then used to generate a dataTable that is being populated via Hibernate with info from the database, according to the options/fields selected by the user in the initial form.
I need to somehow generate a dropdown menu for a specific record that is being clicked on, and then download that record in a specific file format (I already kind of have a similar method for doing this made by someone else).
Here's how my dataTable looks like:
<h:form id="form2">
<t:dataTable binding="#{table}" rendered="#{searchArhivaUIBean.renderTable}" value="#{searchArhivaUIBean.nonEdiAbstractList}"
var="dataItem" border="0" cellspacing="2" width="100%" id="tdtbl"
headerClass="tableHeader" rowClasses="rowOdd,rowEven" columnClasses="Column">
<t:column>
<!-- display currently selected row number -->
<f:facet name="header">
<t:outputText value="Nr"/>
</f:facet>
<t:outputText value="#{table.rowIndex + 1}"/>
</t:column>
<t:column>
<f:facet name="header">
<t:outputText value="Data Mesaj"/>
</f:facet>
<t:outputText value="#{dataItem.dataMesaj}">
<f:convertDateTime timeZone="#{tzUIBean.tz}" pattern="dd.MM.yyyy" />
</t:outputText>
</t:column>
<t:column>
<f:facet name="header">
<t:outputText value="Numar Mesaj"/>
</f:facet>
<t:outputText value="#{dataItem.numarMesaj}"/>
</t:column>
<t:column>
<f:facet name="header">
<t:outputText value="Societate Sender"/>
</f:facet>
<t:outputText value="#{dataItem.societateSender}"/>
</t:column>
<t:column>
<f:facet name="header">
<t:outputText value="Societate Receiver"/>
</f:facet>
<t:outputText value="#{dataItem.societateReceiver}"/>
</t:column>
</t:dataTable>
</h:form>
This will generate a dataTable, populated with items. Any ideas on how can I make now a dropdown appear as I click a message (either the "Nr" column (the first column in the dataTable)) or the "Numar Mesaj" column? I need the dropdown to appear underneath that specific row in the dataTable, so I can choose the file format from that dropdown and download that specific record as a .pdf, .xls or whatever else type of file.
At least, this is how I thought it to work. Any ideas are appreciated.
Well, it would much easier to do with proper JSF framework like for instance Prime Faces. They have dedicated components for that kind of stuff.
With default JSF it will be a chunk of job. I can imagine something like that:
First you need to make one of your columns clickable with for instance h:commandLink. This (click) action may change special flag(s) which will be used to show an extra row with formats.
Next step is making extra rows for each data row where second row is hidden (by above flags). Clicking the link in your column will show that extra row with formats.
It seems the only difficulty is to show just 1 row, not all of them so the event and flags need to quite clever. You have to track the current row selection and use it when showing an extra row.
I'm working on a PrimeFaces project, where I choose to use a p:DataTable inside a p:DataGrid. The DataTable has the selectionMode attribute set to "multiple". I have a button on the page and when I click on it, I want to get all the selected checkboxes inside the various generated tables. All the checkboxes bring the same type of information (they are in different tables because of an information grouping scheme I use in the project).
Since I have multiple DataTables in the final rendered page, how can I get the selected checkboxes? I tried using the selection="#{myBean.selectedOptions}" attribute of the DataTable, but it seems to get just one of the generated tables' selected options (aparently the first one). What can I do to get the selected options of all tables generated by the p:DataGrid? Javascript? Is there any point I'm missing in the DataTable behavior?
(Well.. I don`t know whether I was able to make myself clear enough - English is not my native language).
[edited]
More information:
The number o DataTables generated is variable
I tried using the jsf visit method to traverse the user interface component view as shown here, looking for all checkboxes inside the DataGrid, but it couldn't find any of the checkboxes (I printed out to the console all the elements found). I think it's because the checkboxes are encapsulated in DataTable component. This made me think about not using the selectionMode="multiple" and, instead, manually add the checkboxes and a hidden input element for each one so I can find the checkboxes (or the "input hidden") using the visit method. The sad part of this aproach is that I'd have to stop using some good stuff of the DataTable selectionMode="multiple" feature, like hilighting the row if the corresponding checkbox is checked, and the ready to use "check all" checkbox it automatically put in the header of the ckeckboxes column.
I tried using a nested List in the selection attribute, but it didn't work. The main idea was using something like selection="#{bean.myListOfLists.get(t.counter)}". The "counter" variable is taken from the very object that is used to fulfill the current row of the DataTable (represented by the t variable in the attribute var="t"). The DataTable seems to not accept this approach. It doesn`t fulfill the nested lists.
I tried using the above approch with a modification: instead of a list of lists, a build a new class "B" and made a list of B (selection="#{bean.myListOf_B_Objects.get(t.counter).listInsideBObject}"). The result is simliar to the last approach: none of the lists inside the B objects were fulfilled.
Below there is a simplified view of what I did (more similar to the last case, but it's just to get the big picture)
<p:dataGrid var="gridCellContent"
value="#{myBean.dataGridContent}"
layout="grid" id="id01" columns="3"">
<p:dataTable var="something"
value="#{gridCellContent.listOfSomething}"
rowKey="#{something.id}"
selection="#{myBean.listOf_B_Objects.get(gridCellContent.counter).listInside_B_Object}">
<p:column selectionMode="multiple" />
<p:column>
<h:outputText value="#{something.sometext}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton id="btnSave" value="Save"
actionListener="#{myBean.btnSave}"/>
</f:facet>
</p:dataGrid>
[edited 2] Following #JaqenH'ghar's sugestion I tried out the modifications below, which unfortunately still din't work:
<p:dataGrid var="gridCellContent"
value="#{myBean.dataGridContent}"
layout="grid" id="id01" columns="3"
rowIndexVar="count">
<p:dataTable var="something"
value="#{gridCellContent.listOfSomething}"
rowKey="#{something.id}"
selection="#{myBean.listOfLists.get(count)}">
<p:column selectionMode="multiple" />
<p:column>
<h:outputText value="#{something.sometext}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton id="btnSave" value="Save"
actionListener="#{myBean.btnSave}"/>
</f:facet>
</p:dataGrid>
And for myBean:
#ManagedBean
public class MyBean {
...
private List<List<Something>> listOfLists = new ArrayList<List<Something>>();
public List<List<Something>> getListOfLists(){
this.listOfLists.add(new ArrayList<Something>());
return this.listOfLists;
}
public void setListOfLists(List<Something> listOfSomething) {
this.listOfLists.add(listOfSomething);
}
...
}
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 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>