# Virtualization

## Content



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.

![MVC Input control Virtualization](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/input-virtualization.png)

In the following example, we enable virtualization in ListBox using [VirtualizationThreshold](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.ListBox-1.VirtualizationThreshold.html) 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](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/ListBox/ListBoxQuickStart) topic.

**View Code**

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

```razor
@{
    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>
```