All Components

Controlling the State of the Suggestions List

The ComboBox enables you to control the open and close state of its suggestion list.

Configuration

To control the suggestion list state of the ComboBox:

  1. Configure the initially opened component
  2. Prevent the emitted open and close events

You can also retrieve the current open state of the suggestion list by using the isOpen getter.

Setting the Initially Opened Component

You can enable the user to manually toggle between the open and close state of the suggestion list by setting the toggle method. If set to true, the method defines that the suggestion list is open. If set to false, the method defines that the suggestion list is closed.

The following example demonstrates how to configure an initially opened ComboBox.

import { Component, ViewChild, onInit } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <kendo-combobox #combobox [data]="listItems" [suggest]="true" [placeholder]="'e.g. Andorra'"></kendo-combobox>
  `
})
class AppComponent implements onInit {
    @ViewChild("combobox") public combobox: any;
    public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

    public ngOnInit(): void {
        this.combobox.toggle(true);
    }
}

Preventing Opening and Closing

The open and close events are emitted right before the suggestion list is about to open or close. To prevent the corresponding action, call the preventDefault method of the event argument.

The following example demonstrates how to prevent the closing of the suggestion list.

import { Component, ViewChild } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <kendo-combobox #combobox [data]="listItems" [suggest]="true" [placeholder]="'e.g. Andorra'" (close)="onClose($event)"></kendo-combobox>
  `
})
    class AppComponent {
        @ViewChild("combobox") public combobox: any;
        public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
        public onClose(event: any) {
            event.preventDefault();
            //Close the list if the component is no longer focused
            setTimeout(() => {
                if(!this.combobox.wrapper.contains(document.activeElement)) {
                    this.combobox.toggle(false);
                }
            });
        }
}
In this article