DataTable - ContextMenu - primefaces

Primefaces Migration-Guide 5.3 to 6.0:
ContextMenu: p:contextMenu must be placed AFTER the target component (e.g. datatable) in the xhtml now.
I tried exactly that, but it' not working. No Menu at all.
Placing ContextMenu before dataTable: Menu is showing. Additional output on browser console:
ContextMenu targets a widget which is not available yet. Please place the contextMenu after the target component. targetWidgetVar: widget_base_cars
My Webshpere Liberty log:
...org.primefaces.webapp.PostConstructApplicationEventListener I Running on PrimeFaces 7.0
Java:
java.version = 1.8.0_102
Stripped down to primefaces showcase
<h:body>
<h1>Context Menu</h1>
<h2>ContextMenu: p:contextMenu must be placed AFTER the target component</h2>
<h:form id="base" >
<p:dataTable id="cars" var="car" value="#{dtContextMenuView.cars}" rowKey="#{car.id}" >
<f:facet name="header">
List with #{dtContextMenuView.numberOfCars} Items
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<p:contextMenu for="cars" >
<p:menuitem value="Hello" />
<p:menuitem value="World" />
</p:contextMenu>
<h2>but it fails</h2>
</h:form>
</h:body>
I expect the menu to show on right click.
Is it a bug, or am i the bug?

I reproduced this testing around with PF 5.3/6.0/7.0. I'm with you as long as your p:dataTable is not selectable:
The p:contextMenu appears on rightclick when added above the p:dataTable element in xhtml. When added below, no context menu appears at all. But tbh.: is a context menu useful on a datatable which does not allow selection?
When making it selectable by adding the attributes
selection="#{myBean.selectedValue}" selectionMode="singel"
it behaves like this:
p:contextMenu below p:dataTable as suggested by migration guide: On rightclick, the clicked row is selected and context menu appears on it.
p:contextMenu above p:dataTable: on rightclick, context menu appears either, but the row is not selected.
So if p:contextMenu is added above the table, selection does not work as expected which must be the reason for the migration guide telling "add it below!".
Btw: I did not get that warning in my JavaScript console during my tests, don't know why.

Related

Primefaces 5.1 show tooltip on single cell of a datatable for each row without extensions

I faced a problem with primefaces and tooltip on a single cell column.I was not able to use it so I searched the web and I found many answer like this one. the first answer did not solved the problem, infact that did nothing at all and the second one gave me error at runtime, telling me that it cannot find the righ object in the page.
So,how can i use a tooltip on a single cell of a table for each row?
I'm using primefaces 5.1, jsf 2.2, java 1.6.
despite many answers that suggest you to use primefaces extensions, the only thing you have to do to see your tooltip is to use primefaces itself like this:
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
where idField is the id from which you want to see the tooltip appear and row.property is the value that you want to show into it.
the thing is now simple to make. here it is an example with the datatable:
<p:dataTable var="row" value="#{....}" styleClass="myTable">
<p:column headerText="Header 2">
<h:outputText value="#{row.value2}" id="idField" />
<p:tooltip id="toolTipGrow" value="#{row.property}" shared="true" for="idField" showEffect="clip" position="top"/>
</p:column>
</p:dataTable>
I hope this will help.
Best Regards
Yes its possible. See..
<p:column>
<f:facet name="header">
<h:outputText
id="header"
value="Header"
/>
<p:tooltip
for="header"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for header -->
</p:tooltip>
</f:facet>
<h:outputText
id="col"
value="#{object.valueA}"
/>
<p:tooltip
for="col"
showEffect="fade"
hideEffect="fade"
>
<!-- content of tooltip for cell -->
</p:tooltip>
</p:column>
In my scenario, I have all my data in cells inside h:outputText elements.
In that case, you can then use the title attribute.
<p:column>
<h:outputText value="#{row.data}" title="#{row.data}"/>
</p:column>

How to change Primefaces Datatable filter position?

