Question about virtual scrolling

Hi!
Im using DropDownListFor controls in my app, and as some of them may have hundreds of records, Im trying the virtual scrolling feature. The question is, even if i set it and seem to be working, when I look at the page source code with my browser I see the full list of items bound to the Dropdown. This shouldnt be right, so I think Im missing something. Here is my code:

In the controller:
public ActionResult Create()
{
var ListaAseguradoras = db.sin_Aseguradoras.Select(x => new ListaDropDown{Valor=x.id,Descripcion=x.Descripcion}).OrderBy(x=>x.Descripcion).ToList();
ViewBag.Aseguradoras = ListaAseguradoras;
return View();
}

In view:

@(Html.EJ().DropDownListFor(model => model.id_Aseguradoras).Datasource((IEnumerable<object>)ViewBag.Aseguradoras)
                                                                                                             .DropDownListFields(df => df.Text("Descripcion").Value("Valor"))
                                                                                                             .AllowVirtualScrolling(true)
                                                                                                             .VirtualScrollMode(VirtualScrollMode.Normal)
                                                                                                             .ItemsCount(5)
                                                                                                             .Width("450px"))

As you can see, Itemcount is at 5, but when i render the page, and see at its code I see the full list (10 items in this case):

$("#id_Aseguradoras").ejDropDownList({"locale":"es-ES","allowVirtualScrolling":true,"dataSource":ej.isJSON([{"Valor":5,"Descripcion":"Allianz Argentina"},{"Valor":3,"Descripcion":"Federación Patronal"},{"Valor":10,"Descripcion":"Mapfre"},{"Valor":8,"Descripcion":"Mercantil Andina"},{"Valor":9,"Descripcion":"Meridional Seguros"},{"Valor":2,"Descripcion":"Nación Seguros"},{"Valor":6,"Descripcion":"Provincia Seguros"},{"Valor":1,"Descripcion":"San Cristobal"},{"Valor":4,"Descripcion":"Sancor Seguros"},{"Valor":7,"Descripcion":"Seguros Rivadavia"}]),"fields":{"text":"Descripcion","value":"Valor"},"itemsCount":5,"width":"450px"});

Please let me know if this is the case, or I am doing something wrong.
Thank yoy very much.


7 Replies

KR Keerthana Rajendran Syncfusion Team November 1, 2017 10:33 AM UTC

Hi Pablo,   
   
Thank you for contacting Syncfusion support.   
   
We have prepared a sample based on your code. Please download the sample from:   
   
   
While rendering dropdownlist control in MVC, all the list items will be loaded as JSON data in script section and we have not handled this item count in server side because in case of dynamic addition of list items or filtering all the items must be present in the DropDownList. So, the items in the popupWrapper will be loaded based on the itemsCount. Please refer the below screenshot for initially loaded items in popup wrapper of attached sample.   
   
   
   
Regards,   
Keerthana.   
 



PM Pablo Maloberti November 2, 2017 03:00 PM UTC

Hi Keerthana , and thanks for the info. Now I'm having another problem with virtual scrolling. As i told you before, I'm using strongly typed DropDownList in an Edit view, so it shows the data of the properties of the object Im loading. It seems that if the value that should show in DropDownList is beyond the itemcount number it doesnt show.

For example,

@(Html.EJ().DropDownListFor(model => model.id_Aseguradoras).Datasource((IEnumerable<object>)ViewBag.Aseguradoras)                                                                           
                                                                             .DropDownListFields(df => df.Text("Descripcion").Value("Valor"))
                                                                             .AllowVirtualScrolling(true)
                                                                             .VirtualScrollMode(VirtualScrollMode.Normal)
                                                                             .ItemsCount(5)
                                                                             .Width("450px"))


In a case i which the value of id_aseguradoras is {"Valor":1,"Descripcion":"San Cristobal"}, which is in position 8 in the list (it is order alphabetically):


<input id="id_Aseguradoras" name="id_Aseguradoras" type="text" value="1" data-ej-locale="es-ES" data-ej-allowvirtualscrolling="true" data-ej-datasource="ej.dataSources.id_Aseguradoras.data0" data-ej-fields-text="Descripcion" data-ej-fields-value="Valor" data-ej-itemscount="5" data-ej-width="450px" data-ej-value="1" data-role="ejdropdownlist" /><script>ej.createObject("ej.dataSources.id_Aseguradoras",{"data0":ej.isJSON([{"Valor":5,"Descripcion":"Allianz Argentina"},{"Valor":3,"Descripcion":"Federación Patronal"},{"Valor":10,"Descripcion":"Mapfre"},{"Valor":8,"Descripcion":"Mercantil Andina"},{"Valor":9,"Descripcion":"Meridional Seguros"},{"Valor":2,"Descripcion":"Nación Seguros"},{"Valor":6,"Descripcion":"Provincia Seguros"},{"Valor":1,"Descripcion":"San Cristobal"},{"Valor":4,"Descripcion":"Sancor Seguros"},{"Valor":7,"Descripcion":"Seguros Rivadavia"}])});</script>

Nothing is shown in Aseguradora if itemcount is 5.

If I change itemcount to 10, it is shown.

