Virtualization in ASP.NET CORE MultiColumn Combobox control

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

@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
    <ejs-multicolumncombobox id="virtualization" dataSource="ViewBag.EmpData" enableVirtualization="true" popupHeight="230px"
    placeholder="Select an engineer">
        <e-multicolumncombobox-gridsettings rowHeight=40></e-multicolumncombobox-gridsettings>
        <e-multicolumncombobox-fields text="Engineer" value="TaskID"></e-multicolumncombobox-fields>
        <e-multicolumncombobox-columns>
            <e-multicolumncombobox-column field="TaskID" header="Task ID" width="100"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="Engineer" header="Engineer" width="140"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="Designation" header="Designation" width="130"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="Estimation" header="Estimation" width="120"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="Status" header="Status" width="120"></e-multicolumncombobox-column>
        </e-multicolumncombobox-columns>
    </ejs-multicolumncombobox>
</div>
public ActionResult Demo()
{
    MultiColumnComboBoxRecord model = new MultiColumnComboBoxRecord();
    model.Records = new MultiColumnComboBoxRecord().GenerateTasks(150);
    ViewBag.EmpData = model;
    return View(model);
}

public class MultiColumnComboBoxRecord
{
    public int TaskID { get; set; }
    public string Engineer { get; set; }
    public string Designation { get; set; }
    public int Estimation { get; set; }
    public string Status { get; set; }

    public List<MultiColumnComboBoxRecord> Records { get; set; }

    public List<MultiColumnComboBoxRecord> GenerateTasks(int count)
    {
        var names = new List<string> { "John", "Alice", "Bob", "Mario Pontes", "Yang Wang", "Michael", "Nancy", "Robert King" };
        var hours = new List<int> { 8, 12, 16 };
        var status = new List<string> { "Pending", "Completed", "In Progress" };
        var designation = new List<string> { "Engineer", "Manager", "Tester" };
        var result = new List<MultiColumnComboBoxRecord>();
        for (var i = 0; i < count; i++)
        {
            result.Add(new MultiColumnComboBoxRecord
            {
                TaskID = i + 1,
                Engineer = names[new Random().Next(names.Count)],
                Designation = designation[new Random().Next(designation.Count)],
                Estimation = hours[new Random().Next(hours.Count)],
                Status = status[new Random().Next(status.Count)]
            });
        }
        return result;
    }
}

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.

@using Syncfusion.EJ2.MultiColumnComboBox;

<div class="container" style="width: 500px">
    <ejs-multicolumncombobox id="remoteVirtualization" popupHeight="230px" placeholder="Select a country" enableVirtualization=true>
        <e-data-manager url="https://services.syncfusion.com/js/production/api/Orders" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager>
        <e-multicolumncombobox-fields text="ShipCountry" value="CustomerID"></e-multicolumncombobox-fields>
        <e-multicolumncombobox-gridsettings rowHeight=40></e-multicolumncombobox-gridsettings>
        <e-multicolumncombobox-columns>
            <e-multicolumncombobox-column field="OrderID" header="Order ID" width="120"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="CustomerID" header="Customer ID" width="130"></e-multicolumncombobox-column>
            <e-multicolumncombobox-column field="ShipCountry" header="Ship Country" width="120"></e-multicolumncombobox-column>
        </e-multicolumncombobox-columns>
    </ejs-multicolumncombobox>
</div>
public ActionResult Demo()
{
    return View();
}