Virtualization in React MultiColumn ComboBox component

14 Jun 202412 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 of 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.

import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // local data generation function
  let data = (count) => {
    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 = [];
    for (let i = 0; i < count; 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)]
        });
    }
    return result;
  };
  // maps the appropriate column to fields property
  const fields = { text: 'Engineer', value: 'TaskID' };
  // set placeholder to multicolumn ComboBox input element
  const waterMark = 'Select an engineer';

  return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={data(150)} fields={fields} placeholder={waterMark} popupHeight={230} gridSettings= enableVirtualization={true}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' header='Employee ID' width={100}></ColumnDirective>
            <ColumnDirective field='Engineer' header='Name' width={140}></ColumnDirective>
            <ColumnDirective field='Designation' header='Designation' width={130}></ColumnDirective>
            <ColumnDirective field='Estimation' header='Estimation' width={120}></ColumnDirective>
            <ColumnDirective field='Status' header='Status' width={120}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // local data generation function
  let data: Function = (count: number) => {
    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: Object[] = [];
    for (let i = 0; i < count; 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)]
        });
    }
    return result;
  };
  // maps the appropriate column to fields property
  const fields: Object = { text: 'Engineer', value: 'TaskID' };
  // set placeholder to multicolumn ComboBox input element
  const waterMark: string = 'Select an engineer';

  return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={data(150)} fields={fields} placeholder={waterMark} popupHeight={230} gridSettings= enableVirtualization={true}>
        <ColumnsDirective>
            <ColumnDirective field='TaskID' header='Employee ID' width={100}></ColumnDirective>
            <ColumnDirective field='Engineer' header='Name' width={140}></ColumnDirective>
            <ColumnDirective field='Designation' header='Designation' width={130}></ColumnDirective>
            <ColumnDirective field='Estimation' header='Estimation' width={120}></ColumnDirective>
            <ColumnDirective field='Status' header='Status' width={120}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));

Binding remote data

The MultiColumn Combobox supports retrieval of data from remote data services with the 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.

import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // maps the appropriate column to fields property
  const fields = { text: 'ShipCountry', value: 'CustomerID' };
  // set placeholder to multicolumn ComboBox input element
  const waterMark = 'Select a country';
  //fetching the data
  const dataSource = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/Orders',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  });

  return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={dataSource} fields={fields} popupHeight={'230px'} placeholder={waterMark} gridSettings= enableVirtualization={true}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' header='OrderID' width={120}></ColumnDirective>
            <ColumnDirective field='CustomerID' header='CustomerID' width={130}></ColumnDirective>
            <ColumnDirective field='ShipCountry' header='ShipCountry' width={120}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-multicolumn-combobox';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  // maps the appropriate column to fields property
  const fields: Object = { text: 'ShipCountry', value: 'CustomerID' };
  // set placeholder to multicolumn ComboBox input element
  const waterMark: string = 'Select a country';
  //fetching the data
  const dataSource: DataManager = new DataManager({
    url: 'https://services.syncfusion.com/js/production/api/Orders',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  });

  return (
    // specifies the tag for render the MultiColumn ComboBox component
    <MultiColumnComboBoxComponent id="multicolumn" dataSource={dataSource} fields={fields} popupHeight={'230px'} placeholder={waterMark} gridSettings= enableVirtualization={true}>
        <ColumnsDirective>
            <ColumnDirective field='OrderID' header='OrderID' width={120}></ColumnDirective>
            <ColumnDirective field='CustomerID' header='CustomerID' width={130}></ColumnDirective>
            <ColumnDirective field='ShipCountry' header='ShipCountry' width={120}></ColumnDirective>
        </ColumnsDirective>
    </MultiColumnComboBoxComponent>
  );
}
ReactDOM.render(<App />, document.getElementById('multicolumn'));