We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

List Box Virtual Scrolling

Hi,

Does the ejListBox support a remote data source with virtual scrolling where it will automatically fetch the next list box items as required when you scroll down?

I need to have a continuous scrolling listbox that supports hundreds of thousands of records (potentially) and obviously those records cannot all be fetched from database initially. The listbox should be able to fetch those on demand in the background as and when required through scrolling.

The backend is ASP.NET WebAPI service. The is already a server-side pagination.

Thanks in advance,

Ivana



10 Replies

AP Arun Palaniyandi Syncfusion Team July 24, 2017 05:36 PM UTC

Hi Ivana, 
  
Thanks for contacting Syncfusion support. 
  
Yes, our ejListBox supports the remote datasource with the virtual scrolling where it will automatically fetch the next list box items as required when we scroll down. 
  
Also our ejListBox supports normal and continuous types of virtual scrolling modes. 
  
Please find the below sample links and API links for further reference. 
  
  
  
Note: In the shared sample link, ejListBox uses the WCF services to load the datasource. Hence similarly you can use your WebAPI service to bind the datasource. 
  
Please check the shared sample, information and if the shared details still doesn’t meet your requirement, please let us know, so that we will provide an alternate solution.         
         
Regards,         
Arun P.     



IS Ivana Stefanoska July 31, 2017 07:14 PM UTC

Hi,

Thank you for your answer. I have one more question.
I need to implement filtering on ejlistbox with virtual scrolling. Filtering should be done by words inserted by the users in a text box. When the text box loses focus, I need to fetch the data from the server with that filter, and refresh the listbox. I have problem how to refresh the list box after the new data are fetched from the server. 

The backend is ASP.NET WebAPI service.

Thank you in advacne,

Ivana





AP Arun Palaniyandi Syncfusion Team August 1, 2017 01:09 PM UTC

Hi Ivana,  
   
Thanks for your update. 

We have validated your shared scenario and hence we suggest you to use the refresh() method to refresh the ListBox after fetching the data from the server with the textbox filter. Please refer the below code snippet for further reference. 
 
 
   <input type="text" id="txtFilter" onblur="onfilterData()" /> 
 
 
 
