Virtualization.cshtml

@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists
@using Syncfusion.EJ2.DropDowns
@section ControlsSection{
    @{ var template = "<div class='e-list-wrapper e-list-avatar'>" +
                 "<span id=\"${$imgUrl ? \'hideUI\' : \'showUI\' }\" class='e-avatar e-avatar-circle' icon='${icon}'> " +
            "${icon}</span> <img id=\"${$imgUrl ? \'showUI\' : \'hideUI\' }\" class='e-avatar e-avatar-circle' src=\"${$imgUrl ?  $imgUrl : \' \' }\" />" +
            "<span class='e-list-content'>${name}</span></div>";

    }
    <div class="col-lg-8  control-section">
        <!-- ListView element -->
        @Html.EJS().ListView("ui-list").EnableVirtualization(true).CssClass("e-list-template").DataSource((IEnumerable<object>)ViewBag.listData).HeaderTitle("Contacts").ShowHeader(true).Height("500").Fields(new ListViewFieldSettings { Text = "name" }).Template(@template).ActionBegin("onActionBegin").ActionComplete("onActionComplete").Render()
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tbody>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Load data</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div>
                            @Html.EJS().DropDownList("ddl").Placeholder("Select a range").PopupHeight("200px").Index(0).DataSource(
(IEnumerable<object>)ViewBag.ddlData).Change("onChange").Fields(new DropDownListFieldSettings { Text = "text", Value = "value" }).Render()
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: 50%">
                        <div class="userselect">Time taken</div>
                    </td>
                    <td style="width: 50%;padding-right: 10px">
                        <div style="padding-left: 10px;padding-top: 0">
                            <span id="time">0 ms</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
}

@section Meta{
                    <meta name="description" content="This example demonstrates the Virtualization in ASP.NET MVC ListView control. Explore here for more details."/>
                }

@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the default functionalities of UI virtualization. Scroll list item to experience UI virtualization.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>
            UI virtualization is an optimization technique to avoid unnecessarily constructing and rendering objects for list items by loading only visible list items in a view port. This helps improve ListView performance when loading a large number of items. The
            list items are updated dynamically while users scroll the list. The virtualization can be enabled by using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/cref_files/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Lists.ListView~EnableVirtualization.html'>EnableVirtualization</a></code> API in Listview.
        </p>
    </div>
}
<script type="text/javascript">

    var listviewInstance;
    var dataSource = {};
    var startTime;
    var endTime;
    var liElement;
    var commonData = [
        { name: 'Nancy', icon: 'N', id: '0', },
        { name: 'Andrew', icon: 'A', id: '1' },
        { name: 'Janet', icon: 'J', id: '2' },
        { name: 'Margaret', imgUrl: '@Url.Content("~/Content/images/listview/margaret.png")', id: '3' },
        { name: 'Steven', icon: 'S', id: '4' },
        { name: 'Laura', imgUrl: '@Url.Content("~/Content/images/listview/laura.png")', id: '5' },
        { name: 'Robert', icon: 'R', id: '6' },
        { name: 'Michael', icon: 'M', id: '7' },
        { name: 'Albert', imgUrl: '@Url.Content("~/Content/images/listview/albert.png")', id: '8' },
        { name: 'Nolan', icon: 'N', id: '9' }
    ];

    [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']].forEach(function (ds) {
        var spyIndex;
        var index;
        var data = commonData.slice();
        for (var i = 10; i <= ds[0]; i++) {
            while (index === spyIndex) {
                index = parseInt((Math.random() * 10).toString(), 10);
            }
            data.push({ name: data[index].name, icon: data[index].icon, imgUrl: data[index].imgUrl, id: i.toString() });
            spyIndex = index;
        }
        dataSource[ds[1]] = data;
    });

    function onActionBegin() {
        startTime = new Date();
        listviewInstance = document.getElementById("ui-list").ej2_instances[0];
        listviewInstance.dataSource = dataSource.data1;
    }

    function onActionComplete() {
        endTime = new Date();
        document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';
        liElement = document.getElementById('ui-list');

        if (ej.base.Browser.isDevice) {
            liElement.classList.add('ui-mobile');
        }

        ej.popups.createSpinner({
            target: liElement
        });
    }

    function onChange(e) {
        ej.popups.showSpinner(liElement);
        startTime = new Date();
        listviewInstance.dataSource = dataSource['data' + e.value];
        listviewInstance.dataBind();
        endTime = new Date();
        document.getElementById('time').innerText = (endTime.getTime() - startTime.getTime()) + ' ms';
        ej.popups.hideSpinner(liElement);
    }
</script>
<style>
    /* ListView position alignment */

    #ui-list.e-listview {
        margin: auto;
        max-width: 325px;
        line-height: initial;
        border: 1px solid lightgray;
    }

        /* ListView header alignment */

        #ui-list.e-listview .e-list-header {
            height: 50px
        }

            #ui-list.e-listview .e-list-header .e-text {
                line-height: 18px
            }

        /* ListView template customization */

        #ui-list.e-listview #showUI {
            display: flex;
        }

        #ui-list.e-listview #hideUI {
            display: none;
        }

        #ui-list.e-listview .e-list-item {
            padding: 3px 0;
        }

        #ui-list.e-listview [icon="R"] {
            background: lightgrey;
        }

        #ui-list.e-listview [icon="M"] {
            background: pink;
        }

        #ui-list.e-listview [icon="A"] {
            background: lightgreen;
        }

        #ui-list.e-listview [icon="S"] {
            background: lightskyblue;
        }

        #ui-list.e-listview [icon="J"] {
            background: orange;
        }

        #ui-list.e-listview [icon="N"] {
            background: lightblue;
        }

    /* ListView theme customization */

    .highcontrast #ui-list.e-listview .e-list-item,
    .highcontrast #ui-list.e-listview .e-list-header {
        background: rgb(0, 0, 0);
    }

        .highcontrast #ui-list.e-listview .e-list-item.e-active {
            background: #ffd939;
            color: #000000;
        }
</style>


@section Title{
                    <title>ASP.NET MVC ListView Virtualization Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Virtualization in ASP.NET MVC ListView Control</h1>
                }