How do I update the selected display data after I update the object array of the dataSource

[Green Li]

<ejs-dropdownlist id='addItem' #addItem [dataSource]='banks' [(value)]='selectedBankId' [fields]='fields' [popupHeight]='height'

[placeholder]='watermark'>

<ng-template #itemTemplate let-data>

<div class="item-row">

<mat-icon svgIcon="navigation:home_icon" class="svg-icon"></mat-icon>

<div>BSB</div>

<div class="number">{{data?.bsb.slice(0,3) + ' ' + data?.bsb.slice(4, 7)}}</div>

<div>Acc no</div>

<div class="number">{{data?.accountNumber.slice(0,4) + ' ' + data?.accountNumber.slice(4,8)}}</div>

</div>

</ng-template>

<ng-template #valueTemplate let-data>

<div class="item-row item-selected">

<mat-icon svgIcon="navigation:home_icon" class="svg-icon"></mat-icon>

<div>BSB</div>

<div class="number">{{data?.bsb.slice(0,3) + ' ' + data?.bsb.slice(4, 7)}}</div>

<div>Acc no</div>

<div class="number">{{data?.accountNumber.slice(0,4) + ' ' + data?.accountNumber.slice(4,8)}}</div>

</div>

</ng-template>

</ejs-dropdownlist>

getBanks(bettingEdgeUserProfile) {

this._accountingBanksService.getBanks(bettingEdgeUserProfile.id).subscribe(resp => {

this.banks = resp.banks;

});

After I edited the banks and make an API call to refresh the banks for the dataSource in the component.

The selected item's content is not updated while the content of the dropdown list is updated.

How to I get the selected item's content update as well.

[Karthikeyan Viswanathan]

Hi Green Li, 

Thanks for contacting Syncfusion support. 

Based on your data, you can change the selected value by using dataBound event. 

Please refer the UG Documentation link: https://ej2.syncfusion.com/angular/documentation/drop-down-list/api-dropDownListComponent.html#databound  

In data bound, you can reset the value as null and again set the selected value. 

Refer the below code example: 

<code> 

onBound() { 

    let val : string = this.selectedBankId; 

    this.selectedBankId = null; 

    this.selectedBankId = val; 

    } 

</code> 

   

Regards, 

Karthikeyan V. 

[Green Li]

Thanks for answering the question, Karthikeyan.  But that didn't solve my problem,  the issue is still about the selected item's display is not updated event the binding changed.  The issue can be seen as the following image:  

Is that related to the template updating?

[Piramanayagam Ramakrishnan]

Hi Green Li, 

 

We tried to replicate the issue in our end using the provided details, but unfortunately, we were unable to replicate the issue in our end. The Value template gets updated properly when the dataSource bound in the control gets updated.  

 

Sample: https://stackblitz.com/edit/angular-xktooe-6h3d4w 

 

Kindly provide steps to replicate the issue in our end. 

 

Regards, 

Piramanayagam R 

[Green Li]

Hi 

I've replicated the issue based on your example. After I click the button to change the data, the selected value didn't get updated.

Sample: https://stackblitz.com/edit/angular-xktooe-4mn6ve

[Prince Oliver]

Hi Green Li, 

Thank you for your update. 

We were able to replicate the issue in our end in the provided sample. We have confirmed it as a defect in our end and the fix for the issue will be included in the upcoming patch release.  

Regards, 

Prince 

[Samuel]

Was this fixed? I'm facing a similar issue in the ComboBox. 

[Prince Oliver]

Hi Samuel, 

Thank you for contacting us. 

Yes, this issue is fixed in our end and it is included in the version 16.3.25. Kindly refer to the following release notes section: https://ej2.syncfusion.com/angular/documentation/release-notes/16.3.25/#dropdownlist 

We suggest you upgrade to the latest version to resolve the issue. Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Raj Maheshwari]

Hello Team

I am haivng same issue on 

can you pleaser review following stackblitz 

https://stackblitz.com/edit/angular-xktooe-fqwena?file=package.json,templatedriven.component.ts

and let me know what I am doing incorre

[UdhayaKumar Duraisamy]

Based on the information you have provided, we suspect that you are attempting to remove the selected value from the dropdownlist component. You can set the value property to null directly in order to remove the value from the component. Please refer to the modified sample below for reference.

  changeData() {

    this.selectedValue = null;

  }

Sample: https://stackblitz.com/edit/angular-xktooe-4hbimw?file=templatedriven.component.ts,templatedriven.html