Hope I was clear, and thanks.




KR Keerthana Rajendran Syncfusion Team November 3, 2017 05:37 AM UTC

Hi Pablo,   
   
We have provided a support for setting DropDownList value beyond itemsCount in our latest version15.3.0.33. Please refer the below given release notes   
   
   
Kindly upgrade to the latest version 15.3.0.33 to set value beyond itemsCount in DropDownList.   
   
Please refer to the below given link for project migration   
   
   
We have modified our sample to the latest version (15.3.0.33). Please download the sample from   
   
   
Regards,   
Keerthana. 



PM Pablo Maloberti November 3, 2017 02:01 PM UTC

Thanks again.

One last question then, Im using community License version 15.2.0.40

What should I download and install to properly update? 15.3.0.26 and then service pack 15.3.0.33, or directly 15.3.0.33

Thank you very much.



KR Keerthana Rajendran Syncfusion Team November 6, 2017 12:33 PM UTC

Hi Pablo,

 
Query: What should I download and install to properly update? 
 
You can download the required setup from the below link.  
 
 
Query: 15.3.0.26 and then service pack 15.3.0.33, or directly 15.3.0.33

Yes, you can install v15.3.0.33 directly without installing the v15.3.0.26. It is not required to install the Volume release setup before installing the Service pack setup. As Volume releases and Service packs works independently, you can directly install the latest Service pack setup which contains major fixes and new features.
 
 
Regards, 
Keerthana. 



PM Pablo Maloberti November 9, 2017 09:24 PM UTC

Hi again Keerthana. I finally downloaded and installed version 15.3.0.33 (didnt uninstall 15.2.0.40), but Im getting the same behaviour with DropDownList when value is beyond virtual scrolling itemcount.

I used Migration tool in Visual Studio to update my project, and both in References and in web.config shows new versions installed, but it still doesnt work.

I also tried with the updated project sample you provided me, and it doesnt work either.

Any Help? What more information can I give you?

Thank you!

<input id="id_Aseguradoras" name="id_Aseguradoras" type="text" value="" data-ej-locale="es-ES" data-ej-allowvirtualscrolling="true" data-ej-datasource="ej.dataSources.id_Aseguradoras.data0" data-ej-itemscount="5" data-ej-width="450px" data-ej-value="18" data-role="ejdropdownlist" /><script>ej.createObject("ej.dataSources.id_Aseguradoras",{"data0":ej.isJSON([{"text":"Algeria","category":null,"value":11,"country":null,"id":0,"parent":0},{"text":"Armenia","category":null,"value":12,"country":null,"id":0,"parent":0},{"text":"Bangladesh","category":null,"value":13,"country":null,"id":0,"parent":0},{"text":"Cuba","category":null,"value":14,"country":null,"id":0,"parent":0},{"text":"Denmark","category":null,"value":15,"country":null,"id":0,"parent":0},{"text":"Egypt","category":null,"value":16,"country":null,"id":0,"parent":0},{"text":"Finland","category":null,"value":17,"country":null,"id":0,"parent":0},{"text":"India","category":null,"value":18,"country":null,"id":0,"parent":0},{"text":"Malaysia","category":null,"value":19,"country":null,"id":0,"parent":0},{"text":"New Zealand","category":null,"value":20,"country":null,"id":0,"parent":0},{"text":"Norway","category":null,"value":21,"country":null,"id":0,"parent":0},{"text":"Romania","category":null,"value":22,"country":null,"id":0,"parent":0},{"text":"Singapore","category":null,"value":23,"country":null,"id":0,"parent":0},{"text":"Thailand","category":null,"value":24,"country":null,"id":0,"parent":0},{"text":"Ukraine","category":null,"value":25,"country":null,"id":0,"parent":0}])});</script>






KR Keerthana Rajendran Syncfusion Team November 10, 2017 05:42 AM UTC

Hi Pablo,   
  
Query: I finally downloaded and installed version 15.3.0.33 (didn’t uninstall 15.2.0.40), but I’m getting the same behaviour with DropDownList when value is beyond virtual scrolling itemscount. I  used Migration tool in Visual Studio to update my project, and both in References and in web.config shows new versions installed, but it still doesn’t work.   
  
We suspect that you may have missed to replace the web.all script in your sample with latest version. If yes, please replace the script with 15.3.0.33 version to get this work. Scripts will be available in the installed location.   
   
For example: If the location is C drive then scripts will be present in the below location   
   
C:\Program Files (x86)\Syncfusion\Essential Studio\15.3.0.33\JavaScript\assets\scripts\web   
   
Query: I also tried with the updated project sample you provided me, and it doesn’t work either.    
   
The sample provided in the previous update is working fine at our end. Please refer the below given video     
   
   
Please recheck our last updated sample. Please check whether unobtrusive mode is enabled in your sample. If so, please set this to false in your sample as shown below    
<appSettings>   
    <add key="ClientValidationEnabled" value="true" />   
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />   
  </appSettings>   
   
If the issue persists, share us the error details if you face console error. If possible, share an issue reproducible sample so that we will validate and provide better solution at the earliest.   
   
Regards,   
Keerthana.   
   
 


Loader.
Up arrow icon