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

DropDownList with large list is very slow

Hi,
in my application I have a DropDownList that load from a database a list of 8400 countries but is very slow to display the list.  
When loading the first time, the list appear quite quickly but, the next times, it is very slow.

If I try to use the standard HtmlHelper dropdownList , the list display is very fast.

How to increase the show speed of the list ?

I attach a sample.

Attachment: Sample_90a3616c.zip

9 Replies

PO Prince Oliver Syncfusion Team February 19, 2018 10:18 AM UTC

Hi Nicola,   
  
Thank you for using Syncfusion products.   
  
We have checked the attached sample. You can use the VirtualScrolling and ServerFiltering to make the DropDownList load faster. Set the ItemsCount property to load the required number of items initially. Kindly refer to the following code.   

@Html.EJ().DropDownList("countryList").Datasource(ds => ds.URL(@Url.Action("GetCountries", "Home")).Adaptor(AdaptorType.UrlAdaptor)).DropDownListFields(Df => Df.Text("description").Value("code")).EnableFilterSearch(true).Width("100%").AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Continuous).EnableServerFiltering(true).ItemsCount(20) 

In the Controller method, you need to modify it to support virtual scrolling and server-side filtering. Kindly refer to the following code.    

public JsonResult GetCountries(Syncfusion.JavaScript.DataManager value) 
{ 
    var query = value.Where; // you can access the Where query here 
    var jsonSerializer = new JavaScriptSerializer(); 
 
    // getting Data 
    var countries = CountriesGet(); 
 
    //Checking for server-side filtering 
    if (query != null) 
    { 
        var items = query.ToArray(); 
        //checking for virtual scrolling on filtered list 
        if (value.Skip != 0) 
        { 
            var result = countries.Where(item => item.description.Contains(items[0].value.ToString())).Skip(value.Skip).Take(value.Take).ToList(); 
            return Json(jsonSerializer.Serialize(result)); 
        } 
        var res1 = countries.Where(item => item.description.Contains(items[0].value.ToString())).Take(value.Take).ToList(); 
        return Json(jsonSerializer.Serialize(res1)); 
    } 
 
    //Checking for virtual scrolling 
    if (value.Skip != 0) 
    { 
        var res1 = countries.Skip(value.Skip).Take(value.Take).ToList(); 
        return Json(jsonSerializer.Serialize(new { result = res1, count = res1.Count })); 
    } 
 
    //returns on initial load 
    var res = countries.Take(value.Take).ToList(); 
    return Json(jsonSerializer.Serialize(new { result = res, count = countries.Count })); 
} 

We have modified the shared sample for your reference, please find the sample at the following location:http://www.syncfusion.com/downloads/support/forum/135972/ze/Sample872292909   
  
Refer to the following UG link for more information on ServerFiltering: https://help.syncfusion.com/aspnetmvc/dropdownlist/serverfiltering#server-filtering   
  
Refer to the following UG link for more information on VirtualScrolling: https://help.syncfusion.com/aspnetmvc/dropdownlist/databinding#virtual-scrolling    
  
Regards, 
Prince 



NI Nicola February 20, 2018 11:25 AM UTC

Hi Prince,
this solution works quite fine, but when I search a country , the list is ordered, when there is a country in the field and I dropping down the list, the result is unordered like in this image. There is a solution ?




PO Prince Oliver Syncfusion Team February 21, 2018 12:41 PM UTC

Hi Nicola,   
 
Thank you for your update. 
 
We have checked the reported scenario. When an item is selected in the DropDownList, the item will be maintained at the end of the list even when a search is performed. This is the default behavior in the control. Since we are performing virtual scrolling in the filtered list, the selected item is added to the end of the initial filtered data and when scrolled the new data is appended below the selected items. Thus the list appears unordered. This is not an issue in the control and is an actual behavior. 
 
Regards, 
Prince 



NI Nicola February 21, 2018 01:09 PM UTC

Ok 
Thank you for your reply.

Regards
Nicola


PO Prince Oliver Syncfusion Team February 22, 2018 04:07 AM UTC

  
Hi Nicola, 
 
Thank you for your update. We are glad that your issue is resolved. Please let us know if you require any further assistance on this. 
  
Regards, 
Prince 



DR David Rose June 2, 2022 11:20 PM UTC

This is great, but the features are not available in EJ2. Seems like very useful, but not supported?

Can you rewrite this sample for EJ2?



VJ Vinitha Jeyakumar Syncfusion Team June 3, 2022 08:11 AM UTC

Hi David,


You can use the Virtual Scrolling concept in DropDownList control, which is used to display a large amount of data without buffering the entire load of a huge database record in the DropDownList, that is, when scrolling, the request is sent and fetch some amount of data from the server dynamically. Using the scroll event, get the data and generate the list add to popup using the addItem method.

Code snippet:
<div id='o-data' class='col-lg-6' style='padding-top:15px'>
    <div class='content'>
        @Html.EJS().DropDownList("customers").Placeholder("Select a customer").PopupHeight("200px").Open("onOpen").DataSource(dataManger =>
        dataManger.Url("https://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/").Adaptor("ODataAdaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings
        {
        Value = "CustomerID"
        }).Query("new ej.data.Query().select(['CustomerID']).take(10)").Render()
    </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>




Regards,
Vinitha




RK Ranjith Kumar February 13, 2024 07:45 AM UTC

Hi Prince,

Thanks Advance !!!

In my Project using MVC with Entity Framework Solution. We fetch data from SQL database and using Entity Framework to get result IEnumerable List. Whether IEnumerable List values to pass the MVC Controller and Standard HTML Helper Dropdownlist to display the dropdown option values. Please suggest and provide the solution...



YS Yohapuja Selvakumaran Syncfusion Team February 15, 2024 01:14 PM UTC

Hi Ranjith Kumar,


To create an Entity Framework in an MVC application, you can refer to the following resources. If you are facing any issue, kindly share sample with us for further investigation.


https://blazor.syncfusion.com/documentation/dropdown-list/data-binding#entity-framework

https://www.syncfusion.com/blogs/post/crud-app-asp-dotnet-core-entity-framework-visual-studio.aspx

https://www.syncfusion.com/blogs/post/crud-aspnetcore5-entityframework.aspx

https://www.syncfusion.com/forums/124380/searching-with-entity-framework

https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc/creating-an-entity-framework-data-model-for-an-asp-net-mvc-application



Additionally, we'd like to inform you that starting from version 23.1.36, we provide built-in support for virtualization. You can find more information about this feature in the release notes.



Release Notes: https://ej2.syncfusion.com/aspnetmvc/documentation/release-notes/23.1.36?type=all#dropdownlist


For further reference and demos about virtualization, you can explore the following resources:


Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/virtual-scroll


Demos: https://ej2.syncfusion.com/aspnetmvc/DropDownList/VirtualScroll#/material3




Regards,

Yohapuja S


Loader.
Up arrow icon