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

[akshay gawande]

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 : 

HTML:

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

              <e-tabitem>

                <ng-template #headerText>

                  <div> {{ 'MasterData.ComponentTitle'| translate }} </div>

                </ng-template>

                <ng-template #content>

                  <app-master-data #masterDataTab (_masterDataChanged)="onDataChange($event)"

                    (_isMabesMapping)="onMasterDataLoaded($event)" (_masterDataLoaded)="onDataLoad($event)"></app-master-data>

                </ng-template>

              </e-tabitem>

            </e-tabitems>

          </ejs-tab>

.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:

HTML:

<ejs-dropdownlist #masterDataProducerCostCenter id="masterDataProducerCostCenter"

            placeholder="{{ 'MasterData.ProducerCostCenter' | translate }}"

            [dataSource]="producerCostCenterDropdownList" [fields]="producerCostCenterDropdownFields"

            [(ngModel)]="masterData.producerCostCenterId" (ngModelChange)="dataChanged()">

          </ejs-dropdownlist>

.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.initializeView();

      this._masterDataLoaded.emit(true);

      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;

        this._errorService.handleAuthorize(this._translatePipe.transform('Services.MasterData'));

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

      }

    });

  }

[Sureshkumar P]

Hi Akshay,

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

Regards,

Sureshkumar P