Virtualization in Angular MultiColumn ComboBox component

14 Jun 20247 minutes to read

MultiColumn ComboBox virtualization is a technique used to efficiently render extensive lists of items while minimizing the impact on performance. This method is particularly advantageous when dealing with large datasets because it ensures that only a fixed number of DOM (Document Object Model) elements are created. When scrolling through the list, existing DOM elements are reused to display relevant data instead of generating new elements for each item. This recycling process is managed internally.

Enabling the enableVirtualization property option in a MultiColumn ComboBox activates this virtualization technique.

Binding local data

The MultiColumn Combobox can generate its list items through an object arrays of data. For this, the appropriate columns should be mapped to the fields property. When using virtual scrolling, the list updates based on the scroll offset value, triggering a request to fetch more data from the server.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='records' [fields]='fields' [placeholder]='waterMark' [enableVirtualization]='true' [gridSettings]='gridSettings' popupHeight='230px'>
                 <e-columns>
                    <e-column field='TaskID' header='Task ID' width='100'></e-column>
                    <e-column field='Engineer' header='Engineer' width='140'></e-column>
                    <e-column field='Designation' header='Designation' width='130'></e-column>
                    <e-column field='Status' header='Status' width='110'></e-column>
                </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
  //Generate large datas
  public records: { [key: string]: Object }[] = [];
  constructor() {
      let names = ["John", "Alice", "Bob", "Mario Pontes", "Yang Wang", "Michael", "Nancy", "Robert King"];
      let hours = [8, 12, 16];
      let status = ["Pending", "Completed", "In Progress"];
      let designation = ["Engineer", "Manager", "Tester"];
      let result: { [key: string]: Object }[] = [];
      for (let i = 0; i < 150; i++) {
          result.push({
              TaskID: i + 1,
              Engineer: names[Math.floor(Math.random() * names.length)],
              Designation: designation[Math.floor(Math.random() * designation.length)],
              Estimation: hours[Math.floor(Math.random() * hours.length)],
              Status: status[Math.floor(Math.random() * status.length)]
          });
      }
      this.records = result;
  }
  public fields: Object = { text: 'Engineer', value: 'TaskID'};
  public waterMark: string = 'Select an engineer';
  public gridSettings: Object = { rowHeight: 40 };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Binding remote data

The MultiColumn Combobox supports retrieval of data from remote data services with the help of DataManager component. When using remote data, it initially fetches all the data from the server and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='dataSource' [placeholder]='waterMark' [enableVirtualization]='true' [gridSettings]='gridSettings' [fields]='fields' popupHeight='230px'>
                  <e-columns>
                    <e-column field='OrderID' header='Order ID' width='120'></e-column>
                    <e-column field='CustomerID' header='Customer ID' width='130'></e-column>
                    <e-column field='ShipCountry' header='Ship Country' width='120'></e-column>
                  </e-columns>
               </ejs-multicolumncombobox>`
})
export class AppComponent {
    public dataSource = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/Orders',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  });
  public fields: Object = { text: 'ShipCountry', value: 'CustomerID' };
  public waterMark: string = 'Select a name';
  public gridSettings: Object = { rowHeight: 40 };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));