We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

<ejs-dropdownlist> is not loding selected value on first load

When i load data for first time dropdown do not show selected value. But when we navigate from second tab to first tab it loads all the values correctly.

Also if I call LoadData method twice from parent component it loads all the data correctly

This looks like a sync issue and I have no clue on how to solve it.

Note: I am using Child component inside TabItem

Parent (Has TabItem)>Clild(LoadData Method)

I have below code:

Parent component : 


 <div class="flex-grow-1 row responsive-height">
        <div class="col-12 height-93">

          <ejs-tab #tabMenu (selected)="selected($event)">
            <e-tabitems class="pt-2 ml-4">

                <ng-template #headerText>
                  <div> {{ 'MasterData.ComponentTitle'| translate }} </div>
                <ng-template #content>
                  <app-master-data #masterDataTab (_masterDataChanged)="onDataChange($event)"
                    (_isMabesMapping)="onMasterDataLoaded($event)" (_masterDataLoaded)="onDataLoad($event)"></app-master-data>

.Ts File:
Loading child component data from parent component :

  public loadCurrentTabData(selectedIndex: number): void {
    switch (selectedIndex) {
      case 0: this.masterDataTab?.loadData(this.currentPart.idPartMaterialNumber);

Child component:

<ejs-dropdownlist #masterDataProducerCostCenter id="masterDataProducerCostCenter"
            placeholder="{{ 'MasterData.ProducerCostCenter' | translate }}"
            [dataSource]="producerCostCenterDropdownList" [fields]="producerCostCenterDropdownFields"
            [(ngModel)]="masterData.producerCostCenterId" (ngModelChange)="dataChanged()">

.Ts File:
Load method which loads data in all dropdown

public loadData(partId: number, count = 1): void {
    this.loading = true;
    this._masterDataService.getMasterDataByPartId(partId).subscribe(result => {
      this.loading = false;
      this.masterData = result;
      this._toastService.pop('success', this._translatePipe.transform('Services.MasterData'), this._translatePipe.transform('MasterData.Loaded'));
    }, err => {
      this.loading = false;
      if (err.status === 401 || err.statusText === 'Unauthorized') {
        this.loading = true;
        if (count === 1) {
          this._utilService.delay().then(() => {
            console.log('Wait 5 Seconds!');
            this.loadData(partId, count + 1);
      } else {
        this._errorService.handleErrorCode(err, this._translatePipe.transform('Services.MasterData'));

1 Reply

SP Sureshkumar P Syncfusion Team March 29, 2023 11:51 AM UTC

Hi Akshay,

We suggest you call the LoadData method inside the component created event handler method to resolve the issue from your end.


Sureshkumar P

Live Chat Icon For mobile
Up arrow icon