Virtualization is the process of keeping track of which portions of the data are visible and rendering only those parts. Some of the input controls, such as ListBox, ComboBox and MultiSelectListBox support virtualization. These controls allow you to use the VirtualizationThreshold property from their respective classes to set the minimum number of rows and/or columns required to enable virtualization in them. By default, the virtualization is disabled in these controls as the value for the VirtualizationThreshold property is set to a really large number. However, you can enable virtualization by setting the value of VirtualizationThreshold property to 0 or a positive number.

The following image showcases a Virtualized ListBox control.

In the following example, we enable virtualization in ListBox using VirtualizationThreshold property of the ListBox class. Similarly, you can enable virtualization in ComboBox and MultiSelectListBox controls using VirtualizationThreshold property of the ComboBoxBase and the MultiSelectListBox class respectively. The following example uses Cities.cs model added in the Quick Start topic.

View Code

Add the "@using <ApplicationName>.Models" reference and then use the following code to enable Virtualization.

@{
    List<string> cities = Cities.GetCities();
}
<div>
    <label>Select your city:</label>
</div>

<div id="list" style="width:180px;height:200px"></div>
    <c1-list-box id="list" virtualization-threshold=0 >
    <c1-items-source source-collection="@cities"></c1-items-source>
</c1-list-box>


<p>
    <b>VirtualizationThreshold: <span id="lbSelVThreshold"></span></b>
</p>

<script>
    c1.documentReady(function () {
        document.getElementById('lbSelVThreshold').innerHTML = document.getElementById("list").childNodes.length;
    });
</script>