Filter data on server and lazy load first few options only

[Raj Maheshwari]

Hello Team

We are evaluating the multielect dropdown for angular

we have more than 30000 data to show in that dropdown and filter. 

And for each row in the table we have to show this control with slightly different values (so this multiselect dropdown is used more than 30 times on a page)

when we implemented it with all data in the filter the dropdown was taking multiple seconds to open and page was very slow to load. and sometimes the browser was crashing.

we have since trying to use remote filter and remote loading of option but not able to achieve it with this control.

Can you please help us to an example where we can follow the remote filtering and only first few matches (say 20) are presented to the options and it updates as we filter more.

We did review following thread but it did not help with filtering

https://ej2.syncfusion.com/angular/documentation/multi-select/data-binding/#data-binding-using-async-pipe

[UdhayaKumar Duraisamy]

Hi Raj,

We are validating the requirement. We will update the further details in two business days (1^st September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Raj,

Sorry for the inconvenience caused.

Due to complexity, We are still validating the requirement. We will update the further details in two business days (6^th September 2022).

Regards,

Udhaya Kumar D

[Raj Maheshwari]

Thank you for looking into this - looking forward for sample 

Regards

Raj

[UdhayaKumar Duraisamy]

Hi Raj,

As we mentioned earlier we will update the further details on 6^th September 2022.

Regards,

Udhaya Kumar D

[Mohanraj Mathaiyan]

Hi Raj Maheshwari,

As per your requirement, we have created sample with local datasource. please find the attached sample for your reference.

sample : https://stackblitz.com/edit/angular-mfxyw7-xairzf?file=app.component.html,app.component.ts,app.component.css

we will update the solution for remote datasource within two business day(09/09/2022).

Regards,

Mohanraj M

[Raj Maheshwari]

Thank you Mohanraj
I wonder this can be sampled with Multiselect checkbox input as that is the control we are using.
with remote search and virtual scroll

also can we preload the dropdown with 20 items beforehand so its available to user as soon as he click.

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/checkbox

- Tony

[Deepak Ramakrishnan]

Hi Raj Maheshwari,

We have created a sample which includes  remote date with virtualization functionality . Also it will list 20 items while performing filtering . You can check the below demo and sample link for further references .

Sample Code :
https://stackblitz.com/edit/angular-wk51f5-dk2w8n?file=app.component.html,app%2Fapp.module.ts,app.component.ts

Demo: 

 https://angular-wk51f5-dk2w8n.stackblitz.io/ 

​
Thanks,
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Deepak R

[Raj Maheshwari]

Thank you Deepak

How do i have filtered criterion added to the requests so API can respond to only matching response

Regards,

Raj

[UdhayaKumar Duraisamy]

Hi Raj,

We are validating the requirement. We will update the further details in two business days (14^st September 2022).

Regards,

Udhaya Kumar D

[UdhayaKumar Duraisamy]

Hi Raj Maheshwari,

We suggest you refer the below Syncfusion documentation for your requirement.

1. https://ej2.syncfusion.com/documentation/api/data/query/#search
2. https://ej2.syncfusion.com/documentation/api/data/query/#select
3. https://ej2.syncfusion.com/documentation/api/data/query/#where
4. https://ej2.syncfusion.com/documentation/api/data/predicate/

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D