Controlling the Open State

The MultiSelect enables you to control the open and close state of its options list.

Configuration

To set the state of the list:

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

You can also retrieve the current open state of the options 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 options list by setting the toggle method. If set to true, the method defines that the options list is open. If set to false, the method defines that the options list is closed.

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

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

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

Preventing Opening and Closing

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

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <div>
            <label><input type="checkbox" [(ngModel)]="isOpenDisabled"> Disable Popup Opening</label>
        </div>
        <div>
            <label><input type="checkbox" [(ngModel)]="isCloseDisabled"> Disable Popup Closing</label>
        </div>
    </div>

    <kendo-multiselect
        [data]="listItems"
        (open)="onOpen($event)"
        (close)="onClose($event)">
    </kendo-multiselect>
  `
})
class AppComponent {
    public isOpenDisabled: boolean;
    public isCloseDisabled: boolean;

    public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

    public onOpen(event: any): void {
        if (this.isOpenDisabled) {
            event.preventDefault();
        }
    }

    public onClose(event: any) {
        if (this.isCloseDisabled) {
            event.preventDefault();
        }
    }
}

Keeping the Options List Open while on Focus

You can configure the MultiSelect to remain open until the user finishes selecting items from its options list. To prevent the options list from closing while it is still on focus, set the autoClose property to false. By default, autoClose is set to true.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-multiselect
        [data]="listItems"
        [autoClose]="false">
    </kendo-multiselect>
  `
})
class AppComponent {
    public listItems: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
}

In this article