CODEWITHSUNDEEP
javascriptangulartypescriptkendo-ui-angular2
Nicolas
Nicolas

Reputation: 4756

Angular 2 - Kendo UI Multi-Select option limit

I'm using Kendo-UI MultiSelect for Angular 2.

The component is working fine, however I need to set a limit of max 3 options that the user can pick. I noticed that it's possible to do this in the Angular 1 MultiSelect but I can't find anything in the Angular 2 documentation.

Does anyone know a way I can set the max limit of selected option to 3?

Here's my current code

component.html

<kendo-multiselect #sortingsDropdown
                   [data]="fixedData.PossibleValuesForGroupingsAndSortings"
                   [filterable]="true"
                   [textField]="'Name'"
                   [valueField]="'Type'"
                   [value]="sortingsArray"
                   (valueChange)="setSortingsArray(sortingsDropdown.value)">

</kendo-multiselect>

component.ts

public setSortingsArray(values: Array<models.IGroupingAndSorting>) {
    if (values.length <= 3) {
        this.sortingsArray = values;
        this.definitionDetails.Sortings = values;
    }

}

Upvotes: 1

Views: 3491

Answers (1)

rusev
rusev

Reputation: 1920

You can implement similar behavior like in this example - http://plnkr.co/edit/tDdP9eIuDrt27QmElTFg?p=preview

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-multiselect
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="value"
            placeholder="choose only 2 items"
            (valueChange)="handleValue($event)"
        >
        </kendo-multiselect>
    </div>
  `
})
export class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public value: Array<{ text: string, value: number }> = [];

    public handleValue(selected) {
      if (selected.length <= 2) {
          this.value = selected;  
      } else {
        this.value = this.value.map(item => item);
      }
    }
}

Upvotes: 3

Related Questions