Virtualization in MultiSelect

[Deepak Jain]

Dear Team,

I am using MultiSelect in my Angular 8 application.

I have total of 10000 records and I can't bind all the data at once so I want to bind the data during first time opening of multiselect (15 records) and then add data on filtering,scrolling  (15 more records) based on search string also with the option to "Select All".

Can you please tell how to achieve this through virtualization or any other approach ?

[Ponmani Murugaiyan]

Hi Deepak, 

Thanks for contacting Syncfusion support. 

Query1: I want to bind the data during first time opening of multiselect (15 records)                                                                                                                                         

 

At initial opening you can load 15 records using the take in query property as like below code snippet. 

 

    // bind the Query instance to query property 

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

 

Query2: Add data on filtering,scrolling  (15 more records) 

We have prepared sample as per your requirement with search and selectAll 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 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-yqkmdm?file=app.component.html  

  

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

  

Regards,  

Ponmani M 

[Deepak Jain]

Hello Ponmani,

In my application I am not using DataManager. I have all the 10000 records available at the component level as an array of objects.

But I want to bind data only on request. For example :

1) At initial rendering = 0 records

2) First time click and open popup = 15 records

3) First keypress typing "a" = 15 + 15(based on search string "a")

4) Second keypress typing "ap" = 30 + 15(based on search string "ap")

5) Third keypress typing "app" =  45 + 15(based on search string "app")

Also the record matching the search string should be on top while typing.

[Ponmani Murugaiyan]

Hi Deepak, 

Thanks for the update. 

We have prepared sample as per your requirement the data will be loaded with 15 items on every filtering based on character length. 

public query: Query = new Query().select(["Name", "Code"]).take(15); 

 

public onFiltering: EmitType<FilteringEventArgs> = (e: FilteringEventArgs) => { 

    let char = e.text.length + 1; 

    let query: Query = new Query(); 

    query = e.text !== ""? query.where("Name", "contains", e.text, true).take(char * 15) : query; 

    e.updateData(this.data, query); 

}; 

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

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

Regards, 

Ponmani M