primeng Separate templates for Source and Target of PickList

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior The PickList only allows the programmer to define a single item template that will be applied for both the source and target lists.

Expected behavior The PickList component should allow independent templating of the source and target list items if it is desired.

What is the motivation / use case for changing the behavior? To improve the flexilibity of the PickList.

PrimeNG version: 5.X 6.0.1
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] All
Language: [all | TypeScript X.X | ES6/7 | ES5] all

Jul 16 '18 10:07 danielthegray

We'll reconsider this if more users demand it, thank you. Currently no request has been made except this one.

Aug 14 '18 11:08 cagataycivici

@cagataycivici +1

Aug 26 '19 09:08 JaviManteiga

@JaviManteiga I posted code that does it here: https://github.com/primefaces/primeng/pull/6077

Aug 26 '19 13:08 danielthegray

Thank you @danielthegray I'll take a look.

Aug 27 '19 05:08 JaviManteiga

So this is what I've done as a workaround:

I extended the interface for the items in the list to include a property to indicate what list it's on (which means mapping the incoming data to add that property)
I created methods to handle the events from the onMoveToTarget, onMoveAllToTarget, onMoveToSource, and onMoveAllToSource events
I parse the event to get the items that have been moved (note, the shape of this event is different when using the buttons to move an item vs. when an item is dragged, so you'll have to handle that too if you're using drag/drop)
I iterate over the source or target list (as applicable) and update the custom property for every item on the list of moved items
I use an ngSwitch in the template to render different templates based on the value of the custom property

This is not efficient at all, but it's the only workaround I've found until the very simple PR from @danielthegray gets merged.

Apr 13 '21 22:04 johnmarian

Hi! We are also interested in this feature because we need to add an input on the target list!

Nov 11 '21 16:11 francowhyline

Hi! We are also interested in this feature because we need to add an input on the target list!

My team and I are also looking for the same functionality as well in the target list!

Nov 29 '21 02:11 ElCapitanSponge

@francowhyline +1

Dec 09 '21 12:12 avalero85

My team is also interested in this functionality

Aug 18 '22 12:08 AlbaSS18

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

Nov 09 '22 14:11 mertsincan

Hi,

I reviewed the docs and the picklist still doesn`t allow to use a template for the item in the source list and a different template in the target list.

Regards

Nov 09 '22 15:11 JaviManteiga

@cagataycivici +1 Hi, I see that there is a lot of demand for this feature but not done yet. Unfortunately I can't use this component without this feature