ASP.NET MVC Controls | ComponentOne
Working with Controls / Input Controls / Common Features / Virtualization
In This Topic
    Virtualization
    In This Topic

    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

    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.

    Index.cshtml
    Copy Code
    @{
        List<string> cities = Cities.GetCities();
    }
    <div>
        <label>Select your city:</label>
    </div>
    
    <div>
        @(Html.C1().ListBox()
            .Id("list")
            .Bind(cities)
            .Width(180).Height(200)
            .VirtualizationThreshold(0)
        )
    </div>
    
    <p>
        <b>VirtualizationThreshold: <span id="lbSelVThreshold"></span></b>
    </p>
    
    <script>
        c1.documentReady(function () {
            document.getElementById('lbSelVThreshold').innerHTML = document.getElementById("list").childNodes.length;
        });
    </script>