Limit the Number of Items in Connected Listboxes

Environment

Product

Progress® Kendo UI® ListBox for jQuery

Description

I have two connected ListBoxes:

• The first one lists the available items.
• The second one lists the selected items, whose number is limited to five.

How can I disable the addition of new items to the second ListBox while at the same time the second box remains active for the user to reorder the items based on their priority sequence.

Solution

1. Create custom logic to determine if an item can be added to the selected list.
2. Apply the custom logic on the add event of the ListBox by using the view method of its dataSource. As a result, the approach adds and respectively removes the item from the first list only if the conditions are met.

For the complete implementation of the approach, refer to this runnable example.