Kendo Angular Multiselect - Cap max items selected

[Megan]

I want to impose a limit on how many items a user can select in a multiselect, but I don't see any documentation for this. For the jQuery multiselect I see it has a maxSelectedItems, but there's nothing like that in the Angular version. How can I use the (valueChange) event to cap the selected items?

[Martin Bechev]

Hi Megan,

You are correct—the Kendo UI for Angular MultiSelect does not currently have a built-in maxSelectedItems property like the jQuery version. However, you can achieve a selection limit by combining the (valueChange) event and the [itemDisabled] input.

Since Angular’s MultiSelect does not manage a selection count for you, you need to keep track of the selected items in your component. For example, if you are using a reactive form or a component variable (e.g., selectedCodes), always update this array in your (valueChange) handler.

public selectedCodes: any[] = [];
public maxSelected = 5;

valueChange(selected: any[]): void {
  this.selectedCodes = selected;
}

The [itemDisabled] input can be set to a function that disables items when the maximum is reached. To ensure that already-selected items remain enabled (so users can deselect them), check if the item is already selected:

itemDisabled = (item: any): boolean => {
  // Prevent selecting more if at max, but allow deselecting
  return (
    this.selectedCodes.length >= this.maxSelected &&
    !this.selectedCodes.some(selected => selected.value === item.value)
  );
};

There is a public feature request for a built-in maxSelectedItems property:

• https://feedback.telerik.com/kendo-angular-ui/1360579-add-maxselecteditems 

You can follow the progress and vote for this feature in the feedback portal.

Let me know if you need a more detailed example based on your specific setup.

Regards,

Martin Bechev
Progress Telerik

[Megan]

Thanks, this is perfect!