Clear PrimeFaces TreeTable selection - jsf

How to implement a "Clear All Selection" button which will uncheck all selected things from a TreeTable implemented using PrimeFaces 6.2

I would use the client side API for this. It allows you to unselectAllNodes. You can use it in combination with the widgetVar of your tree table:
PF('yourWidgetVar').unselectAllNodes()
In a button, use it like:
<p:button value="Clear selection"
onclick="PF('yourWidgetVar').unselectAllNodes();return false"/>
Note that the linked documentation applies to the latest release, but the unselectAllNodes function is also present in 6.2:
https://github.com/primefaces/primefaces/blob/6_2/src/main/resources/META-INF/resources/primefaces/treetable/treetable.js#L701-L709

Related

Primefaces: How to add icon and <p:badges> inside <p:submenu> on Panel Menu?

As title stated, I want to put icon and badge beside the title of submenu of Panel Menu. However, Primefaces' submenu default icon is the expand arrow/triangle. When I do this:
<p:badge value="2">
<p:submenu icon="pi pi-envelope">
</p:badge>
It will prompt error, and doing vice versa like wrapping badge and closing using </p:submenu> is impossible because there are menuitems also. Not to mention the icon is not showing.
So, can I really achieve this using free open source provided? Or this is exclusive to paid user only?
Example from Primefaces template
Badges are not supported on (sub)menu items at this moment (PrimeFaces 11). No matter if you use a free or paid theme. The only component that currently supports a badge on a child node is p:speedDial. What you can do is open a feature request and if possible submit a pull request.
See also:
https://github.com/primefaces/primefaces/issues/7898
https://github.com/primefaces/primefaces/pull/7922

How to call bean method when drag-drop the element using <p:pickList>?

I am using primefaces 3.3 library for jsf based application.
I am using <p:pickList> to handle drag and drop the element from source to target and vide versa.
I want to call the jsf bean method when element transferring(by drag-drop ) from source to target and vice versa and handle some logical things there.
I follow the link PrimeFaces showcase for pickList to implement my functionality. This is the version 5.2.7.
In primefaces 5.2.7 it can be easily done by <p:ajax event="transfer" /> , but how can I achieve this using primafaces 3.3.
I try valueChangeListener attribute but it is not working.
There is one attribute called onTransfer , but it is for clientSide callback.
This can be achieve by putting submit button. But I want to achieve it on drag and drop. So how can i do that ?
Thanks in advance.
First, you should consider an update of your primefaces version. Updates are not only provided for new features but also for bug fixes, improvements (performance, stability) etc.
Currently I cannot find the documentation for 3.3, but what you could try is using p:remoteCommand (its in the 3.5 documentation, so maybe available):
use onTransfer="submitToBean()" along with a p:remoteCommand that might look like this:
<p:remoteCommand
name="submitToBean"
action="#{myBean.doSomething}"
process="idOfYourPickList"
partialSubmit="true" />
Then the onTransfer Event will call the javascript method submitToBean() which in turn will process your picklist and call the action method.

Primefaces confirm dialog not centered when used in conjuntion with richfaces

As per my question title, when I use richfaces, specifically a rich:popupPanel, my primefaces confirm dialog, p:confirmDialog, gets placed top/left justified. If I remove the the richfaces popup panel the primefaces dialog gets centered in the browser window as expected.
I tried changing the order of the namespace entries but that didn't work. What else can I try. I see richfaces also has a confirm dialog that I'm going to look into, it's just that I already had the primefaces version working on other pages, that happen to not have the richfaces popup panel.
I can post code if necessary.
You should not use Richfaces and Primefaces together. There so many conflicts between them both in terms of css and javascript. You can solve css problems by overwriting them and using '!important' at the end of each setting.
for example,
.class{
//...
text-align: center !important
}
However, Your best bet is to use just primefaces

In-cell editing using Primefaces 3.1 datatable

I am trying to use in-cell editing feature of datatable using Primefaces 3.1. The example shown on their site does not show how could I use "delete" functionality. When I click on "edit" image to make changes in the table row, it works. However, nothing happens when I click on the "delete" image.
I took the code from a working demo availble at PrimeFaces showcase. But, this demo also does not work for "delete".
However, nothing happens when I click on the "delete" image.
It is not clear what is "when I click on the delete image". In the Primefaces showcase there is no delete image (maybe you mix it with the cross icon, but this is for discarding changes).
I think you need to add delete functionality yourself, e.g. in a separate column (example as addition to the Primefaces showcase code):
<p:column>
<h:commandButton value="Delete" action="#{tableBean.delete(car)}"/>
</p:column>
and in the backing bean:
public void delete(Car car) {
carsSmall.remove(car);
}

How do I reorder rows in DataTable using drag drop?

I am using PrimeFaces and JSF. Can anyone tell me how do I reorder rows of a DataTable using Primefaces drag and drop component?
Currently with in the PrimeFaces framework (v2.2.1 and 3.0) this is not possible with <p:dataTable>.
There is an open PrimeFaces Issue 511 <p:dataTable> draggable columns to add the Yahoo widget datatable draggableColumns attribute to the PrimeFaces <p:dataTable> but no target version is set yet.
If you would like to see this added to PrimeFaces star the issue to help give it higher priority.
This is definitely an older question, but the answer needs updating. This is now doable using the draggableColumns="true" attribute on your p:dataTable.
Your dataTable would then look as such :
<p:dataTable var="i" value="#{bean.data}" draggableColumns="true">
Sources :
PrimeFaces Showcase : DataTable - Columns Reordering
This feature is now available from PrimeFaces 5.0:
Usage is very simple by just enabling draggableRows option and also an optional rowReorder ajax behavior is provided getting a ReorderEvent with index information for flexibility.
Source : http://blog.primefaces.org/?p=3026
You can also have a look at the showcase here: http://www.primefaces.org/showcase/ui/data/datatable/reorder.xhtml

Resources