1. Home
  2. Forum
  3. Blazor
  4. how to load data in combobx with large data

how to load data in combobx with large data

I haved loaded 100000 record in combobox in local list datasource and I have set EnableVirtualization as true.

It works fine as per example given in demo.But when I load data from api then it takes long time to load data and systems gets hanged

Please advise how to resolve this issue and also provide an example with api data.


Note:-


Please check the below api for testing purpose..

https://coinmap.org/api/v1/venues/



45 Replies
KI KINS December 23, 2021 10:37 AM UTC

please help


BC Berly Christopher Syncfusion Team December 23, 2021 02:07 PM UTC

 Hi KINS, 
  
Greetings from Syncfusion support.  
  
We have checked the ComboBox component with EnableVirtualization and we did not face any performance issue at our end. We suspect that the issue may be caused due to fetching time of data in the page. Also, we suggest you to ensure that initially you have added take property in the query as mentioned in the below code example. 
  
<SfComboBox TValue="string" TItem="Countries" Query="@query" EnableVirtualization=true> 
    <SfDataManager Url="api/Country" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager> 
    <ComboBoxFieldSettings Value="CountryId" Text="CountryName" /> 
    <ComboBoxEvents TItem="Countries" TValue="string"></ComboBoxEvents> 
</SfComboBox> 
@code{ 
    public Query query = new Query().Take(10).RequiresCount(); 
   
} 
 
  
  
Regards, 
Berly B.C 


KI KINS December 24, 2021 08:29 AM UTC

Thanks for reply..

I have check above example but it takes long time if I load more than 25,000 record and also I can not filter data in combobox as fast




KI KINS December 24, 2021 05:28 PM UTC

Awaiting for reply 


BC Berly Christopher Syncfusion Team December 27, 2021 02:28 PM UTC

Hi KINS, 
  
After loading the data beyond 25000 items in the ComboBox component, we could not face the performance issue at our end. Also, we have modified the sample for filtering feature and attached it below. 
  
  
  
Regards, 
Berly B.C 


KI KINS December 29, 2021 09:51 AM UTC

Thanks for support...

I have below web api

please advise how to call this  in above code.


public async Task<List<ColorSetup>> GetColorList(int factoryID, int loggedInUserID)

        {

            httpClient = await aPIAuthenticationHelper.AuthenticateToken(httpClient);


            return await httpClient.GetJsonAsync<List<ColorSetup>>($"/api/Color/GetColorList?pFactoryID={CommonClassHelper.Base64Encode(factoryID.ToString())}&pLoggedInUserID={CommonClassHelper.Base64Encode(loggedInUserID.ToString())}");

        }


KI KINS December 30, 2021 04:53 PM UTC

Please help 


BC Berly Christopher Syncfusion Team December 30, 2021 05:46 PM UTC

Hi KINS, 
  
We will check and update the further details in two business days (3rd January 2022). We appreciate your patience until then. 
  
Regards, 
Berly B.C 


KI KINS January 3, 2022 10:11 AM UTC

awaiting for reply...


BC Berly Christopher Syncfusion Team January 3, 2022 03:47 PM UTC

Hi KINS, 
  
We suggest you to load the JSON values using JSON adaptor as mentioned in the below documentation and apply the virtualization technique and confirm us whether the issue is resolved or not. 
  
  
Still issue persists, share the issue reproducing sample along with issue reproducing video which will help us to check and proceed further from our end. 
  
Regards, 
Berly B.C 


KI KINS January 3, 2022 04:04 PM UTC

Thanks for reply...

Please check my below clarification.

1.As per above comments,Is there any performance issue If I load  large data in json format.(100000 record)

2.How can I filter data in server side if I load data in json format. 



KI KINS January 4, 2022 06:44 AM UTC

Please check my updated source code and advise how to resolve this issues.



Attachment: WebAPI_bb306656.rar

BC Berly Christopher Syncfusion Team January 4, 2022 02:39 PM UTC

Hi KINS, 
  
We will check the shared sample and provide further details in two business days (6th January 2022). We appreciate your patience until then. 
  
Regards, 
Berly B.C 


KI KINS January 6, 2022 03:23 AM UTC

Eagerly awaiting for prompt reply as per above.





KI KINS January 6, 2022 05:31 PM UTC

Is it possible to get reply today??

Because tomorrow support team will not available..



KI KINS January 7, 2022 02:24 PM UTC

Still awaiting for prompt reply


PM Ponmani Murugaiyan Syncfusion Team January 7, 2022 04:20 PM UTC

Hi KINS, 

Sorry for the late reply. We have checked the shared sample. We will load the component data on the popup open action. While opening the popup, you have loaded 100000 items in the component. Due to this, component gets hanged and performance issue occurred in the project. As we mentioned earlier, we suggest you to define the take property in the query to load limited items in the popup and then using the virtualization technique to load the rest items on demand using the EnableVirtualization property.  
 
