Virtualization

The AutoComplete supports UI virtualization which provides options for significantly improving the performance when working with large datasets.

Regardless of the dataset size, the virtualization technique uses a fixed amount of DOM elements in the popup list of the component. When the list is scrolled, the component displays the relevant data by reusing the existing elements instead of creating new ones.

Setting the width property of the popupSettings to auto is not supported when virtual scrolling is enabled.

Enabling Virtualization

To enable the virtual scrolling, pass a VirtualizationSettings object to the virtual input property and specify the desired itemHeight.

Although rarely needed, you can control the number of DOM elements that the list will render through the pageSize property.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-autocomplete
            [data]="data"
            [valueField]="'name'"
            [virtual]="virtual"
            >
        </kendo-autocomplete>
    </div>
  `
})
class AppComponent {
    public createRandomData(count: number): any[] {
        const firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Anne', 'Nige'];
        const lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White'];
        const titles = ['Accountant', 'Vice President, Sales', 'Sales Representative', 'Technical Support', 'Sales Manager', 'Web Designer', 'Software Developer'];

        return Array(count).fill({}).map((_, idx) => ({
            id: idx,
            name: idx + 1 + " " + firstNames[Math.floor(Math.random() * firstNames.length)] + " " + lastNames[Math.floor(Math.random() * lastNames.length)],
            title: titles[Math.floor(Math.random() * titles.length)]
        }));
    }
    public data: Array<any> = this.createRandomData(1000);
    public virtual: any = {
      itemHeight: 28
    };
}

Using with Grouping and Filtering

Virtualization works together with grouping and filtering as well.

import { GroupResult, groupBy } from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-autocomplete
            [data]="groupedData"
            [valueField]="'name'"
            [virtual]="virtual"
            [filterable]="true"
            (filterChange)="handleFilter($event)">
        </kendo-autocomplete>
    </div>
  `
})
class AppComponent {
    public createRandomData(count: number): any[] {
        const firstNames = ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert', 'Anne', 'Nige'];
        const lastNames = ['Davolio', 'Fuller', 'Leverling', 'Peacock', 'Buchanan', 'Suyama', 'King', 'Callahan', 'Dodsworth', 'White'];
        const titles = ['Accountant', 'Vice President, Sales', 'Sales Representative', 'Technical Support', 'Sales Manager', 'Web Designer', 'Software Developer'];

        return Array(count).fill({}).map((_, idx) => ({
            id: idx,
            name: firstNames[Math.floor(Math.random() * firstNames.length)] + " " + lastNames[Math.floor(Math.random() * lastNames.length)],
            title: titles[Math.floor(Math.random() * titles.length)]
        }));
    }

    public handleFilter(query: string): void {
        const predicate = (item) => item.name.toLowerCase().indexOf(query.toLowerCase()) >= 0;
        this.groupedData = groupBy(this.data.filter(predicate), [{field: "title"}]);
    }

    public data: Array<any> = this.createRandomData(50);

    public groupedData: GroupResult[] = groupBy(this.data, [{field: "title"}]);

    public virtual: any = {
      itemHeight: 28
    };
}

In this article