I have the following code ( simplified ):
<p:tree value="#{treeBean.root}" var="node" filterBy="#{node.year}">
<p:treeNode>
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
With this solution I am able to filter the treenodes by year, but I am not satisfied in the way the input is requested. By default it's inputText and I do not see a way to change it. I want to have it in a way it's done here in year column ( https://www.primefaces.org/showcase-v8/ui/data/datatable/filter.xhtml ). But this solution does not work for tree filter.
Also, I have no control on the input type or placeholder.
This is how the filter input field looks now:
Solution to my case was just implementing custom filter functionality using controller class. Took a while, but seems like that's the only adequate approach to have full control of the tree filter visual design.
Related
I am trying to layout a page with Bootsfaces and JSF 2.2. I like to show only three column in a row and then start new row but don't know, how to implement this.
<h:form>
<b:container>
<b:row>
<ui:repeat value="#{ClientBean4.custs}" var="custs">
<b:column col-md="4"><h:outputText id="output" value="#{ClientBean4.counter}" /> </b:column>
<h:panelGroup rendered="#{ClientBean4.counter == 0}">
</b:row><b:row>
</h:panelGroup>
</ui:repeat>
</b:row>
</b:container>
</h:form>
after a long time, I wrote above code, but it's givng error like 'h:panelgroup' should be properly closed. It's giving meaning, that I started panelGroup and then closing a row, starting a new row, and then close panelGroup.
So, Is anyone have idea, how to implement a layout, where a row will have three columns (showing customer's object details per column), then close the row and start a new row. obvisouly, I dont know, how many objects will be in the list.
BootFaces offers a component that handles this. More specifically you can use <b:panelGrid columns="3"> to achieve this. This will give you a dynamic grid system that will grow vertically as you populate it but retain the number of rows that you specify.
You can see the component in action here, https://showcase.bootsfaces.net/layout/panelgrids.jsf
PrimeFaces also has a component for this, but I assume you want to use BootFaces as your original code uses it. If you prefer PrimeFaces, you can use the <p:dataGrid> component, which does something similar. This component even handles pagination.
I built a tree using Primefaces JSF and I need to add a filter, where it update the data of the tree according to what the user typed.
Does anyone know if this is possible ? I still can not find a solution.
Tree:
http://www.primefaces.org/showcase/ui/data/tree/basic.xhtml
Primefaces Tree support filters since Primefaces 6.1
<p:tree value="#{treeBasicView.root}" filterBy="#{node}" var="node">
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
https://www.primefaces.org/primefaces-6-1-final-released/
For older versions, see the other answer.
Before PrimeFaces 6.1 this was not possible IN the tree. On older versions just create an input field outside the tree and update the tree after calling a bean that server side updates the data for the tree based on the value of the input field.
I have been having trouble with the tag <f:facet>. I am working form other examples of code which use it, but I'm not sure exactly what purpose it serves.
I have written some code which in method is exactly the same as other code I have seen which works, except there's is wrapped in a <f:facet name=actions> tag. When I add this around my code the drop down box I am wrapping it around disappears when I deploy. Anyone able to suggest a reason for this or give me an insight into how and when to use facet?
Here is my code, I won't bother adding the bean code as they're just basic getters and setters and I don't think they're causing the trouble.
<f:facet name="actions">
<p:selectOneMenu id="SwitchWeekDrpDwnMenu"
value="#{depotWorkloadBean.selectView}"
partialSubmit="true">
<p:ajax update="mainForm"
listener="#{depotWorkloadBean.updateView}" />
<f:selectItem itemLabel="Day view" itemValue="Day"/>
<f:selectItem itemLabel="01/01/2014" itemValue="Week"/>
</p:selectOneMenu>
</f:facet>
If I remove the facet tag the dropdown box displays, but doesn't function as it should with the beans.
A facet represents a named section within a container component. For example, you can create a header and a footer facet for a dataTable component.
https://web.archive.org/web/20170828020413/http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_facet.html
It's useful when you want to create component that uses some code from user (let's say wrapper).
ie. when you want to create component that hides long text and shows short version of it. You can use just the element body, but then you will get only one value, if you want to get from user the short AND the long version then you can not do it in one value (without using some discriminant), just use facet and say which one is the long and which is the short version.
<textShortener>
<f:facet name="short">
This text is short.
</f:facet>
<f:facet name="long">
This text is too <b>long</b> to be showed when page loads. User have to click the button after the short text to show this.
</f:facet>
</textShortener>
Yes, this can (and should) be done with jsf templating, but I hope you got it.
To question: you defined facet just in the wild xml, nobody requested it so nobody processed it - that's why it did not throw error nor showed anything.
I have the following problem:
I get false / true values from my database in form of „0“ and „1“ strings.
Because I want to be nice :-) to my users, the output in my datatable shouldn't be zeros and ones.
So I use a graphic which represents the states zero and one.
I do it like this (inside p:datatable):
<p:column width="50" sortBy="#{report.arrived}">
<f:facet name="header">Report?</f:facet>
<p:graphicImage library="images"
name="#{report.arrived}.gif" />
</p:column>
So 0.gif is shown for false and 1.gif for true.
It looks like this:
My problem with the dataexporter from primefaces is that this column will be exported as
org.primefaces.component.graphicimage.GraphicImage#26bbdbd
Is there a way to change the exported value? Any ideas how I could get a graphical image and exporting the value?
I appreciate your help!
Specs:
JBoss 7.1
JSF 2.0
Primefaces 3.5
EDIT:
Solved, smiliar to this solution, thx to BalusC !
p:dataExporter does not recognize p:cellEditor
As per issue 4013, reported by yours truly, since PrimeFaces 3.5.25, 4.0.9 and 5.0 the data exporters have now additional support for <p:cellEditor> and <h:graphicImage>.
In case of <h:graphicImage>, the alt attribute will be used to represent the exported value. Additional bonus is, it forces you to make your website more accessible to the visually disabled ;)
E.g.
<p:graphicImage ... alt="#{report.arrived == '0' ? 'No' : 'Yes'}" />
By the way, you should here really better use a boolean or an enum instead of an int.
See also:
p:dataExporter does not recognize p:cellEditor
Being inspired with the article considering the dynamic table rendering (thank you BalusC), I've finally got the exact result I wanted before here a bit earlier. That gave quite perfect results since I could control the behavior of a every single column respecting the business logic requirements. But that was pretty cool if that table was a part of an experimental "static" page where I was making some dynamic binding experiments.
Once I had to merge the ideas to the existing code (more or less stupid knowing nothing about the dynamic expressions), I've got face to face with the following problem: the dynamic binding seems to work only once during the load of the page. Ok, I thought that I was missing to separate the dynamic binding bean and the "main" page bean (controlling user actions like clicking the tree nodes by a user).
A simplified instance of my current page piece is as follows (consider you have a tree at the left and when you click a tree node, you have to get quite another data table [PrimeFaces used]):
a tree, table selector (works pretty perfect)
<p:tree value="#{tableViewsPageBean.root}" var="node" dynamic="true" cache="false"
selectionMode="single" selection="#{tableViewsPageBean.selectedNode}">
<p:ajax event="select" listener="#{tableViewsPageBean.onNodeSelect}" update=":form:scene"/>
<p:treeNode id="treeNode">
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
a table that's intented to be dynamically rendered once a user clicks a tree node above
<h:panelGroup id="scene">
...
<h:panelGroup binding="#{dynamicDataTableBean.dataTableGroup}"/>
</h:panelGroup>
The tableViewsPageBean is defined as a #ViewScoped bean, and the dynamicDataTableBean is a #RequestScoped bean (I should not think that it might help -- I just had an idea).
But, for me, the following code is requested only once during the page load:
public HtmlPanelGroup getDataTableGroup() { ... }
I don't know, but is it possible to force this code execution to rebind the component in the panel group mentioned above without page reload? Thanks in advance.
Sorry, my bad. I had the following in my web.xml:
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
That option must be set to true. However, then I still have the problem described here.