<SfComboBox TValue="string" AllowFiltering=true FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" Query="@query" TItem="Countries" EnableVirtualization=true> 
    <SfDataManager Json="@countries" Adaptor="Adaptors.JsonAdaptor"></SfDataManager> 
    <ComboBoxFieldSettings Value="CountryId" Text="CountryName" /> 
    <ComboBoxEvents TItem="Countries" TValue="string"></ComboBoxEvents> 
</SfComboBox> 
@code{ 
    public Query query = new Query().Take(10).RequiresCount();  
    
    private List<Countries> countries { get; set; } 
    [Inject] 
    private ICountryService countryService { get; set; } 
    protected async override Task OnInitializedAsync() 
    { 
        countries = await countryService.GetCountry(); 
    } 
} 
 
 


Regards, 
Ponmani M 


KI KINS January 7, 2022 05:06 PM UTC

Thanks will check and let you know. 


PM Ponmani Murugaiyan Syncfusion Team January 10, 2022 03:57 AM UTC

Thanks for the update. Please get back us if you need further assistance. 


KI KINS January 17, 2022 04:15 AM UTC

I have another clarification.

I have bind Json data (using api) in combobox via "DataSource" and "SfDataManager" method

I would like to know which method to follow for binding data in combobox ??



PM Ponmani Murugaiyan Syncfusion Team January 17, 2022 03:16 PM UTC

Hi KINS, 

Query: I would like to know which method to follow for binding data in combobox ?? 
 
You can bind data to the ComboBox component using either Local datasource or Remote datasource. 

1.Using local datasource, you can bind array of JSON data or array of complex data using DataSource property. 

2.Using remote datasource, you can retrieve data from remote data services with the help of DataManager property which is used to fetch data from the service. You can find the list of adaptors with particular service endpoints are UrlAdaptor, ODataAdaptor, ODataV4Adaptor, WebApiAdaptor, WebMethodAdaptor. 

For more information about adaptors and usage, please refer the below links. 

Regards, 
Ponmani M 


KI KINS January 17, 2022 03:36 PM UTC

Thanks for reply...

I have check the performance of sfdatamanger (jsondata adapter) is fast when compared to local datasource


PM Ponmani Murugaiyan Syncfusion Team January 18, 2022 04:30 AM UTC

Hi KINS, 

Thanks for the update. Please get back us if you need further assistance. 

Regards, 
Ponmani M 


KI KINS January 18, 2022 03:45 PM UTC

After testing large data,I have found below two issues.

1.Cascading filter not working properly (it works only when I scroll down combobox)

2.Text value not showing in combobox when I click button (can not set Text value in combobox due to Virtualization take 10 records.)


Please check attached sample code and advise how to resolve this issues.


Attachment: NewWebAPI_9659b78c.rar

KI KINS January 19, 2022 03:54 PM UTC

Awaiting for reply...

Please help...


PM Ponmani Murugaiyan Syncfusion Team January 19, 2022 04:51 PM UTC

Hi KINS, 

Currently we are checking your reported query, will update further details in 2 business days (January 21, 2022). 

Regards, 
Ponmani M 


KI KINS January 21, 2022 10:02 AM UTC

awaiting for reply....

please help...


KI KINS January 21, 2022 04:36 PM UTC

Please help because tomorrow support team will not available 


KI KINS January 24, 2022 08:34 AM UTC

Is it possible to get reply today ??


VJ Vinitha Jeyakumar Syncfusion Team January 24, 2022 03:25 PM UTC

Hi Kins, 

 
Sorry for the inconvenience caused. 

 
Still, we are validating your reported query. we will update you the further details tomorrow(25/01/2022). 

 
Regards, 
Vinitha 


KI KINS January 24, 2022 03:33 PM UTC

Ok thanks..

Please help,this is my important task..


VJ Vinitha Jeyakumar Syncfusion Team January 25, 2022 03:27 PM UTC

Hi Kins, 


Query 1. "Cascading filter not working properly (it works only when I scroll down combobox)"

Unfortunately, we didn't face any issue as you reported. please share us with the issue reproducing scenario or video illustration to further validate on our end.

Query 2. "Text value not showing in combobox when I click button"

We can able to reproduce the reported issue at our end. we are validating on the issue cause. So will update you the further details on 27th January 2022.

Regards,
Vinitha


KI KINS January 25, 2022 04:11 PM UTC

For query1,

Please  check my example source code which I already shared (country filter)


KI KINS January 26, 2022 09:19 AM UTC

see the screencast for cascading filter

https://www.screencast.com/t/DqmAWkIuEud


