Handling the reordering of the picklist

Question

From the Primefaces 5.0's documentation concerning the PickList component:

PickList provides transfer as the default and only ajax behavior event that is fired when an item is moved from one list to the other. Example below demonstrates how to use this event.

However, my use case requires me to track changes if the order of the transfered items is being changed by the user using the reordering buttons (shown using the showTargetControls flag)

What are my options to keep track of the order of the elements in the Target list?

Edit Jan. 2015: As SJuan76 comment states: As per PF's version 5.1.9, 3 new events were added to the API: reorder, select, unselect. Source: https://code.google.com/p/primefaces/issues/detail?id=5945

Seems that with Primefaces 5.1.9 there is already an event handling reordering; hopefully it will be available in the 5.2.0 community edition. — SJuan76

codeturner codeturner · Accepted Answer · 2014-09-11T22:40:29

Since primefaces doesn't provide an interface to fire those events, you'll have to provide your own hook.

Since this is a common question, here's how you do it.

In this case, I would override the saveState function to fire your own event after any picklist modifications (transfer or sorting). To do this, use the following script to override the primefaces javascript with jquery extend, which ends up modifying the provided primefaces code:

<script>
  (function($) {
    $.extend(PrimeFaces.widget.PickList.prototype, {
        _old_saveState : PrimeFaces.widget.PickList.prototype.saveState,
        saveState : function() {
            this._old_saveState();
            // TODO: call custom functionality here, such as calling a p:remoteCommmand
        }
    });
  })(jQuery);
</script>

Most importantly, you'll have to dig into the primefaces javascript to learn what's really going on. Just be careful to re-test after upgrading between versions of primefaces.

Handling the reordering of the picklist

1 Answers