All Components

Value Binding

The MultiSelect value can be either a primitive value (string, number, or other) or an object.

To set the value, apply any of the following approaches:

  • Use the value property. If the value is set through the value property, you have to hook up to the valueChange event and manually update the value of the value property.
  • Use the ngModel value binding. If the value is set by the ngModel value binding, the framework automatically will update the corresponding field from the model after the value of the component changes.
  • Use the formControlName value binding available in the Reactive forms. If the value is set by the formControlName value binding, the framework automatically will update the corresponding field from the form model after the value of the component changes.

The MultiSelect does not support the simultaneous usage of the value property and the ngModel value binding.

When binding the MultiSelect value, the component provides options for:

Primitive Values

If the MultiSelect is bound to a dataset of primitives, its value will be a primitive of the same type.

Primitive data types include:

  • String
  • Number
  • Undefined
  • Null
@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        Selected Values: {{selectedValues | json}}
    </div>
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-multiselect [data]="listItems" [(ngModel)]="selectedValues"></kendo-multiselect>
    </div>
  `
})
export class AppComponent {
    public listItems: Array<string> = [ "Small", "Medium", "Large" ];
    public selectedValues: string = [ "Medium" ];
}

Object Values

If the MultiSelect is bound to a dataset of objects, its value will be an object of the same type.

interface Item {
  text: string,
  value: number
}

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

    public selectedItems: Item[] = [ this.listItems[1] ];
}

Primitive Values from Object Fields

If the MultiSelect is bound to a dataset of complex objects and the valuePrimitive property is set to true, its value will also be of the primitive type (string, number).

interface Item {
  text: string,
  value: number
}

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

    public selectedValues: number[] = [2];
}

Invalid Value Errors

If the value which is assigned through the [value] or [(ngModel)] inputs does not match the expected type, the MultiSelect throws a JavaScript error.

In the following example, the component has both its [valueField] and [textField] specified, which implies that the [data] will contain objects. Because the [valuePrimitive] is not explicitly set to true, the MultiSelect expects an object value. Instead, a number is provided and, as a result, a JavaScript exception occurs.

interface Item {
  text: string,
  value: number
}

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect
        [data]="listItems"
        textField="text"
        valueField="value"
        [(ngModel)]="selectedValue"
    >
    </kendo-multiselect>
  `
})
export class AppComponent {
    //Using an array of objects as `[data]`
    public listItems: Array<Item> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large', value: 3 }
    ];
    //Trying to assign a primitive value to the MultiSelectComponent
    public selectedValue: number = 2;
}

To fix the JavaScript issue, either:

  • Change the value type, or
  • Update the settings of the component.

The following table lists the valid configuration scenarios.

Value [Data] [ValuePrimitive]
[primitives] primitives Not set (automatically calculated as true)
[objects] objects Not set (automatically calculated as false)
[primitives] objects true (manually set by the developer)
In this article