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

[MM]

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.

https://ej2.syncfusion.com/angular/demos/?_ga=2.126607432.498755527.1585570689-304899231.1568032590#/material/multi-select/checkbox

Also, I am using angular 7.

Thank you,

M

[Ponmani Murugaiyan]

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) => { 

        }); 

      } 

    }) 

  } 

 

 

 

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

 

Kindly check with the above sample. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[MM]

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);

    }

[Ponmani Murugaiyan]

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"); 

      } 

    }); 

  } 

} 

 

 

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

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

 

Regards, 

Ponmani M