New to Kendo UI for Angular? Start a free 30-day trial

Custom Values

By default, when the Enter key is pressed or after the component loses focus, values that do not appear in the supplied list of items are dismissed.

To configure the MultiColumnComboBox to accept custom values, set the allowCustom property to true.

Normalizing Values

As the component can be bound to object data only, enabling custom values also requires you to provide a valueNormalizer function. The purpose of the valueNormalizer function is to convert the user text input to an object that can be recognized as a valid MultiColumnComboBox value with text and value fields.

The valueNormalizer function receives an Observable<string> as an argument and is expected to return a single normalized value wrapped as Observable, which will be further processed by the component.

The following example demonstrates how to allow and process custom values locally.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using a Remote Service

The following example demonstrates how to handle custom object values through a remote service. A mocked backend will process the provided text and return an object with the expected interface.

Example
View Source
Edit In Stackblitz  
Change Theme:

Handling Errors

The following example demonstrates how to handle errors that occur while normalizing custom object values through a remote service. For demo purposes, any provided custom value will be rejected by the mocked backend.

Example
View Source
Edit In Stackblitz  
Change Theme: