Is it possible to add a link inside a tool tip using Prime Faces
i cant find a way to add a link inside the tool tip. I tried to add hideDelay but it doesn't seems to work, not sure why.
This is what i got :
<h:column id="opf1007_column_col08"
rendered="#{pc_Opf1007.w_op_forecast.colbll08 ne null}">
<f:facet name="header">
<h:outputText styleClass="outputGridHeaderText"
value="#{pc_Opf1007.w_op_forecast.colbll08}"
id="opf1007_gridheader_col08"
style="text-align:right;width:120px">
</h:outputText>
</f:facet>
<p:inputText styleClass="#{varlistOfGridForecasts_Single.inputClass}"
id="opf1007_gridinput_col08"
value="#{varlistOfGridForecasts_Single.col08}"
style="#{varlistOfGridForecasts_Single.style}color: #{varlistOfGridForecasts_Single.col08 lt 0 ? 'red' : 'blue'};width:100px;text-align:right"
readonly="#{varlistOfGridForecasts_Single.total_row}">
<f:convertNumber maxFractionDigits="0" minFractionDigits="0"/>
</p:inputText>
<p:commandButton ajax="false" type="submit"
styleClass="iconCommandButton"
id="opf1007_command_col08" icon="ui-icon-search"
action="#{pc_Opf1007.doOpf1007_command_listAction}"
style="width:14px;height:14px"
rendered="#{varlistOfGridForecasts_Single.showIcon}">
<f:param name="clicked_groupid"
value="#{varlistOfGridForecasts_Single.groupid}"></f:param>
<f:param name="clicked_col_frdate"
value="#{pc_Opf1007.w_op_forecast.col08_frdate}"></f:param>
<f:param name="clicked_col_todate"
value="#{pc_Opf1007.w_op_forecast.col08_todate}"></f:param>
</p:commandButton>
<p:tooltip for="opf1007_command_col08" value="#{msg.opf1007_tooltip_click}" showEffect="fade" hideEffect="fade" hideDelay="500"
style="width:270px"/>
</h:column>
The Result: I got my tooltip to hover over my command button, but the there is no delay in the hiding.
Related
When using autoComplete and columnToggler within a dataTable, I get a broken column-list in the column toggler.
That means, the column-list doesn't show the column-names but some javascript code instead (for each column).
Here is an example:
<p:commandButton id="showColsButton" type="button" value="Show Columns" />
<p:columnToggler datasource="myDataTable" trigger="showColsButton" />
<p:dataTable id="myDataTable" var="row" ...>
<p:column sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
</p:dataTable>
Is this a bug or is there any solution for this specific problem?
Putting an input in the header facet is not valid. If you want to use it as a filter or something, put it in a f:facet name="filter".
<p:dataTable id="myDataTable" var="row" ...>
<p:column filterBy="#{row.myCol1}" sortBy="#{row.myCol1}">
<f:facet name="header">
<div><h:outputText value="My Column 01" /></div>
</f:facet>
<f:facet name="filter">
<p:autoComplete ...>
<p:ajax event="itemSelect" update="myDataTable" />
</p:autoComplete>
</f:facet>
<h:outputText value="#{row.myCol1}" />
</p:column>
But you might need to improve on the way the filter is used by not using the p:ajax but use an onchange=PF('dataTableWidget').filter(), adding a widgetVar attribute and adding filter attributes
See also
PrimeFaces showcase dataTable filter
SOLUTION
Long story short, "not empty #{pastTxModel.currentTx.xml}" should be "#{not empty pastTxModel.currentTx.xml}". Yeah, I know...
UPDATE
The problem is here:
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
Long story but the solution is -
Part 1-
<h:form id="alltxform">
<p:dataTable id="tablealltx" var="transaction" value="#{transactionListModel.txList}">
<p:column>
<p:commandButton update=":alltxform:xmlDetail" action="#{transactionListModel.setSelectedTx(transaction)}">
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Detail" widgetVar="dialog">
<p:outputPanel id="xmlDetail">
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
</p:outputPanel>
</p:dialog>
</h:form>
Then Change -
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="not empty #{pastTxModel.currentTx.xml}"></p:inputTextarea>
To -
<p:inputTextarea id="test" value="#{pastTxModel.currentTx.xml}" rendered="#{not empty pastTxModel.currentTx.xml}"></p:inputTextarea>
You need to update the whole dialog after clicking on the button.
<p:commandButton update=":alltxform:Detail" oncomplete="PF('dialog').show()">
<f:setPropertyActionListener value="#{transaction}"
target="#{transactionListModel.selectedTx}" />
</p:commandButton>
I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>
How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"
Im trying to update text field from dialog box .The text field is in the parent component. But its not happening . If i give the id of text field in the update of command button . I encountered the error :
javax.faces.FacesException: Cannot find component with identifier "customerCode" referenced from "tabView:lkpSltRec"
Since it is not able to find the component id . I have used the alternative . I have taken the hidden field .After command button is clicked , the hidden field gets updated and through simple javascript function im updating the text field of parent component .The javascript function is called from oncomplete of command button in the dialog box. Since ,as per project requirement i have to achieve it through primefaces only not through javascript . Plz, suggest me the approach in primefaces . Below is the code snippet:
Here ecap:lookup is the the customize component.
Selected Customer <p:inputText id="customerCode"
value="#{sixthTabBBean.customerName}" label="Selected Adddress"></p:inputText>
Selected Customer City <p:inputText id="selectedCity" value="#{sixthTabBBean.customerCity}" ></p:inputText>
<ecap:lookup lookupId="LOV0072" inputId="customerCode" clickStatus="city"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
New LOV <ecap:lookup lookupId="LOV0092" inputId="customerCode" clickStatus="none"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
City<p:inputText id="custCity" value="#{sixthTabBBean.customerCity}"
disabled="true" label="City"></p:inputText>
Selected Customer <p:inputText id="customerCode1"
value="#{sixthTabBBean.customerName}" label="Selected Adddress" ></p:inputText>
Selected Customer City <p:inputText id="selectedCity1" value="#{sixthTabBBean.customerCity}" ></p:inputText>
Selected Customer State <p:inputText id="selectedSate1" value="#{sixthTabBBean.customerState}" ></p:inputText>
<ecap:lookup lookupId="LOV0098" inputId="customerCode" clickStatus="state"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
<p:dialog id="lkpDialog" widgetVar="lpDialogVar" header="Lookup"
modal="true" width="1000" height="600"
rendered="#{lookupSearch.popupRender}" >
<h:form rendered="#{lookupSearch.popupRender}" prependId="false">
<h:panelGrid cellpadding="10" id="diaFrmId">
<p:dataTable id="newfdt" var="flxSearch"
value="#{lookupSearch.lkpSearchCriteriaList}">
<p:column id="newwhc">
<f:facet name="header">
<h:outputLabel value="Search Fields"></h:outputLabel>
</f:facet>
<p:selectOneMenu styleClass="fdd180" id="newwdd"
value="#{flxSearch.searchCriterion.whereClause}">
<f:selectItems value="#{flxSearch.whrClausDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcoc">
<f:facet name="header">
<h:outputLabel value="Conditions"></h:outputLabel>
</f:facet>
<p:selectOneMenu id="newco" styleClass="fdd95"
value="#{flxSearch.searchCriterion.operator}">
<f:selectItems id="newcriOperatorItms"
value="#{flxSearch.operatorDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcic">
<f:facet name="header">
<h:outputLabel value="Value"></h:outputLabel>
</f:facet>
<p:inputText id="newcriInpNm"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required}"
styleClass="285 ftb" deferChangeEvent="true"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:inputText id="newcriInpM"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:selectOneMenu styleClass="fdd" id="newbldd"
value="#{flxSearch.searchCriterion.value}"
disabled="#{flxSearch.disableInput}"
rendered="#{flxSearch.boolValue }">
<f:selectItems value="#{flxSearch.booleanDropdown}" />
</p:selectOneMenu>
<p:calendar id="newcriDtNm" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required }"
disabled="#{flxSearch.disableInput}" showOn="button"
value="#{flxSearch.searchCriterion.value}"
labelValue="#{flxSearch.searchCriterion.label}">
</p:calendar>
<p:calendar id="newcriDtM" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
disabled="#{flxSearch.disableInput}"
value="#{flxSearch.searchCriterion.value}"
enableChangeDetector="false" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}" showOn="button">
</p:calendar>
</p:column>
</p:dataTable>
<!-- hidden text used to update values in the parent component -->
<p:inputText type="hidden" id="hiddencustomerCode"
value="#{sixthTabBBean.customerName}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustCity"
value="#{sixthTabBBean.customerCity}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustState"
value="#{sixthTabBBean.customerState}" ></p:inputText>
<p:fieldset legend="Combined By">
<h:panelGrid columns="2" cellpadding="10">
<p:selectOneRadio id="newSlctDrk"
valueChangeListener="#{lookupSearch.getSelectedLogOpr}"
value="#{lookupSearch.selLogOpr}"
title="Combine all search criteria with AND or OR">
<f:selectItems id="newSlctDrkItms"
value="#{lookupSearch.logicalOperators}" />
</p:selectOneRadio>
</h:panelGrid>
</p:fieldset>
<h:panelGrid columns="3">
<p:commandButton value="Find" id="lkpfndDg" update="resultFldSet"
actionListener="#{lookupSearch.search}">
</p:commandButton>
<p:commandButton value="Clear" id="lkpClearDg"
actionListener="#{lookupSearch.clear}" />
</h:panelGrid>
<p:fieldset legend="Result" id="resultFldSet">
<p:dataTable binding="#{lookupSearch.lkpResultDataTable}"
value="#{lookupSearch.searchResultsForPage}"></p:dataTable>
</p:fieldset>
<p:commandButton value="Select" id="lkpSltRec" update="customerCode"
oncomplete="lpDialogVar.hide();insertSelectedValue();"
actionListener="#{lookupSearch.selectValue}" />
</h:panelGrid>
</h:form>
</p:dialog>
</h:panelGrid>
Here ecap:lookup is the customize component.
Finally, i have got the solution . The exception i have encountered is because of the form tag . The ajax event fired from the dialog is not able to find the component outside the form .In this case use:
:#{p:component('componentId')}
Here it will search the id not only within the form but outside of it.
I have Primefaces DataTable with in-cell editing:
<p:dataTable id="docsTable" editable="true" value="#{customer.docs}" var="doc" style="border-width:0px;" >
<p:growl id="docsMessages" showDetail="true"></p:growl>
<p:ajax event="rowEdit" update="docsMessages,docsTable" listener="#{customerController.onEditDocument}"></p:ajax>
<p:ajax event="rowEditCancel" update="docsMessages,docsTable" listener="#{customerController.onEditDocumentCancel}"></p:ajax>
<p:column headerText="Document Type">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{doc.docType}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{doc.docType}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Document Number">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{doc.docNum}"></h:outputText>
</f:facet>
<f:facet name="input">
<p:inputText value="#{doc.docNum}"></p:inputText>
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:rowEditor></p:rowEditor>
</p:column>
</p:dataTable>
Here is corresponding SWF view state definition:
<view-state id="enterDetails" view="/WEB-INF/views/tiles/customer/s3-custDetails.xhtml" model="customer"> <!-- tiles/customer/s3-custDetail -->
<secured attributes="ROLE_WEB" />
<var name="customerController" class="com.my.CustomerController"/>
<transition on="addNewDocument">
<evaluate expression="customer.docs.add(new com.my.CustomersDocs())"></evaluate>
<render fragments="custDetails"></render>
</transition>
</view-state>
The view renders fine, values are saved in backing bean, and rowEdit listener is called in my controller as well. However it never exits the editor mode no matter what user does. I did some network sniffing and it appears SWF is only sending back the viewstate, whereas Primefaces showcase also sends back rendered fragment.
How do I fix this?
This is a bug/deficiency in Spring webflow. It is mentioned in Spring docs (see http://static.springsource.org/spring-webflow/docs/2.3.x/reference/html/ch13s10.html) but in a rather obscure fashion and does not mention relation to partial rendering issues. The fix is simple, add the following in webflow:flow-executor tag:
<webflow:flow-execution-attributes>
<webflow:redirect-in-same-state value="false"/>
</webflow:flow-execution-attributes>