1. Home
  2. Forum
  3. Angular - EJ 2
  4. What is the best way to lazy load data to MultiSelectComponent from API?

What is the best way to lazy load data to MultiSelectComponent from API?


Hello everybody,

I have a very specific situation, my MultiSelect Dropdown should have about 1000 items (search, checkbox) - everything is included.
So I need some kind of lazy loading.

Could you give me some examples of how to achieve such functionality?

I have read the documentation, but I can not find any example for lazy loading.

Also, I am using angular 7.

Thank you,
M

3 Replies
PM Ponmani Murugaiyan Syncfusion Team March 31, 2020 07:50 AM UTC

Hi Maja, 
 
Greetings from Syncfusion support. 
 
We have prepared sample as per your requirement with search and checkbox option. You can achieve your requirement at application end by using virtual scrolling in default scroll event. In the attached sample by using dataManager, we have loaded data in on demand through data manager’s query request. Please find the sample below for your reference. 
 
[app.component.ts] 
 
public onOpen(args){ 
    let start: number = 7; 
    let end: number = 12; 
    let listElement: HTMLElement = (this.multiselectObj as any).list; 
    listElement.addEventListener('scroll', () => { 
      if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) { 
        let filterQuery = this.multiselectObj.query.clone(); 
        this.data.executeQuery(filterQuery.range(start, end)).then((event: any) => { 
          start = end; 
          end += 5; 
          this.multiselectObj.addItem(event.result as { [key: string]: Object }[]); 
        }).catch((e: Object) => { 
        }); 
      } 
    }) 
  } 
 
 
 
 
Kindly check with the above sample. If you need further assistances, please get back us. 
 
Regards, 
Ponmani M 


MM MM April 1, 2020 01:33 PM UTC

Hello,

You use the table name for the query. We don't use tables in our API response, we just get an array.
So how do we use this approach for arrays?

  public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(25);



export class AppComponent {
  @ViewChild('remote')
  public multiselectObj: MultiSelectComponent
  public data: DataManager = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});

    // bind the Query instance to query property
    public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(25);
    // maps the remote data column to fields property
    public remoteFields: Object = { text: 'ContactName', value: 'CustomerID' };
    // set the placeholder to MultiSelect input element
    public remoteWaterMark: string = 'Select names';
    public mode: string = 'CheckBox';

API example:

this.testService.getAll().subscribe((response: any) => {
     this.tests= response;
     // this.tests -- array
    }, error => {
      console.log(error.message);
    }





PM Ponmani Murugaiyan Syncfusion Team April 2, 2020 01:00 PM UTC

Hello Maja, 
 
We have validated your reported query. As per your requirement we have modified the sample. Please find the sample below for reference. 
 
[app.component.ts] 
 
public getData(data) { 
    if(data === "load"){ 
      this.state.take = this.state.take + 10; 
      this.state.skip = this.state.skip + 10; 
    } 
        const skipquery = this.state.skip ? `$skip=${this.state.skip}` : null; 
        let pageQuery = ""; 
        const takeQuery = this.state.take ? `$top=${this.state.take}` : null; 
        if (skipquery) { 
          pageQuery = `${skipquery}&`; 
        } 
        if (takeQuery) { 
          pageQuery = `${pageQuery}${takeQuery}`; 
        } 
 
        this.data = this.http 
          .get(`${this.BASE_URL}?${pageQuery}&$count=true`) 
          .pipe( 
            map(data => { 
              return (<any>data).value; 
            }) 
          ); 
  } 
  // bind the Query instance to query property 
  // maps the remote data column to fields property 
  public remoteFields: Object = { text: "CustomerID", value: "CustomerID" }; 
  // set the placeholder to MultiSelect input element 
  public remoteWaterMark: string = "Select names"; 
 
  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.multiselectObj as any).list; 
    listElement.addEventListener("scroll", () => { 
      if ( 
        listElement.scrollTop + listElement.offsetHeight >= 
        listElement.scrollHeight 
      ) { 
       this.getData("load"); 
      } 
    }); 
  } 
} 
 
 

Kindly check with the above sample meets your requirement. If not please get back us, we will assists you further. 
 
Regards, 
Ponmani M 


Loader.
Up arrow icon