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 ComboBox to accept custom values, set the allowCustom property to true.

Primitive Values

If the component is bound to primitive values, set the allowCustom property to true.

This approach is valid when the component is either bound to a dataset of primitive values or to a dataset of objects, and the valuePrimitive property is set to true.

The following example demonstrates how to allow custom primitive values.

Example
View Source
Edit In Stackblitz  
Change Theme:

Object Values

If the component is bound to objects, set the allowCustom property to true and provide a valueNormalizer function. The purpose of the valueNormalizer function is to convert the user text input into an object that can be recognized as a valid ComboBox value.

The valueNormalizer function receives 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 custom object values.

import { map } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  template: `
    <p>Custom values are <strong>enabled</strong>. Type a custom value.</p>
    <p>ComboBox value: {{ size|json }}</p>

    <kendo-combobox
        [allowCustom]="true"
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [valueNormalizer]="valueNormalizer"
        [(ngModel)]="size"
    >
    </kendo-combobox>
  `
})

class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public size: { text: string, value: number } = { text: "Medium", value: 2 };

    /*
        The component will emit custom text, which is typed by the user, and pass it to the `valueNormalizer` method.
        You can process the custom text, create a single custom object that represents the normalized value,
        and pass it back wrapped as an Observable.

        This example uses the `map` operator to transform text into a normalized value object.

        For more information on the `map` operator, refer to
        http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map.
    */
    public valueNormalizer = (text: Observable<string>) => text.pipe(map((text: string) => {
        return {
            value: this.listItems[this.listItems.length - 1].value + 1,
            text: text
        };
    }));
}

Remote Service

The following example demonstrates how to handle custom object values through a remote service.

Handling Errors

The following example demonstrates how to handle errors that occur while normalizing custom object values through a remote service.

In this article

Not finding the help you need?