Unable to Set Data on Runtime in MultiSelectDropdown inside before popup event

Question

Dear Team,I am using MultiSelectDropdown Control, Where I want to bind data on various events like on scroll or on before popup event, every time data fetched from api. But even I have tried static data but not get the proper result. All these events I have implemented perfectly in Dropdownlist like scroll, beforeopen, on filter.Some snaps are attached below.Pl suggest were I doing wrong.1) popupBeforeOpen function not firing every time we try to open the popup,2) Data not showing in the popup3) We need to change the Data every time we click on the dropdown icon on multi-select---------------------------HTML Code---------------------------

data[control.AutoCompleteModel.ValueColumn]

--------------------TS Code--------------------------------------------------import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.scss']})export class TestComponent implements OnInit { constructor() { } ngOnInit(): void { } control = { AutoCompleteModel: { Data: [], TextColumn: 'FIELD_NAME', ValueColumn: 'CITY_ID', Width: 100 }, FieldName: 'CITY', IsReadonly: false } id1 = 1 id2 = 2 actionType = undefined popupBeforeOpen(args, multiSelect) { if (this.control.AutoCompleteModel.Data instanceof Array && this.actionType == undefined) { args.cancel = true this.actionType = 'abc'; this.control.AutoCompleteModel.Data = [ {CITY_ID: this.id1, FIELD_NAME: 'Test' + this.id1}, {CITY_ID: this.id2, FIELD_NAME: 'Test' + this.id2}, ] this.id1 += 2 this.id2 += 2 setTimeout(() => { this.actionType = undefined }, 1000); } }}

Sureshkumar P · Accepted Answer

Hi Deepak, 
 
Thanks for your detailed information. 
 
We have created the sample based on your shared information. and we suggest you call the dataBind method after update the dynamic data source into the component.  
 
Please find the code example here:  




onPopupOpen(e) { 
    if (!this.isFirst) { 
      this.multiselectObj.dataSource = data; 
    } else if (this.isFirst) { 
      this.multiselectObj.dataSource = data1; 
    } 
    this.multiselectObj.dataBind(); 
    this.isFirst = true; 
  } 
 
 
We have created the sample based on your shared information. please find the sample here: https://stackblitz.com/edit/angular-9pakz2-937xdi?file=app.component.ts  
 
Regards, 
Sureshkumar P

Sevvandhi Nagulan · Answer

Hi Deepak,

Greetings from Syncfusion support.

We would like to inform you that beforeOpen event is triggered before initially opening the popup. So, we suggest using the open event to change the dataSource when you open the popup every time. Refer to the below code and sample,

[app.component.html]

<ejs-multiselect id='localData' #multiselect [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' (open)='onPopupOpen($event)' ></ejs-multiselect>

[app.component.ts]

onPopupOpen(e){

if(!this.isFirst){

this.multiselectObj.dataSource = data;

}

else if(this.isFirst) {

this.multiselectObj.dataSource = data1;

}

this.isFirst = true;

}

Please find the sample below,

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

API link: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list/#beforeopen

Kindly check the above sample and get back to us if you need further assistance.

Regards,

Sevvandhi N

Deepak Jain · Answer

Dear Team,I tried it by using open event instead of beforeOpen as per your example, But still I am facing the same problem. In multiselect data is binding perfectly, but popup is showing on second click. Please help me with that. How can I handle it to open multiselect popup on single click?.Warm RegardsDeepak

Sureshkumar P · Answer

Hi Deepak, 
 
Thanks for your update. 
 
Based on your shared information, we have validated our attached previous solution sample. but we cannot able to replicate the reported issue from our end. please shared the issue replicated sample with detailed replication procedure. That will help us to provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P

Deepak Jain · Answer

Dear SureshKumar,Sample link: https://stackblitz.com/edit/angular-9pakz2?file=app.component.ts In the given above sample , if we add mode='CheckBox' & showSelectAll='true' then the multiselect misbehaves and not changing the data as expected, as is the case with my application.Can you please check why it is misbehaving ??