Virtualization in Vue MultiColumn ComboBox component

19 Jun 202413 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.

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <ejs-multicolumncombobox id='multicolumn' :dataSource='empData(150)' :fields='fields' placeholder='Select an engineer' popupHeight='230px' :gridSettings='gridSettings' enableVirtualization='true'>
            <e-columns>
              <e-column field='TaskID' header='Employee ID' width='100'></e-column>
              <e-column field='Engineer' header='Name' width='140'></e-column>
              <e-column field='Designation' header='Designation' width='130'></e-column>
              <e-column field='Estimation' header='Estimation' width='120'></e-column>
              <e-column field='Status' header='Status' width='120'></e-column>
            </e-columns>
        </ejs-multicolumncombobox>
    </div>
  </div>
</template>

<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const empData = (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;
};
const gridSettings = { rowHeight: 40 };
const fields = { text: 'Engineer', value: 'TaskID' };
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <ejs-multicolumncombobox id='multicolumn' :dataSource='empData(150)' :fields='fields' placeholder='Select an engineer' popupHeight='230px' :gridSettings='gridSettings' enableVirtualization='true'>
            <e-columns>
              <e-column field='TaskID' header='Employee ID' width='100'></e-column>
              <e-column field='Engineer' header='Name' width='140'></e-column>
              <e-column field='Designation' header='Designation' width='130'></e-column>
              <e-column field='Estimation' header='Estimation' width='120'></e-column>
              <e-column field='Status' header='Status' width='120'></e-column>
            </e-columns>
        </ejs-multicolumncombobox>
    </div>
  </div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";

export default {
  components: {
    'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective,
  },
  data () {
    return {
      gridSettings: { rowHeight: 40 },
      fields: { text: 'Engineer', value: 'TaskID' }
    }
  },
  methods: {
    empData: function(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;
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>

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.

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder='Select a country' popupHeight='230px' :gridSettings='gridSettings' enableVirtualization='true'>
            <e-columns>
              <e-column field='OrderID' header='OrderID' width={120}></e-column>
              <e-column field='CustomerID' header='CustomerID' width={130}></e-column>
              <e-column field='ShipCountry' header='ShipCountry' width={120}></e-column>
            </e-columns>
        </ejs-multicolumncombobox>
    </div>
  </div>
</template>

<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const empData = new DataManager({
  url: 'https://services.syncfusion.com/js/production/api/Orders',
  adaptor: new WebApiAdaptor,
  crossDomain: true
});
const gridSettings = { rowHeight: 40 };
const fields = { text: 'ShipCountry', value: 'CustomerID' };
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder='Select a country' popupHeight='230px' :gridSettings='gridSettings' enableVirtualization='true'>
            <e-columns>
              <e-column field='OrderID' header='OrderID' width={120}></e-column>
              <e-column field='CustomerID' header='CustomerID' width={130}></e-column>
              <e-column field='ShipCountry' header='ShipCountry' width={120}></e-column>
            </e-columns>
        </ejs-multicolumncombobox>
    </div>
  </div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
export default {
  components: {
    'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
    'e-columns': ColumnsDirective,
    'e-column': ColumnDirective,
  },
  data () {
    return {
      empData: new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/Orders',
        adaptor: new WebApiAdaptor,
        crossDomain: true
      }),
      gridSettings: { rowHeight: 40 },
      fields: { text: 'ShipCountry', value: 'CustomerID' }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>