Hi I'm using the component Tree - Selection with the variant Checkbox.
Everything in the component is working fine but I need to put a button next to every child of my nodes to make something happen with the id of that node, the problem is that if I press the button that unchecks that node.
This is my code:
<p:tree value="#{puntoscontrolController.rootDevices}" var="dev"
selectionMode="checkbox" selection="#{puntoscontrolController.selectedDevNodes}" style="border: none;"
>
<p:ajax event="select" listener="#{puntoscontrolController.selectUnidad(dev)}" update="growl"/>
<p:ajax event="unselect" listener="#{puntoscontrolController.unselectUnidad(dev)}" update="growl"/>
<p:treeNode type="ruta" icon="fa fa-list-ol">
<h:outputText value="#{dev.ruta}"/>
</p:treeNode>
<p:treeNode type="unidad" icon="fa fa-bus" >
<h:outputText value="#{dev.nombre}"/>
<button onclick="centrar(#{dev.idTraccar});">→</button>
</p:treeNode>
</p:tree>
And the result seems like this:
Image of tree checkbox selection
The problem is that if i click anything inside the darker area of the node it unchecks that node so my question is if I can make the checkbox tree to make the selection event to happen just in the checkbox and not in the things inside the p:treenode?
I'm aware that this was possible in previous versions like 3.4.1 but I'm currently using the 6.0 version because I need some new features.
I resolved that with stopping the event from propagating as suggested by #Kukeltje. To achieve that I used this code:
onclick="centrar(#{dev.idTraccar});event.stopPropagation();"
Related
I have a list of objects (let's call each object a record object), shown through a <p:datatable> component. Each record has a delete button column.
When a user clicks on the delete button of the record, a <p:confirmDialog> is shown, asking for user confirmation. What I want is to customize the content of the confirmDialog under corresponding circumstances (for example show/do not show a checkbox concerning the value of a property of the record, f.e if record.isPersonal, show the checkbox, else not.
Unfortunately, that does not seem to be working as the checkbox is always shown in case the first record satisfies the condition, and the opposite in case it does not. After some research I found out that especially in previous Primefaces versions, they used to use the "JS way" (creating two separate confirm dialogs and proportionally use PF('widgeName').show(), but I would like to know whether any out of the box solution exists in Primefaces 7.0 version which I use through the <p:confirm> tag or something else. Code example below:
<p:dataTable id="recordsTable" lazy="true" value="#{myBean.myList.records}" var="record...">
<p:column styleClass="deleteColumn">
<p:commandButton ...>
<p:confirm .../>
</p:commandButton>
<p:confirmDialog widgetVar="delete_record_dialog" global="true" showEffect="fade" hideEffect="fade">
<p:selectBooleanCheckbox
rendered="#{record.isPersonal}"
....>
</p:selectBooleanCheckbox>
<p:commandButton value="#{msg.yes}" type="button"
styleClass="ui-confirmdialog-yes" icon="pi pi-check"
/>
<p:commandButton value="#{msg.no}" type="button" styleClass="ui-confirmdialog-no"
icon="pi pi-times"
/>
</p:confirmDialog>
</p:column>
</p:dataTable>
Thanks in advance!
I think rather than using ConfirmDialog, you may have to revert to building you own custom dialog, either using p:dialog or using the dialog framework. Using dialog framework you can create a simple confirm dialog box and can pass the data into the dialog programatically - e.g. a flag based on the current row to indicate if the checkbox should be shown. The dialog framework also gives an easy way to return data back from the dialog to the calling page using the dialogReturn ajax event.
You could use the <p:confirmDialog message=""/> to conditionally display different messages like this:
<p:confirmDialog widgetVar="delete_record_dialog"
header="Record delete"
message="Are you sure you want to delete #{record.isPersonal ? 'your personal' : 'this'} record?">
<h:form id="recordDeleteForm">
<p:commandButton value="#{msg.yes}" update=":tableForm"
oncomplete="PF('deleteDialog').hide(); PF('recordsTableWidgetVar').filter()"/>
<p:commandButton value="#{msg.no}" type="button"
onclick="PF('delete_record_dialog').hide()"/>
</h:form>
</p:confirmDialog>
If you want to fit in more content then you could use <f:facet name="message">...</f:facet/>
See also:
<p:confirmDialog> with a parameter message
I am looking for solution that p:overlayPanel content should update it self while clicking commendButton or commendLink. But its showing blank white p:overlayPanel when i click the button. The updating with the p:overlayPanel id in that button or link. I have tried many ways nothing worked out. Is my code wrong?
Please suggest some solution.
Here is my code :
<ui:repeat id="profiles" value="#{items.lstProfiles}" var="profile">
<p:commandLink id="profileLink" value="show" update="moviePanel"
actionListener="#{dashBoardController.showProfileOverlay}"/>
<p:overlayPanel id="moviePanel" for="profileLink" hideEffect="fade"
dynamic="true" style="width:300px; height: 150px;">
<h:panelGrid columns="2">
<h:outputText value="Name : "/>
<h:outputText value="#{dashBoardController.selectedProfile.name}"/>
</h:panelGrid>
</p:overlayPanel>
</ui:repeat>
Usually dynamic="true" should do the job but some times it fails.So to update the contents inside the Overlay.
There are many ways to do this by tweaking Jquery.
Simplest one I can think of is:
Since ui:repeat generates dynamic ID for p:overlayPanels you can update by providing unique css class name from every iteration.
In Primefaces you can select a component using css class also using: #(.myclass).
And so you can update that component also:- update="#(.mystyle)"
Example:
<h:form>
<ui:repeat var="patient" value="#{dataCenter.patientList}">
<p:commandLink value="#{patient.firstName}" id="patientNameLnk" update="#(.overlay-class-#{patient.patientId})"/><br/>
<p:overlayPanel for="patientNameLnk">
<h:panelGroup styleClass="overlay-class-#{patient.patientId}">
#{patient.firstName}
#{patient.lastName}
#{patient.dob}
</h:panelGroup>
</p:overlayPanel>
</ui:repeat>
</h:form>
In the above example css class name for every h:panelGroup will be generated as overlay-class-<PATIENT_ID> so every h:panelGroup will have unique class name(if patientId is unique).
Note: Note that I'm updating h:panelGroup inside p:overlayPanel because if you update p:overlayPanel then it might start flickering(it happened to me while executing above example).
I'm having some trouble with primefaces datatables and dynamic overlay for each row.
Basically I have a main datatable containing a certain number of rows. For each row, I have a button and a linked overlay that, when clicked, shows a small datatable in the overlay (it lists the lasts changes concerning the row).
Here is the simplified code:
//the main datatable
<p:dataTable id="terminauxDataTable" var="terminalBean" widgetVar="dataTableWidgetVar" value="#{cc.attrs.listAllTerminals}"
filteredValue="#{cc.attrs.listFilteredTerminals}">
...
<p:columnGroup>
<p:row>
<p:commandButton id="changelogButton"
type="button"/>
<p:overlayPanel id="changelogPanel" for="changelogButton"
dynamic="true">
//the small datatable for each row
<p:dataTable var="changelog" value="#{terminalBean.lastChangelogs}">
<p:column headerText="#{msg['commun.changelog.table.label.date']}">
<h:outputText value="#{changelog.dateHr}">
<f:converter converterId="dateTimeConverter" />
</h:outputText>
</p:column>
... some other colums
</p:dataTable>
</p:overlayPanel>
</p:row></p:column></p:datatable>
everything works fine at first sight. When I click on any button i do get the content that I want to load. it's supposed to look like this :
http://i.stack.imgur.com/n9GrW.png
(sorry, cannot post image directly)
Problems start to arise as soon as I make any filtering od sorting on the main datatable.
If a specific button was never clicked since page load, the overlay and the contained datatable are load successfuly. It dosen't matter if I applied a filter or a sort.
If I already clicked a button at least once and then I apply a sort/filter, if I try to click again on the button the overlay is shown but is empty, there is no datatable inside.
here is an exemple of a click after a filter on a button that was clicked before :
http://i.stack.imgur.com/eLGLo.png
Do you have any lead on how to address this problem ?
Thank you
Using the overlay opitimally with a datatable, requires a little different approach as can be seen in the PrimeFaces showcase of the overlayPanel
You need to put the overlayPanel outside the datatable, put a updatable container in there, e.g. an outputPanel and on the button in your column, update the panel and call the show function of the overlay panel with a specific parameter. Something like this:
<p:dataTable>
....
<p:column style="width:32px;text-align: center">
<p:commandButton update=":form:terminalDetail" oncomplete="PF('myTerminalOP').show('#{component.clientId}')" icon="ui-icon-search" title="Details">
<f:setPropertyActionListener value="#{selectedTerminal}" target="#{mySelectionView.selectedTerminal}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:overlayPanel widgetVar="myOP" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true">
<p:outputPanel id="terminalDetail" style="text-align:center;">
...
</p:outputPanel>
</p:overlayPanel>
(Disclaimer: done on my phone, so typos may be there)
On latest version of primeng we can do this.
Triggering the event based on element #id. By doing the toggle from typescript, I was able to pin point the element I need to attach the overlay panel to.
HTML:
<div>
<p-table>
<--loop the data-->
<button pButton (click)="showOP($event, rowwiseData, 'button'+rowIndex)" [id]="'button'+rowIndex"></button>
</p-table>
</div>
<--outside of the table add the overlay menu-->
<p-menu #menu [popup]="true" [model]="panelData"></p-menu>
TS File:
panelData: any;
#ViewChild('menu', {static: false}) op: OverlayPanel;
<!--Call and point the event to the correct element using unique #id-->
showOverlayPanel($event: MouseEvent, rowwiseData: any, id:string) {
this.panelData = rowwiseData;
this.op.toggle($event,document.getElementById(id));
}
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 need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.