Combobox virtual scroll & searching

[BERNARD Ludovic]

Hello,

I want to use the ej.dropdowns.ComboBox (javascript es5) and I am facing 2 issues.

First the I can't find the virtual scrolling inside the API Reference so above 1000 items inside the list it becomes pretty slow.

Second I want to be able to filter the list inside with what I'm typing :

ex: [ 'one', 'two', 'three' ] when type 'e' filter > ['one', 'three']

instead it shows nothing because the filter is on the first letters

Have you ever encounter these issues?

Do you have any options to make it work?

Thank you

[Prince Oliver]

Hello Bernard, 

Greetings from Syncfusion support. 

Query 1: First the I can't find the virtual scrolling inside the API Reference so above 1000 items inside the list it becomes pretty slow. 

Currently virtual scrolling is not supported via API. But we can achieve the functionality by manually performing the virtual scroll operation using scroll event handler bound through the open event. Kindly refer to the following code snippet. 

function onOpen(args) { 

    if (!isInitial) { 

        var start = 11; 

        var end = 20; 

        var element = this.element.ej2_instances[0]; 

        var listElement = this.element.ej2_instances[0].list; 

        listElement.addEventListener('scroll', function () { 

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

                let filterQuery = query.clone(); 

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

                    start = end; 

                    end += 5; 

                    element.addItem(event.result); 

                }).catch(function (e) { 

                }); 

            } 

        }) 

    } 

} 

Query 2: Second I want to be able to filter the list inside with what I'm typing : ex: [ 'one', 'two', 'three' ] when type 'e' filter > ['one', 'three'] instead it shows nothing because the filter is on the first letters 

We have provided option in the filtering event to customize the filter type in the ComboBox. To use you need to enable filtering using allowFiltering API. Kindly refer to the following code snippet. 

function OnFiltering(e) {  

    query = new ej.data.Query().from('Customers').select(['ContactName', 'CustomerID']);  

    query = (e.text != "") ? query.where("ContactName", "contains", e.text, true) : query;  

    e.updateData(data, query);  

}  

We have attached an example for your reference, please find it in the following location: https://stackblitz.com/edit/w39uuc 

Let us know if you need any further assistance on this. 

Regards, 

Prince