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
Related
We are currently migrating our application which was written in richfaces to primefaces.
I am looking for alternative for rich:extendedDataTable in primefaces. the extended data table does something like this
is there a way to achiveve this in primefaces with p:dataTable?
From looking over the RichFaces ExtendedDatatable I think the PrimeFaces Extensions Sheet component is what you are looking for. From what I can see it does almost everything that Extended Datatable does except Live Scroll.
I am trying to figure out how to drop a node from p:tree do p:datatable.
My configuration is primefaces 6.1, myfaces 2.2.12.
Is this possible? I passed thru all tutorials, examples..and didnt see how to do it.
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.
I want to represent my data from a MYSQL database table in a primefaces carousel or slider or datagrid with one row. The carousel does not work at all. The datagrid does not work when I add rows="1" attribute and I don't know how to implement my data into a slider.
Any ideas?
I solved the problem. The version of jQuery I had included into my xhtml file was different from that of primefaces jQuery library. So I just used the primefaces jQuery library and deleted the other one and all primefaces components worked as they should.
I want to try out building a simple grid that has a delete column, consisting of checkboxes, just like the usual one in email.
User can then tick the checkboxes, and press delete, and i can get all the checked records, and delete them one by one.
Im trying to find a way to achieve this, but so far im still in doubt.
These are what i have in mind, each with it's own implementation question, haha :
How to get the checked row indexes ? Using actionlistener for each toggle on each checkbox ? (but how do i pass the clicked index to the actionlistener ?)
Or is there a way where i can get all the grid model, and loop the data to find out which one is checked, just like swing ? (but how do i get the grid model in the jsf bean ?)
Or perhaps i should bind them to a simple list that contains only the checkbox column data ? (but how do i bind each checkbox to the list using indexes ?)
Im currently using primefaces, but i think the JSF solution can also be applied to primefaces datatable.
Please share your thoughts on this !
Thank you !
Isn't this example from Primefaces showcase exactly what you are looking for?
It looks that it is simply adding a column to the p:dataTable this way:
<p:dataTable var="item" value="#{yourBean.allElements}"
selection="#{yourBean.selectedElements}">
<p:column selectionMode="multiple" />
... other columns
</p:dataTable>