Native jQuery with PrimeFaces Sample

PrimeFaces hides the complexity of client side technologies like javascript, jquery, css and html so most of the time you don’t need to worry about these and focus on business logic. However with some knowledge, there will be no limit in what we can on client side.

Here is a real story, a PrimeFaces PRO user asked as to come up with an example integration of tree and datatable with drag drop. Idea is that, tree displays available column properties and dragdrop of these on column headers adds a new column on the fly with that property. First we tried p:draggable and p:droppable and realized a couple of limitations, until they are tweaked and improved in PrimeFaces 4.0, we have decided to go one level down and used native jquery draggable-droppable and integrate it with PrimeFaces Tree, DataTable, Dynamic Columns and RemoteCommand.

Here is a live example from labs, just drag a tree node and drop it on available locations in column headers to get a new column. For sure it could be done easily in JSF way with drag drop components but the point is you are not limited to PrimeFaces if there is a feature you need and that’s not available in the library. This case is one of them.

3 thoughts on “Native jQuery with PrimeFaces Sample

  1. I can think of so many uses of this type of integration that I hadn’t considered before; thanks for the sample! How would you go about removing the columns in the same manner and avoid duplicating the columns?

  2. Funny example, Cagatay. Really easy to do with jQuery.

    By the way, in your example, you can drag & drop the entire tree by dragging / dropping “Columns” root node. The table looks amazing then :-) . Simple try :-) .