Virtualization in EJ2 JavaScript MultiColumn ComboBox control

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.

var data = function(count) {
  var names = ["John", "Alice", "Bob", "Mario Pontes", "Yang Wang", "Michael", "Nancy", "Robert King"];
  var hours = [8, 12, 16];
  var status = ["Pending", "Completed", "In Progress"];
  var designation = ["Engineer", "Manager", "Tester"];
  var result = [];
  for (var 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;
};

var columns = [
  { field: 'TaskID', header: 'Task ID', width: 100 },
  { field: 'Engineer', header: 'Engineer', width: 140 },
  { field: 'Designation', header: 'Designation', width: 130 },
  { field: 'Estimation', header: 'Estimation', width: 120 },
  { field: 'Status', header: 'Status', width: 120,}
];

var virtualComboboxObj = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: data(150),
  columns: columns,
  enableVirtualization: true,
  fields: { text: 'Engineer', value: 'TaskID'},
  placeholder: 'Select an engineer',
  popupHeight: '230px',
  gridSettings: { rowHeight: 40 }
});
virtualComboboxObj.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

var columns = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', header: 'Customer ID', width: 130 },
    { field: 'ShipCountry', header: 'Ship Country', width: 120 }
];

var virtualComboboxObj = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: new ej.data.DataManager({
    url:'https://services.syncfusion.com/js/production/api/Orders',
    adaptor: new ej.data.WebApiAdaptor(),
    crossDomain: true
  }),
  columns: columns,
  enableVirtualization: true,
  fields: { text: 'ShipCountry', value: 'CustomerID' },
  popupHeight: '230px',
  placeholder: 'Select a country',
  gridSettings: { rowHeight: 40 }
});
virtualComboboxObj.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>