function onfilterData() { 
 
            var lb = $("#selectcustomer").data("ejListBox"); 
 
            var filter = $("#txtFilter").val(); 
 
            dataManger = ej.DataManager({ url: 'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true }); 
            query = ej.Query().from('Customers').where("CustomerID", "contains", filter, false);; 
 
            var execute = dataManger.executeQuery(query) // executing query 
                              .done(function (e) { 
                                  var tmpresult = e.result; 
                                  if (tmpresult.length != 0) { 
                                      lb.setModel({ dataSource: tmpresult }); 
                                      lb.refresh(); 
                                  } 
                                  else 
                                      lb.setModel({ dataSource: null }); 
                              }); 
        } 
 
 

We have also prepared a simple sample for your reference below. 



Please let us know whether the provided information is helpful to achieve your requirement or not?  
            
Regards, 
Arun P. 




IS Ivana Stefanoska August 8, 2017 11:28 AM UTC

Hello,

I have some issue with the datamanager url in ejlistbox. The problem is that all of a sudden , new parameter is added in the url, $inlinecoun=allPages.
Maybe it's because of the Syncfusion version. Are there some changes in the latest version for this component?

Now I get the following error: 

vendor.js?v=K-BWJze43tVqchuhJK9VeEMaW3e4T4Rp7kwAit-_Sl0:11624 ERROR TypeError: Cannot read property '0' of undefined

Nothing was changed, except since yesterday morning we have the newer version of syncfusion-javascript (15.3.26)

Please help me. 
Ivana


AP Arun Palaniyandi Syncfusion Team August 9, 2017 01:11 PM UTC

Hi Ivana,   
    
Thanks for your update.  
 
We have created a simple WebAPI service and tried to reproduce your reported issue in our latest version (15.3.0.26) but unfortunately we were unable to reproduce the issue. This $inlinecoun=allPages parameter is not added in our web API service url. We also would request you to share us your hosted demo web API service so that we could reproduce that issue at our end and will get you back with solution. Also if possible please check your network tab and check the same web API controller is called directly on the browser by calling it in the browser and whether you getting that parameter?. 
 
Please find the simple sample for reference below: 
 
 
 
Note: Service application and client application is given separately  
 
Regards, 
Arun P. 



IS Ivana Stefanoska August 11, 2017 02:55 PM UTC

Hello,

I have problem with fetching data in syncfusion list box with virtual scrolling (continuous).
If I scroll very fast the requests for fetching new data are not sent in correct order and error is displayed in browser console
.(shown in the attachment).

Note: These are the list box options/properties:

  this.listBoxOptions = {

            width: "100%",            

            showCheckbox: true,

            allowDrag: false,

            allowDrop: false,

            allowMultiSelection: true,

            dataSource: this.datamanager,

            fields: { text: "name", value: "name", id: "id" },

            allowVirtualScrolling: true,

            virtualScrollMode: "continuous",

            objectRef: this.refType,

             itemRequestCount: 10,

              itemsCount: 7

        }

Where datamanager is :

        this.datamanager = new ej.DataManager({

            url: configuration.api + "api/users/multiplePaged",

            crossDomain: true

        });


What should I do ?

Ivana




Attachment: multiplePage_6a0210e5.rar


IS Ivana Stefanoska August 12, 2017 06:36 PM UTC

Hello,

Thank you for the examples, the provided information was helpful.
But I found there is still one issue with the combination of filtering and virtual scrolling. After filter function is called and setModel is executed, the list is populated with new data (filtered data), but now virtual scrolling is not working. 
The list box component is populated with all data after onFilterData is called.

Please help me,

Ivana



AP Arun Palaniyandi Syncfusion Team August 14, 2017 12:54 PM UTC

Hi Ivana,    
     
Thanks for your update.   

Query :” After filter function is called and setModel is executed, the list is populated with new data (filtered data), but now virtual scrolling is not working.” 

 We can able to reproduce the mentioned issue and on further analysis we found that the issue is due to the Json result that is passed as the datasource for the ListBox from the datamanger execute result. So in this case, we suggest you to pass the datasource and query directly through setmodel because the Virtualscrolling is based on the ejDatamanger not on local Json result. Passing the ejDatamanger as datasource will achieve the filtering data with the virtual scrolling. 



<input type="text" id="txtFilter" onblur="onfilterData()" />  
  
  
  
function onfilterData() {  
  
            var lb = $("#selectcustomer").data("ejListBox");  
  
            var filter = $("#txtFilter").val();  
  
            dataManger = ej.DataManager({ url:'http://js.syncfusion.com/ejServices/wcf/NorthWind.svc/', crossDomain: true });  
            query = ej.Query().from('Customers').where("CustomerID""contains", filter, false);;  
  
            var execute = dataManger.executeQuery(query) // executing query  
                              .done(function (e) {  
                                  var tmpresult = e.result;  
                                  if (tmpresult.length != 0) {  
                                      lb.setModel({ dataSource: dataManger , query: query });  
                                                                                   lb.refresh();  
                                  }  
                                  else  
                                      lb.setModel({ dataSource: null });  
                              });  
        }  
  



We have also prepared a simple sample for your reference below.  



 
Please let us know whether the provided information is helpful to achieve your requirement or not?   
             
Regards,  
Arun P.  



IS Ivana Stefanoska August 16, 2017 08:26 AM UTC

HI,

Thank you for your answer. The provided information was helpful, but there is still an issue with virtual scrolling. (see the attachment)
That happens after applying filter (setting the datasource and the query with setModel as you proposed) and then scroll down in the list to the end.
How can I stop the requests to server, when there is no more data to be fetched? What should I send as response form server in order the listbox to be aware there is no more data to be fetched from server?

Thank you in advance,

Ivana


Attachment: Virtual_scrolling_problem_with_syncfusion_listbox_5e92bfc6.rar


NP Narayanasamy Panneer Selvam Syncfusion Team August 17, 2017 01:14 PM UTC

  
Hi Ivana, 
 
Thanks for the update. 
 
We were unable to reproduce the exact issue based on the information you have provided. From the screenshot you have shared, we have suspect that it may caused due to it is denied server request by some “filtering request.”  
 
Can you please let us know the following details, 
  1. Type of dataSource which is used in the remote service? Are you using any adaptors for dataManager?
  2. Does the issue occurs in our shared sample itself or when you apply work around in your end?
  3. If yes, can you please share us issue reproducing step with a demo and further details on use case for ListBox virtual scrolling?
So that we can help you out with alternative solution. 
 
Regards, 
Narayanasamy P. 


Loader.
Live Chat Icon For mobile
Up arrow icon