1. Home
  2. Forum
  3. Blazor
  4. Render contents when string typed in the search

Render contents when string typed in the search

Hello,

I would like to use a dropdown or combo box that can have a lot of items (4000+). The rendering is slow however. Is there an option to only render the options of the dropdown after a certain amount of characters have been entered. For example, if I type "ab" in the search bar only strings starting with that string will be rendered. I am also open to any other recommendations. The goal is to speed up the component.

1 Reply 1 reply marked as answer
BC Berly Christopher Syncfusion Team November 24, 2020 02:26 PM UTC

Hi Antonio, 
  
Greetings from Syncfusion support. 
  
While loading entire data from the server it takes time to generate the list for all the data. So, we have provided virtual scrolling support which is used to display a large amount of data that you require without buffering the entire load of a huge database records in the DropDowns, that is, when scrolling, the datamanager request is sent to fetch some amount of data from the server dynamically. It will used to reduce the component rendering time in the application. 
  
So, we suggest you to enable the EnableVirtualization property is true as mentioned in the code example below.  
  
<h4>Virtual Scrolling</h4> 
<SfComboBox TValue="string" TItem="OrderDetails" AllowFiltering="true" PopupHeight="230px" Placeholder="Select a name" Query="@RemoteDataQuery" EnableVirtualization ="true"> 
    <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager> 
    <ComboBoxFieldSettings Text="CustomerID" Value="CustomerID"></ComboBoxFieldSettings> 
</SfComboBox> 

  
  
  
For Blazored Typeahead, we suggest you to use our AutoComplete component. Please refer the below UG and demo from the below link. 
  
Regards, 
Berly B.C 


Marked as answer
Loader.
Up arrow icon