How to achieve virtual scrolling in EJ2 JavaScript Dropdown List

04 Sep 20265 minutes to read

Virtual scrolling is used to display a large amount of data in the DropDownList without buffering the entire dataset. As you scroll, a request is sent to fetch a subset of records from the server dynamically. Use the scroll event to retrieve the data and append new items to the popup by using the addItem method.

Refer to the following code sample for virtual scrolling.

var data = new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true
});
//initiates the component
let ddlObject = new ej.dropdowns.DropDownList({
    // bind the DataManager instance to dataSource property
        dataSource: data,
        // bind the Query instance to query property
        query: new ej.data.Query().select(['ContactName']),
        // map the appropriate columns to fields property
        fields: { text: 'ContactName', value: 'ContactName' },
         // set the placeholder to DropDownList input element
        placeholder: 'Select a customer',
        // sort the resulted items
        sortOrder: 'Ascending',
        // set the height of the popup element
        popupHeight: '200px',
        
     actionComplete: function (e) {
        let operator = new ej.data.Query().from('Customers').select('ContactName');
        let start = 7;
        let end = 12;
        let listElement = this.list;
        listElement.addEventListener('scroll', () => {
            if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) {
                let filterQuery = operator.clone();
                data.executeQuery(filterQuery.range(start, end)).then((event) => {
                    start = end;
                    end += 5;
                    ddlObject.addItem(event.result);
                }).catch((e) => {
                });
            }
        })
    }
});
ddlObject.appendTo('#atcelement');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 AutoComplete</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <input type="text" tabindex="1" id="atcelement">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>