Virtual scrolling not working when data is added dynamically to ListBox

[Ivan Janjic]

Hello,

I have a ListBox which I'm populating with large data set from WebApi Controller via client-side code like this:

    function getListboxItems() {

        var dataManager = ej.DataManager({ url: "http://localhost:65066/api/Test/search/", crossDomain: true, adaptor: new ej.WebApiAdaptor() });

        var query = new ej.Query();

        var promise = dataManager.executeQuery(query);

        promise.done(function (e) {

            var data = e.result; 

            $("#searchList").ejListBox({ dataSource: data });

        });

    }

ListBox is defined to have virtual scrolling enabled and also allowed draggging. Like this:

@Html.EJ().ListBox("searchList").ListBoxFields(df => df.Text("Name")).AllowDrag(true).AllowDrop(false).Width("100%").AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Normal).ItemRequestCount(15)

the problem is that virtual scrolling is not working, and it seems that complete data set is loaded in the ListBox (which causes the drag operation to be really slow), also, when I try to scroll for the first time, I'm getting this error in javascript console:

ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'sort' of undefined

    at Object._loadVirtualList (ej.web.all.min.js:10)

    at ej.web.all.min.js:10

[Arun Palaniyandi]

Hi Ivan Janjic, 

Thanks for contacting Syncfusion support.         

We can also able to replicate your reported issue. After validating this scenario, we found a workaround that would solve your requirement. To render empty Listbox initially first, bind the datasource property for the Listbox and set the query to take as 0 and don’t bind ItemRequestCount property. And now the ListBox is rendered with empty values. Then in the button click event set the query to take 15 and then change it via setModel. And now the serverside is triggered with taking values of 15 and hereafter this will work for all the scroll of the ListBox automatically and virtual scrolling will occur.  Please find the below code snippet for your reference.   

 CSHTML: 

@Html.EJ().ListBox("searchList").ListBoxFields(df => df.Text("CompanyName")).AllowDrag(true).AllowDrop(false).Width("100%").Datasource(ds => ds.URL("/api/Orders/5").Adaptor(AdaptorType.WebApiAdaptor).CrossDomain(true)).Query("ej.Query().take(0)"). // initially give take as 0 

AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Normal) 

  

  

function getListboxItems() { 

  

        var query = new ej.Query().skip(0).take(15); //now give your required items to take in query 

        obj = $("#searchList").ejListBox("instance"); 

        obj.setModel({ query: query });  //set the query via setmodel to refresh 

        obj.refresh(); 

  

    }  Controller:  

   public object Get(int id) 

        { 

            var queryString = HttpContext.Current.Request.QueryString; // take the skip and take using the querystring 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

  

           var result = db.OrdersViews.Skip(skip).Take(take).ToList(); // filter result based on skip and take 

  

  

            return new 

            { 

                Items = result, 

                Count = result.Count() 

            }; 

        }   

 

  

sample: http://www.syncfusion.com/downloads/support/forum/133613/ze/WebApiSampleListBox-VS1737498382 

  

  

  

Please check the shared sample and if the sample still not meet your requirement, please send us more information so that we will provide an alternate solution.         

         

Regards,         

Arun P.     

[Ivan Janjic]

Hello Arun,

thanks for the answer. Your workaround works, but only initially added items are draggable (also in your sample solution). Iitems added after virtual scrolling are not. This is very important for my implementation. I can see in developer tools that they're completely missing e-draggable and e-js classes.

Kind regards,

Ivan

[Arun Palaniyandi]

Hi Ivan Janjic,    

  

Sorry for the inconvenience caused.   

  

We can replicate the mentioned issue (completely missing e-draggable and e-js classes) in the ListBox after the virtual scrolling is performed. Hence, we have considered this as a defect and the fix will be available in our upcoming service pack release 1 for Volume 4, 2017 by end of November.   

  

Regards,   

Arun P.  

[Ivan Janjic]

Thanks Arun

Is there a workaround until bugfix is released?

Regards,

Ivan

[Arun Palaniyandi]

Hi Ivan Janjic,  

 

Thanks for your update.    

 

Yes, there is a workaround until this bug is fixed. The workaround is that we have to manually add the drag and drop classes on actioncomplete event of the Listbox. Please find the below code snippet for your reference.    

 

 

   @Html.EJ().ListBox("searchList").ListBoxFields(df => df.Text("CompanyName").ID("data")).AllowDrag(true).AllowDrop(false).Width("100%").Datasource(ds => ds.URL("/api/Orders/5").Adaptor(AdaptorType.WebApiAdaptor).CrossDomain(true)).Query("ej.Query().take(0)").AllowVirtualScrolling(true) 

.VirtualScrollMode(VirtualScrollMode.Normal).ClientSideEvents(ce=>ce.ActionComplete("oncomplete")) 

 

 

<script type="text/javascript"> 

function oncomplete(e) { 

 

        this._addDragableClass()._enableDragDrop();   //manually add the drag and drop classes 

 

    } 

</script> 

 

 

 

 

We have also modified the previous shared sample for your reference below. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApiSampleListBox-VS_(2)-1307671404 

 

Also as promised we will fix this issue in our upcoming service pack release 1 for Volume 4, 2017 by end of November.    

  

Please let us know if you have any queries further.     

     

Regards,     

Arun P.