Primeng: Feature Request: Selection limit for multiselect items
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
A property which could denote number of max items that could be selected in multiselect would be a nice addon for one of our usecase. If the max items are selected, other items should be disabled.
If property is not provided, then by default, the user can select any number of items.
What is the motivation / use case for changing the behavior?
There are use cases where we would want to limit the number of items that a user can select in multiselect. We are manipulating dom to attain this feature now, which is a bad way to go forward. Adding this property would be a good feature.
I can work on this feature and raise a pull request.
preethi29
All 6 comments
Raised a pull request. Can someone please review this and give feedback?
preethi29
on 6 Dec 2017
@cagataycivici any update on this?
preethi29
on 13 Dec 2017
I'd also like to use this feature. Any update on the pull request?
Venthe
on 12 Feb 2018
Yes, I need this feature too
pierfreeman
on 16 Feb 2018
@Venthe
@pierfreeman
as a temporary solution you can:
1) in the template add to p-multiSelect component event (onChange) with invoking on this event method ="myMethod($event)"
<p-multiSelect (onChange)="myMethod($event)" ... ></p-multiSelect>
2) inClass:
myMethod(e) {
const LIMIT_NUMBER = 3;
if (e.value.length > LIMIT_NUMBER) {
e.value.pop();
}
}
denisgoodfella
on 17 Feb 2018
myMethod(e) { const LIMIT_NUMBER = 3; if (e.value.length > LIMIT_NUMBER) { e.value.shift(); } }
Will give a behavior similar to a traditional select
Recodify
on 3 Feb 2020
Related issues
Helayxa
路
3Comments
limjoonae
路
3Comments
lilling
路
3Comments
KannanMuruganmony
路
3Comments
cyberrranger
路
3Comments
Most helpful comment
@Venthe
@pierfreeman
as a temporary solution you can:
1) in the template add to p-multiSelect component event (onChange) with invoking on this event method ="myMethod($event)"
<p-multiSelect (onChange)="myMethod($event)" ... ></p-multiSelect>2) inClass:
myMethod(e) { const LIMIT_NUMBER = 3; if (e.value.length > LIMIT_NUMBER) { e.value.pop(); } }