Value Binding

The value of the MultiColumnComboBox can either be a primitive (strings, numbers, or other) or a complex value (objects).

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 will automatically update the corresponding field from the model after the value of the component changes.
• Use the formControlName value binding, which is available in the Reactive forms. If the value is set by the formControlName value binding, the framework will automatically update the corresponding field from the form model after the value of the component changes.

• The MultiColumnComboBox does not support the simultaneous usage of the value property and the ngModel value binding.
• The MultiColumnComboBox does not support values, which contain \n new line characters. The regular input HTML DOM element, which the MultiColumnComboBox uses internally treats \n as a regular whitespace. Therefore, when the component compares the value of the input element with the data item that is selected by the user, the two values differ. The value of the input element is actually not present in the data of the component and the MultiColumnComboBox does not recognize it. To handle such issues, map the incoming data so that it contains regular whitespaces only.

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

• Using primitive values (strings, numbers, or other)
• Using complex values (objects)
• Handling invalid value errors
• Handling unresolved text input

Primitive Values

To extract and use as a component value only the valueField value of the provided objects, set the valuePrimitive property of the MultiColumnComboBox to true.

The following example demonstrates how to use as a component value the id field value of the provided objects.

Object Values

The MultiColumnComboBox can only be data-bound to object values and, therefore, will expect to be bound to an object value by default.

Invalid Value Errors

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

In the following example, the valuePrimitive is not set to true, so the MultiColumnComboBox expects an object value. Instead, the example provides a number and, as a result, a JavaScript error is thrown in the console.

To fix the JavaScript issue, either:

• Provide the complete object as value, or
• Set the valuePrimitive property to true.

The following table lists the valid configuration scenarios.

Handling Unresolved Text Input

The text value which is assigned through the [value] or [(ngModel)] inputs and which is not found in the dataset will not be resolved. Such values also include object values that contain the textField property when allowCustom is set to false.

The following example demonstrates how to merge the assigned value with the dataset and ensure that its text will be properly extracted and displayed.

Suggested Links

• API Reference of the MultiColumnComboBox
• Data Binding
• Columns