Dropdown with huge data

[vin]

I have dropdown with lots of data loaded
I have a selected value for it, the selected value is not showing selected even though the data is loaded and selected value is loaded!!

When i hardcode and put little data, it shows selected.

Is it not getting selected due to large amount of data?

Is there better solution in loading  the data for dropdown ?

[Ponmani Murugaiyan]

Hi vin,  

Greetings from Syncfusion support. 

We have validated your reported issue. As per your requirement for loading large data we suggest you to use the virtual scrolling to get rid of the reported issue. 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. Please find the test sample and code snippet below for reference. 

[app.component.ts] 

public onOpen(args){ 

    let start: number = 7; 

let end: number = 12; 

let listElement: HTMLElement = (this.dropdownObj as any).list; 

listElement.addEventListener('scroll', () => { 

if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) { 

  let filterQuery = this.dropdownObj.query.clone(); 

  this.data.executeQuery(filterQuery.range(start, end)).then((event: any) => { 

    start = end; 

    end += 5; 

    this.dropdownObj.addItem(event.result as { [key: string]: Object }[]); 

  }).catch((e: Object) => { 

  }); 

} 

}) 

} 

 

 

Sample: https://stackblitz.com/edit/angular-guucqq-6rextl?file=app.component.ts 

 

Kindly check with the above sample. Please get back us if you need further assistance. 

 

Regards, 

Ponmani M 

[vin]

 Can we get the same dropdown functionality without using DataManager?

By directly calling the http.get call?

I need to call an API which has parameters  Filter, RowsPerPage, PageNumber 

Need an example

[vin]

 Can we get the same dropdown functionality without using DataManager?

By directly calling the http.get call?

I need to call an API which has parameters  Filter, RowsPerPage, PageNumber 

Need an example

Any help please?

[Ponmani Murugaiyan]

Hi vin, 

Sorry for the delay. 

Query1: Can we get the same dropdown functionality without using DataManager? 

We have prepared sample as per your requirement for virtual scrolling functionality in Dropdownlist component without using DataManager. 

Sample: https://stackblitz.com/edit/angular-wk51f5-yhux7v?file=app.component.ts 

Query2: I need to call an API which has parameters Filter, RowsPerPage, PageNumber. 

We request you to elaborate the above query with additional information like which component used in your application, control rendering code snippet, which helps us to check and provide you the solution at earliest. 

Regards, 

Ponmani M 

[vin]

In ur example, you have the static data ready. And the example is using datamanager.

My requirement is How to make an API call and get the next set of data when i scroll or search the dropdown.

Do i still need a datamanager to make API call?

[Ponmani Murugaiyan]

Hi vin, 

We are currently checking the reported query as per your requirement. In two business days, we will check and update further details (May 24, 2021). Until then, we appreciate your patience. 

Regards, 

Ponmani M 

[vin]

Hi vin, 

We are currently checking the reported query as per your requirement. In two business days, we will check and update further details (May 24, 2021). Until then, we appreciate your patience. 

Regards, 

Ponmani M 

Any update?

[Ponmani Murugaiyan]

Hi vin, 

Sorry for the delay. 

Query: My requirement is How to make an API call and get the next set of data when i scroll or search the dropdown. 

 

We have prepared sample as per your requirement to get the next set of data when scrolling without using DataManager. 

[app.component.html] 

 

<ejs-dropdownlist id='remoteData' #remote [dataSource]='data | async' [fields]='remoteFields' [query]='query' 

[placeholder]='remoteWaterMark' sortOrder='Ascending' (open)="onOpen($event)"></ejs-dropdownlist> 

[app.component.ts] 

public onOpen(args) { 

    let start: number = 7; 

    let end: number = 12; 

    this.state.skip = this.state.skip + 10; 

    this.state.take = this.state.take; 

    let listElement: HTMLElement = (this.dropdownObj as any).list; 

    listElement.addEventListener('scroll', () => { 

      if ( 

        listElement.scrollTop + listElement.offsetHeight >= 

        listElement.scrollHeight 

      ) { 

        this.getData('load'); 

      } 

    }); 

Sample: https://stackblitz.com/edit/angular-9mzrze-twxl4j?file=app.component.ts 

Regards, 

Ponmani M