I am putting together a multiselect dropdown in Kendo UI for Angular and I have a use case where I want the user to only be able to select up to five options. I've configured the dropdown to use the itemDisabled function, but found that the function only has context to see each of the data items individually. I've tried to reference a global 'counter' variable that I'm setting each time the valueChange event is fired, but the counter variable is undefined in the itemDisabled function. I know that Kendo for jsp has a max items param, but angular does not. Any suggestions?
HTML File
<kendo-multiselect class="input"
formControlName="code"
[checkboxes]="true"
[autoClose]="false"
[data]="codes"
textField="value"
valueField="value"
placeholder="Select Code(s)"
[style.width.px]="300"
[itemDisabled]="itemDisabled"
(valueChange)="valueChange($event)">
<ng-template kendoMultiSelectHeaderTemplate let-dataItem>
<button *ngIf="code.length !== codes.length && codes.length <= 15" (click)="code = codes">Select all Codes</button>
<button *ngIf="code.length === codes.length" (click)="code = []">Deselect all Codes</button>
</ng-template>
</kendo-multiselect>
TS File
valueChange(value : any) : void {
this.selectedCages = value.length;
console.log("selectedCage - " + this.selectedCages);
}
itemDisabled(itemArgs: { dataItem: any; index: number }): boolean {
console.log("selectedCages - " + this.selectedCages);
return this.selectedCages >= 5;
}