I need to be able to display a text together with the spyglass or/and a button, in some of the TreeNodes of my PrimeFaces tree. Can anyone help ?
So, here is what the working Tree looks so far:
<p:tree id="StepTree" value="#{pageBean.steps}" var="node" styleClass="custom-tree-no-border"
selectionMode="single"
selection="#{pageBean.selectedNode}">
<p:ajax event="select" listener="#{pageBean.setActionData}"
update="form1:actionDesc form1:actionSkip form1:CompletionDateId:completionDateField
form1:actionComment"/>
<p:ajax event="contextMenu" listener="#{pageBean.setActionData}"
update="form1:actionDesc form1:actionSkip form1:CompletionDateId:completionDateField
form1:actionComment"/>
<p:treeNode type="#{nodeType.STEP.typeName}">
<span style="cursor: pointer;" onclick="this.parentNode.parentNode.firstChild.click();">
<h:outputText value="#{node}"/>
</span>
</p:treeNode>
<p:treeNode type="#{nodeType.ACTION.typeName}">
<h:outputText value="Hello there"/>
</p:treeNode>
</p:tree>
So, here is what I am trying to achieve:
In the following segment
<p:treeNode type="#{nodeType.ACTION.typeName}">
<h:outputText value="Hello there"/>
</p:treeNode>
instead of "Hello there" I need to put a spyglass in addition to the text that is in there, the spy glass that would link to open a file .. whose name is available as one of the field of the object backing that particular element displayed in that node.
Related
I'm getting a weird behavior when I try to update a h:panelGroup with a p:treeTable from a p:tree ajax event.
I have a p:tree element updating a form based on ui:include fragments. On the first load, everything works fine, but, when I select a tree, the ajax event is fired, the p:treeTable is updated but the nodes are duplicated.
My tree is this, the select listener event (onNodeSelect) builds a p:treeNode variable, and update a flag to show the p:treeTable page:
<p:tree value="#{mbArquitectura.raiz}" style="border: none;"
dynamic="true"
selectionMode="single"
cache="false"
selection="#{mbArquitectura.selectedNode}"
var="node"
id="tree">
<p:ajax onstart="muestraLoader(); cleanPriceTreeTable();"
oncomplete="ocultaLoader(); removeDuplicatedIds();"
event="select"
listener="#{mbArquitectura.onNodeSelect}"
global="true"
update=":frmPromocion :frmPromocion:ttPrecio :panelDialogos" />
<p:ajax onstart="muestraLoader();" oncomplete="ocultaLoader();"
event="expand"
listener="#{mbArquitectura.nodeExpand}"
global="true"
update=":frmPromocion :frmPromocion:ttPrecio :panelDialogos" />
<p:ajax onstart="muestraLoader();" oncomplete="ocultaLoader();"
event="collapse"
listener="#{mbArquitectura.nodeCollapse}"
global="true"
update=":frmPromocion :frmPromocion:ttPrecio :panelDialogos" />
<p:treeNode id="treeNode">
<b>
<h:outputText value="#{node}" id="lblNode" style="color: #{node.label}" />
</b>
</p:treeNode>
</p:tree>
My updated form (:frmPromocion) is this:
<ui:define name="content" id="content">
<h:form id="frmPromocion" style="font-size: x-small">
<h:panelGroup rendered="#{mbArquitectura.agregarPromocion}">
<ui:include src="/pages/ArqSeven/ArqPromocion.xhtml" />
</h:panelGroup>
<h:panelGroup rendered="#{mbArquitectura.precio}">
<ui:include src="/pages/ArqSeven/ArqPrecio.xhtml" />
</h:panelGroup>
</h:form>
Inside the file ArqPecio.xhtml, there is the following dataTable:
<p:treeTable id="ttPrecio"
liveResize="true"
value="${mbArquitectura.raizPrecio}"
var="item"
style="width: 1200px;"
styleClass="grid-content">
<p:ajax event="expand" listener="#{mbArquitectura.priceExpand}" update=":frmPromocion:ttPrecio" />
<p:ajax event="collapse" listener="#{mbArquitectura.priceCollapse}" update=":frmPromocion:ttPrecio" />
<p:ajax event="select" listener="#{mbArquitectura.priceSelect}" update=":frmPromocion:ttPrecio" />
<p:ajax event="unselect" listener="#{mbArquitectura.priceUnselect}" update=":frmPromocion:ttPrecio" />
</p:treetable>
As I said, the inicial load works fine:
But, when I select a node from the tree, the p:treeTable nodes are duplicated, like this:
How can I fix this behaviour?
I got a little problem with p:ajax update here. After closing p:panel or checking checkbox or adding answer i'm ajax-updating ans-data-grid as you can see in the code. But it works only for add answer button. When i close panel or click checkbox content of p:datagrid dissapears. It's still there but it is not visible and whole datagrid is 0px high. So my question is, Is there a difference between update from p:commandButton and p:ajax, and if yes how can i update this datagrid properly?
<p:panel id="edit_ans_panel" styleClass="edit-ans-panel" visible="#{editorBean.question.qtype != 2}">
<p:dataGrid rowIndexVar="rowIndex" var="answer" value="#{editorBean.question.answers}" columns="1" id="ans_data_grid">
<p:panel header="Answer" styleClass="QApanel" closable="#{editorBean.closableAns}" toggleable="true">
<p:ajax event="close" update="ans_data_grid" listener="#{editorBean.onAnswerRemoved(answer)}" />
<p:panelGrid columnClasses="anscol1,anscol2,anscol3" columns="3" layout="grid" styleClass="QAgrid">
<p:inputTextarea placeholder="enclose LaTeX expression in $ to be processed" id="editor_input_#{answer.id_answer}" styleClass="editor-input" minQueryLength="2" value="#{answer.text}" />
<h:outputText id="editor_output_#{answer.id_answer}" styleClass="editor-output" value="#{answer.text}"/>
<p:column>
<p:panel id="edit_ans_corr_chkbx" styleClass="edit-ans-corr-chkbx" visible="#{editorBean.question.qtype != 3}">
<h:outputText value="Correct: " />
<p:selectBooleanCheckbox id="is_true_#{answer.id_answer}" value="#{answer.is_true}" >
<p:ajax update="ans_data_grid" listener="#{editorBean.ansChecked(answer)}" />
</p:selectBooleanCheckbox>
</p:panel>
</p:column>
</p:panelGrid>
</p:panel>
</p:dataGrid>
<p:commandButton id="add_ans_btn" value="Add Answer" styleClass="add-ans-btn" action="#{editorBean.addAnswer()}" update="ans_data_grid"/>
</p:panel>
\edit
For some reason p:panel with .QApanel class gets .ui-helper-hidden class after update where is display:none.
I've got a JSF page with <rich:tabPanel> which contains 4 tabs.
On the 4th tab I'm trying to use <a4j:commandButton> to execute the action and render resulTable.
Here is the shorten example
<rich:tab header="Journal">
<h:form id="filterForm">
<a4j:jsFunction name="submitByEnter"
action="#{smsLogList.refresh}" render="smsTable" />
<s:div id="divSearch">
<rich:collapsiblePanel header="#{messages['search']}"
switchType="client">
<h:panelGrid column="1">
<s:decorate template="/layout/edit.xhtml">
<ui:define name="label">Package number</ui:define>
<h:inputText id="packNum" style="width:200px"
value="#{smsLogList.packNum}">
<a4j:ajax event="keyup" listener="#{smsLogList.refresh}"
ignoreDupResponses="true" requestDelay="1500"
render="smsTable" />
</h:inputText>
</s:decorate>
<!---some other search elements-->
<s:div styleClass="actionButtons">
<a4j:commandButton id="search" value="#{messages['search']}"
render="smsTable" action="#{smsLogList.go}" />
<a4j:commandButton id="reset" value="#{messages['clear']}"
onclick="document.getElementById('filterForm').reset();"
action="#{smsLogList.clear}" render="divSearch,smsTable" />
</s:div>
</h:panelGrid>
</rich:collapsiblePanel>
</s:div>
<!--- results table-->
<h:panelGrid id="smsTable">
<s:div>
<rich:dataTable value="#{smsLogList.resultList}" var="sms"
id="table" rendered="#{not empty smsLogList.resultList}">
<rich:column>
<f:facet name="header">Type</f:facet>
<h:outputText value="#{sms.smsType}" />
</rich:column>
<!---- some other columns-->
</rich:dataTable>
<rich:dataScroller for="table" />
</s:div>
</h:panelGrid>
</h:form>
</rich:tab>
So, when I'm clicking on the <a4j:commandButton> - nothing happens, but if I'm switching to the other tab and back - the result is as necessary.
I tried to change a4j to <h:commandButton>, but after it's pressed the page switches to the first tab.
Is any solution how to work this out?
The solution is quite simple.
I used <h:form> inside other <h:form>. It will not work anyway. When I remove internal - the jsf works smooth and as it should.
I would like to submit value form jsf page to bean from overlayPanel with checkbox like this:
To show overlay panel and ajax submission I use this code, and see it's OK in debugger:
<p:commandButton id="joinBtn" value="Basic" type="button" disabled="#{dataPropertyCurrent.notJoinable}"/>
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="false">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
<!--<p:commandButton value="Apply" id="btnApplyJoin" type="button" process="#parent" />-->
<h:outputLabel value="ID: #{dataPropertyCurrent.joinDataPropertyId}" />
</p:overlayPanel>
But after it when the overlayPanel is hidden and form submit button being pressed with this code:
<p:commandButton value="Apply join" update="joinAccordionPanel,dsAccordionPanelMain" actionListener="#{treeBean.applyJoinOptions}" />
it sets "false" to bean boolean value again.
So how to submit overlayPanel value to bean properly?
PrimeFaces version: 3.5
I've found explanation here: http://forum.primefaces.org/viewtopic.php?f=3&t=30550#p97737:
"If you are using appendToBody, it's strongly recommended to have a form inside the overlayPanel component that wraps all of the input fields and buttons. This is what you have done in your last solution. However, this means that you cannot place the overlayPanel inside another form in the xhtml page because of the limitation on nesting forms. The best solution is typically to avoid appendToBody wherever it's not absolutely necessary."
Edit
I've added <h:form> inside overlayPanel, and now it works fine:
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="true" >
<h:form id="formTmp">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
</h:form>
</p:overlayPanel>
I have a requirement where I want the user to move the datatable rows up and down.I thought Context Menu would come handy as there would be a Move up and Move down menu item .For this I tried implementing the context Menu for datatable example from Primefaces Showcase. However I am not getting the selected values from the datatable rows to be displayed on the dialog.
Please find the below code:
<p:contextMenu for="availableCars">
<p:menuitem value="View" update="display" icon="ui-icon-search" oncomplete="carDialog.show()"/>
</p:contextMenu>
<p:dataTable id="availableCars" var="car" value="#{RequestBean.formFields}" rowKey="#{car.car_group}" selectionMode="single" selection="#{RequestBean.selectedField}">
<p:column headerText="Field Label">
<h:outputText value="#{car.car_label}" />
</p:column>
<p:column headerText="Field Group">
<h:outputText value="#{car.car_group}" />
</p:column>
<p:column headerText="Field Name">
<h:outputText value="#{car.car_name}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Detail" widgetVar="carDialog" resizable="false"
width="200" showEffect="clip" hideEffect="fold" id="dialog">
<h:panelGrid id="display" columns="2" cellpadding="4">
<h:outputText value="Car label:" />
<h:outputText value="#{RequestBean.selectedField.car_label}" style="font-weight:bold"/>
<h:outputText value="car Group" />
<h:outputText value="#{RequestBean.selectedField.car_group}" style="font-weight:bold"/>
<h:outputText value="Car Name:" />
<h:outputText value="#{RequestBean.selectedField.car_name}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
Any help would be appreciated.
N.B: I am using PF 2.2.1
It looks like the selection doesn't get sent using ajax - you need to set the onRowSelectUpdate attribute on the data table.
From Primefaces documentation:
In both single and multiple selection options described before, enclosing form needs to be submitted
by user so that the selections would be processed and set to the selection value reference. If you’d
like to execute custom logic whenever the row is selected instantly bind a rowSelectListeneror or define onRowSelectUpdate option.