Please help, it's my top most urgent requirement.....


DR Deepak Ramakrishnan Syncfusion Team January 26, 2022 01:25 PM UTC

Hi Kins, 
 
Thanks for your update. 
 
We request you to dynamically change query property of the component instead of changing its datasource (As you have dynamically changed the datasource in your provided sample) . You can refer the below code snippet and demo link for your reference .  
 
 
public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args) 
    { 
        this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value); 
        this.EnableCitytDropDown = false; 
        this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); 
        this.StateValue = null; 
        this.CityValue = null; 
    } 
    public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args) 
    { 
        this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value); 
        this.CityQuery = new Query().Where(new WhereFilter() { Field = "StateId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false }); 
        this.CityValue = null; 
    } 
 
 
 
 
 
In the above sample , when changing the country we have reset the query of the dependent combobox component’s query property based on the countryId (In your case set same  countryId for all Australia dependent states and another same Id for India dependent states ) . So it will refresh the popup with required items . 
 
 
Thanks, 
Deepak R. 


KI KINS January 27, 2022 01:39 PM UTC

As per below comments, Is it possible to get reply today ??


Query 2. "Text value not showing in combobox when I click button"

We can able to reproduce the reported issue at our end. we are validating on the issue cause. So will update you the further details on 27th January 2022.

PM Ponmani Murugaiyan Syncfusion Team January 27, 2022 02:48 PM UTC

Hi KINS, 

Sorry for the delay. 

The cause for the issue is while providing the value property out of initial data count(Take property) in the virtualization, then it consider it as custom value. Hence corresponding text is not updated to the component. As of now, we suggest you to update the AllowCustom property as false to get rid of this issue.  

<SfComboBox TValue="string" AllowFiltering=true AllowCustom="false" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" @bind-Value="@CountryID" Query="@query" TItem="Countries" EnableVirtualization=true> 


We will investigate further with AllowCustom=true case and update further details in 2 business days (January 31, 2022). 

Regards, 
Ponmani M 


KI KINS January 29, 2022 05:54 AM UTC

Thanks for reply.

I have found the same issues in "Multiselect" control.Please check the below screencast and attached example code for multiselect  control.

https://www.screencast.com/t/UHcI2D9J




Attachment: WebAPI100087912_d817356f.rar

PM Ponmani Murugaiyan Syncfusion Team January 31, 2022 02:45 PM UTC

Query1: "Text value not showing in combobox when I click button" 

We have considered the reported issue “Value property not set to the component when enabling virtual scrolling with AllowCustom true case” as bug in our end. The fix will be included in the upcoming patch release which is expected to be rolled out on February 16, 2022. You can track the status using the below feedback link. 


Query2: I have found the same issues in "Multiselect" control. 
 
We suggest you to upgrade to latest version to resolve the reported issue in Multiselect control. 


Regards, 
Ponmani M 


KI KINS February 1, 2022 10:12 AM UTC

I have updated latest version "19.4.0.48" but still not solved the multiselect issues



PM Ponmani Murugaiyan Syncfusion Team February 2, 2022 10:32 AM UTC

Hi KINS, 

The cause for the issue is, you have provided the TValue as int[], but while binding the datasource the ID field exists as string type due to adding 2 in string. So, we request you to modify and provide the ID field in int type, to get rid of the reported issue. 

 

Regards, 
Ponmani M 


KI KINS February 15, 2022 06:28 PM UTC

As per below comments from Ponmani,may I expect the patches released by tomorrow ???


Query1: "Text value not showing in combobox when I click button" 


We have considered the reported issue “Value property not set to the component when enabling virtual scrolling with AllowCustom true case” as bug in our end. The fix will be included in the upcoming patch release which is expected to be rolled out on February 16, 2022. You can track the status using the below feedback link. 



Query2: I have found the same issues in "Multiselect" control. 
We suggest you to upgrade to latest version to resolve the reported issue in Multiselect control. 



Regards, 
Ponmani M 

PM Ponmani Murugaiyan Syncfusion Team February 16, 2022 08:43 AM UTC

Hi KINS,  

We are facing complexity in resolving the reported issue in our end. We will include the fix in the upcoming patch release which is expected to be rolled out on March 02, 2022.  

Regards,  
Ponmani M 


KI KINS March 1, 2022 06:25 AM UTC

Hello Ponmani,

Awaiting tomorrow for above bugs fix


PM Ponmani Murugaiyan Syncfusion Team March 1, 2022 08:39 AM UTC

We are glad to announce that fix for the issue “Value property not set to the component when enabling virtual scrolling with AllowCustom true case" has been rolled out in our weekly patch release. We request you to upgrade the package to “19.4.54” version to get rid of this issue. Please find the sample below. 



Loader.
Up arrow icon