Right now by default PF Datatable showing filter position with header .Is it possible to show filter position on footer of the DataTable ?
I tried below code in Datatble Footer but not worked
<f:facet name="footer">
<p:column>
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
</p:column>
<p:column>
<f:facet name="filter">
<p:spinner onchange="PF('carsTable').filter()" styleClass="year-spinner">
<f:converter converterId="javax.faces.Integer" />
</p:spinner>
</f:facet>
</p:column>
</f:facet>
No, not possible in this way. I see three options:
Use DOM manipulation to move the filters to the corresponding tags in the bottom. Do not forget to do this after each ajax call. And by hiding the filters in the header with css anyway, you prevent a 'jumpy' userinterface
Using OmniFaces' moveComponent showcase.omnifaces.org/components/moveComponent as proposed by #MathieuCastets
Change the source of the PrimeFaces dataTable and create your own component.

Call a Method when the User clicks in Dropdown in p:autocomplete

I'm working with Primefaces 5.1 and would like a help in component
How I can update the FacesMessages in my page when the user performed one click in the icon from the dropdown in autocomplete( this when the autocomplete is empty)
I've tried many ways but I can not do FacesMessage be updated, that event or how I should conduct is action?
<p:autoComplete id="stepDescriptionDropDownId"
dropdown="true"
value="#{Step.stepSearch.selectedStep}"
converter="basedEntityConverter"
var="stepSearch"
itemValue="#{stepSearch}"
itemLabel="#{stepSearch.description}"
completeMethod="#{Step.doCompleteStepSearchDescription}"
panelStyleClass="autoCompletePanelBorderNone"
immediate="true"
size="30">
<p:column>
<h:outputText value="#{stepSearch.id.stepCode}" />
</p:column>
<p:column>
<h:outputText value="#{stepSearch.description}" />
</p:column>
<p:ajax event="itemSelect" process="#form" update="inputTextStepCodeId, :facesMessagesId" listener="#{Step.doValidateSteps}" />
</p:autoComplete>
In short, how can I call a method when the User clicks on the icon?

Primefaces DataScroller Loader facet not working

I have a primefaces datascroller containing list of accordionPanels in it. I am using 'loader' facet for lazy loading. On clicking more the next chunk of data is listed. The problem is, if I click a commandButton inside the accordion tab, the 'loader' facet stops working. This is my code:
<p:dataScroller layout="block"
value="#{bean.mainList}" var="manvo" chunkSize="3" lazy="true">
<f:facet name="loader">
<p:commandButton type="button" value="More" process="#this" />
</f:facet>
<p:accordionPanel activeIndex="1" dynamic="true" scrollHeight="auto">
<p:tab title="#{manvo.releaseName} >> #{manvo.tcName}">
<p:commandButton value="TestIt" actionListener="#{bean.testSubmit()}" update="#form"/>
</p:tab>
</p:accordionPanel>

Primefaces 1.1 and p:dialog problem

I am using primefaces 1.1 + JSF 1.2 running in JBoss 5.1
I have a problem with p:dialog
Below are the code snippets taken from the showcase(of PF 2.2, yet the p:dialog code remains the same. Right?? ) which can be seen # http://www.primefaces.org/showcase/ui/dialog.jsf
Code:
<h:panelGrid cellpadding="5">
<p:commandButton value="Basic Dialog" onclick="dlg1.show()" type="button"/>
<p:commandButton value="Modal" onclick="dlg2.show();" type="button"/>
<p:commandButton value="Effects" onclick="dlg3.show();" type="button"/>
</h:panelGrid>
<p:dialog header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="200">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effect Dialog" widgetVar="dlg3" showEffect="bounce" hideEffect="explode" height="200">
<h:outputText value="This dialog has cool effects." />
</p:dialog>
The thing is, the outputText values within the dialog boxes are displayed along with the commandbuttons like the ordinady html contents rather than displayed inside a dialog box only when the commandButtons are clicked. What might be the issue? :shock:
P.S : The above code runs fine in Primefaces 2.2 + Jsf 2.0 + JBoss 6
SCREENSHOT -
problem image url