Data Binding

The MultiSelect enables you to bind to a list of possible values.

The list can contain primitive (strings and numbers) or complex (objects) items.

Binding to Local Data

When binding it to local data, the MultiSelect provides options for binding it to:

Arrays of Primitive Data

The following example demonstrates how to bind the MultiSelect to an array of primitive data.

Example
View Source
Edit In Stackblitz  
Change Theme:

Arrays of Complex Data

When the component is bound to complex data (objects), define the textField and valueField properties. The MultiSelect will extract the value and text values from the selected data item and in this way will set the selected value and text.

If you do not intend to use an object as a value, bind the MultiSelect to a primitive field value instead. For more information, refer to the article on value binding.

The following example demonstrates how to bind the MultiSelect to an array of complex data.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      Current value: {{value | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
      ></kendo-multiselect>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
    public value: any = [{ text: "Medium", value: 2 }];
}

Binding to Remote Data

When binding it to remote data, the MultiSelect provides options for:

Services

The following example demonstrates how to bind the MultiSelect to remote data by using a service.

Async Pipe

The following example demonstrates how to bind the MultiSelect to an asynchronous source.

Streaming of Data

You can also bind the MultiSelect to asynchronous data (observables) by using the async pipe.

The following example demonstrates how to utilize this approach. It starts with an empty observable, produces one random value each second, and emits values in batches of five.

import { Observable, interval } from 'rxjs';
import { bufferCount, map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <p>The selected value will disappear when the new data is set.</p>
      <p>A new data will be available every 5 seconds (initially the MultiSelect will be empty).</p>
    </div>
    <kendo-multiselect [data]="listItems | async"></kendo-multiselect>
  `
})
export class AppComponent {
  public listItems: Observable<string[]>;

  constructor() {
    this.listItems = interval(1000).pipe(
        map((x) =>  "New item " + x),
        bufferCount(5)
    );
  }
}