EJ2 > MVC > Dropdownlist - How can we achieve virtual scrolling in ej2 mvc dropdownlist

[Abdul Wahab]

I need virtual scrolling feature in ej2 mvc dropdownlist but there is no clue in documentation. Can you guys please let me know how can i achieve this feature, I have more than thousand records to bind in dropdownlist and without virtual scrolling feature dropdown gets very slow.

[Berly Christopher]

Hi Abdul, 

  

Greetings from Syncfusion support.  

  

Currently there is no virtual scrolling support has been provided for DropDownList component. But we have considered this as a feature at our end. This support will be included in any one of our upcoming releases. You can track the status of this support from the below feedback link. 

  

Feedback: https://www.syncfusion.com/feedback/9773/  

  

We can achieve this support by using the below work around solution in the DropDownList component. 

  

<div id='remote-data' class='col-lg-6' style='padding-top:15px'> 

    <div class='content'> 

        <ejs-dropdownlist id="customers" placeholder="Select a customer" query="new ej.data.Query().select(['CustomerID'])" open="onOpen"> 

            <e-dropdownlist-fields value="CustomerID"></e-dropdownlist-fields> 

            <e-data-manager url="https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/" adaptor="ODataAdaptor" crossDomain="true"></e-data-manager> 

        </ejs-dropdownlist> 

    </div> 

</div> 

 

<script> 

    var isInitial = false; 

    function onOpen(args) { 

        if (!this.isInitial) { 

            var start = 11; 

            var end = 20; 

            var instance = document.getElementById("customers").ej2_instances[0]; 

            var listElement = instance.popupObj.element.firstChild; 

            listElement.addEventListener('scroll', () => { 

                if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) { 

                    var filterQuery = this.query.clone(); 

                    this.dataSource.executeQuery(filterQuery.range(start, end)).then((event) => { 

                        start = end; 

                        end += 5; 

                        instance.addItem(event.result); 

                    }).catch((e) => { 

                    }); 

                } 

            }) 

        } 

    }  

</script> 

 

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/155521/ze/Virtual_Scroll2129283128  

  

Please refer the documentation to know more about virtual scrolling in DropDownList. 

UG Link: https://ej2.syncfusion.com/documentation/drop-down-list/how-to/achieve-virtual-scrolling/ 

  

Regards, 

Berly B.C