I am using primefaces 3.0 M2, and I use DefaultTreeNode, with the component p:tree and it works fine.
My problem is that I want the value of node selected were be different from the the value of node displayed.
Need your help please!
You may display any text you like for each node. For example, this is a bit changed example from primefaces showcase (TreeBeen.java is the same):
<h:form>
<p:growl id="growl" showDetail="true" />
<p:tree id="treeSingle" value="#{treeBean.root}" var="node"
selectionMode="single" selection="#{treeBean.selectedNode}">
<p:treeNode>
<h:outputText value="Node" />
</p:treeNode>
</p:tree>
<p:commandButton value="Display Selected" update="growl"
actionListener="#{treeBean.displaySelectedSingle}" />
</h:form>
"Node" text is displayed for each node, but it's data value is displayed on button click event.
Related
I tried to use draggable component https://www.primefaces.org/showcase/ui/dnd/draggable.xhtml for inputTextArea component but it does not work for me. Do you know any workarounds for making input components draggable?
My code:
<p:outputPanel>
<p:inputTextarea id="test">
</p:inputTextarea>
</p:outputPanel>
<p:draggable for="test" containment="parent" />
I don't have any errors in console. But drag function does not work as it work for p:panel, for example.
try to wrap the component in a panel and assign "for" to that panel.
<p:outputPanel>
<p:panel id="test">
<p:inputTextarea />
</p:panel>
<p:draggable for="test" containment="parent"/>
</p:outputPanel>
I have the following code:
<p:tree value="#{sessBean.root}" var="node" animate="true" id="idTree" selectionMode="single" selection="#{sessBean.selectedNode}" >
<p:ajax listener="#{reqBean.doBtnSearch}" event="select" onstart="PF('tblDataWidget').clearFilters();" update=":form1:tabView:tblData" />
<p:treeNode>
<h:outputText value="#{node.descr}" />
</p:treeNode>
</p:tree>
<p:commandButton value="Add" icon="ui-icon-plus" id="doBtnAdd" action="#{reqBean.doBtnAddEntry}" update="tblData" oncomplete="PF('tblDataWidget').clearFilters();" />
I have a dataTable (tblData) with many entries, which are loaded and displayed when a tree node is clicked. So far, no problems. Datatable has filters on some columns, which also works fine. The problem appears, when I want to clear the filter (on button and tree node click). When I click the 'Add' button (see the code above), the filters are cleared as expected, but when I click on a tree node, clearing the filters doesn't work. Both commandButton and tree component are contained in a tabView container.
What am I doing wrong?
Thank you for your suggestions!
PS: using PrimeFaces 5.1
Try it :
<p:ajax listener="#{reqBean.doBtnSearch}" event="select" onstart="PF('tblDataWidget').clearFilters();" update="#{p:component('tblData')},#{p:component('idTree')}" />
I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
I have some weird issue with datatable selection (most likely i'm doing something wrong).
Idea is simple - datatable with selection and a dialog to edit the records. The problem is that if i use <h:inputText> tag (or <p:inputText>) it appears to be blank, though the object in the backing bean (indicatorBean.indicator.code) contains data. Interestingly if i put <h:outputText> instead of input the data is shown.
here are contents of my body
<!-- language: xml -->
<h:body>
<h:form id="form">
<p:growl id="messages" showDetail="true"/>
<p:dataTable id="indicatorsTable" var="ind"
value="#{indicatorBean.indicators}"
selectionMode="single"
selection="#{indicatorBean.indicator}"
rowKey="#{ind.id}">
<p:column headerText="Name" style="width:125px">
#{ind.name}
</p:column>
<p:column headerText="Code" style="width:125px">
#{ind.code}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View"
icon="ui-icon-search" update=":form:display"
oncomplete="indDialog.show()"/>
</f:facet>
</p:dataTable>
<p:dialog id="dialog" header="Indicator Detail"
widgetVar="indDialog" resizable="false"
width="400" showEffect="fade" hideEffect="fade">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Code:"/>
<!-- PROBLEM IS HERE -->
<h:inputText value="#{indicatorBean.indicator.code}"/>
<h:outputText value="Name:"/>
<h:outputText value="#{indicatorBean.indicator.name}"/>
</h:panelGrid>
<p:commandButton value="Save" onclick="indDialog.hide()"/>
<p:commandButton value="Cancel" onclick="indDialog.hide()"/>
</p:dialog>
</h:form>
</h:body>
Backing bean is nothing other that accessors.
Another thing i spotted is if i replace el expression in <h:inputtext> with a static text (like <h:inputText value="static text"/>), it is shown.
Here are some pictures:
Dialog with inputtext
Dialog with outputtext
Dialog with static text
primefaces 3.4
The problem as you seem to have already figured out is that you are placing the dialog itself inside of a form. This is an issue because of the way the jQuery dialog control works, which is the client side foundation of the Primefaces dialog. Essentially it will move DOM elements associated with the dialog elsewhere, possibly outside of the form that you intend to enclose it.
This problem can be easily solved by putting the dialog outside of the form, and putting a form inside of the dialog body instead.
<p:dialog id="dialogId" ...>
<h:form id="dlgForm">
....
</h:form>
</p:dialog>
In this way when jQuery UI moves the dialog control elsewhere in the DOM, the contents of that DOM, including the form come with it.
I have a problem are that when I try update a component that not are in same xhtml.
Somebody know how to do?
thx
PD: im using primefaces 3.2
Sorry for my english
I think that I dnot explain very well.
I have a xhtml father with tis structure:
<h:panelGrid id="tabla">
<h:form id="formTripu" prependId="false">
<h:panelGrid id="fichaTripulante">
<ui:include src="path1" />
<p:spacer height="5px" />
<p:tabView dynamic="false" cache="true">
<p:tab title="#{bundleTrip.datosAdministrativos}">
<ui:include
src="path2" />
</p:tab>
<p:tab title="Datos Operativos ">
<ui:include
src="path3" />
</p:tab>
I wish to do are when for example in path1 I use a h:selectBooleanCheckbox like:
<h:selectBooleanCheckbox inmediate="true" id="checkExt"
value="#{bean.Obj.field}">
<f:ajax render="estadoTripu"
actionListener="#{bean.method}" />
</h:selectBooleanCheckbox>
estadoTripu are in path2 (otherxthml but in same form).
<p:panel>
<h:panelGrid id="datos" columns="5">
<p:column>
<h:selectOneMenu id="estadoTripu"
value="#{bean.Obj.Field2}">
<f:selectItems
value="#{bean.list}" var="item"
itemValue="#{item.id}" immediate="true"
itemLabel="#{item.desc}">
</f:selectItems>
</h:selectOneMenu>
</h:panelGrid>
</p:column>
</h:panelGrid>
</p:panel>
Witch is paht in render o f:ajax????
thx everyone
try this: (Its a trick I learned from BalusC :) )
add binding="#{components.mySelecOneMenu}" to your h:selectOneMenu
<h:selectOneMenu binding="#{components.mySelecOneMenu}" .....
This how you button should look like (more or less)
<h:commandButton value="doSomeThing">
<f:ajax render="#{components.mySelecOneMenu.clientId}"/>
</<h:commandButton>
add this to your faces-config.xml
<managed-bean>
<description>Holder of all component bindings.</description>
<managed-bean-name>components</managed-bean-name>
<managed-bean-class>java.util.HashMap</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Here some detailed explanation of what I just recommend you to do
How do I break the tyranny of the clientID?
JSF component binding without bean property
if they are not in the same xhtml, do you include one in the other? If not, just change page and it will show the correct one.
But I don't think I correctly understand your question.
Add some code please
I find that component should be in same form an call ids start in form to component, its prefered put id every panelgrid, panel, etc because you have to call every component englobe comoponent that you want render.