datasource values not comming in Multiselect dropdownbox

[sunil]

I am using ejs-multiselect dropdownlist and ejs dropdownlist in that i am using same datasource.

In ejs-dropdownlist data is comming but in Multiselect dropdownlist data is not comming .i am attaching code here.

<div class="col-md-12">

  <button ejs-button cssClass="e-info" (click)="updateMatchupClick()">Update Matchup</button>

</div>

<ejs-dialog showCloseIcon='true' #matchupTemplateDialog width='600px' height='auto' isModal='true' [visible]='false'>

  <form id="ngFormID" #runMatchup="ngForm" novalidate>

    <div class="card">

      <div class="card-body">

        <ng-template #header>

          Parent-Child Relation Mapping

        </ng-template>

        <ng-template #content>

          <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"

            fxLayoutAlign="start" [style.margin-bottom]="'20px'">

             <div fxFlex class="child-1">

              <ejs-multiselect floatLabelType="Always" id='multiselect-checkbox' name='parentAgreementType' #checkbox

                [dataSource]='agreementTypeDatas1' placeholder='Select Child Document' [fields]='checkFields' [mode]='mode'

                [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true'

                [filterBarPlaceholder]='filterPlaceholder' ngModel>

              </ejs-multiselect>

            </div> 

            <!-- <div fxFlex class="child-1">

              <ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='agreementTypeDatas1' [placeholder]='checkWaterMark' [fields]='checkFields'

              [mode]='mode' [popupHeight]='popHeight' width="150px" [showDropDownIcon]='true' allowFiltering="true" showSelectAll='true' [filterBarPlaceholder]='filterPlaceholder'></ejs-multiselect>

      </div> -->

            <div fxFlex class="child-2">

              <ejs-dropdownlist floatLabelType="Always" id='childAgreementType' name="childAgreementType"

                [dataSource]='agreementTypeDatas1' placeholder='Select Child Document' popupHeight='200px' ngModel>

              </ejs-dropdownlist>

            </div>

          </div>

          <div fxFlexFill class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px"

            fxLayoutAlign="start" [style.margin-bottom]="'20px'">

            <div fxFlex class="child-3">

              <ejs-dropdownlist floatLabelType="Always" id='parentDocument' name="parentDocument"

                [dataSource]='agreementTypeDatas1' placeholder='Select Child Parent Document' popupHeight='200px'

                ngModel>

              </ejs-dropdownlist>

            </div>

          </div>

        </ng-template>

        <ng-template #footerTemplate>

          <div style="text-align: center;">

            <button ejs-button cssClass="e-primary" content="Run Matchup" type="submit"

              (click)="onRunMatchupClick(runMatchup)">Run Matchup</button>

          </div>

        </ng-template>

      </div>

    </div>

  </form>

</ejs-dialog>

<br><br>

<!-- Syncfusion grid data -->

<div class="control-section" *ngIf="isDisableGrid">

  <ejs-grid #grid [dataSource]=' data' [allowPaging]="true" [toolbar]='toolbar' showColumnChooser='true'

    [editSettings]='editSettings' (toolbarClick)='toolbarClick($event)' [allowResizing]="true"

    [filterSettings]='filterOptions' [pageSettings]='pageSettings' [filterSettings]='filterSettings'

    [groupSettings]='groupOptions' [allowFiltering]='true' (actionBegin)="actionBegin($event)">

    <e-columns>

      <e-column field='blId' headerText='Reference Id' width='100' [allowEditing]="false"></e-column>

      <e-column id='diacritics' field='parentReferenceId' headerText='Parent Reference Id' editType='dropdownedit'

        [edit]='dpParams' [allowFiltering]='true' [ignoreAccent]='true' filterBarPlaceholder='e.g: 10001'>

      </e-column>

      <e-column field='fileName' headerText='File Name' width='180' [allowEditing]="false"></e-column>

      <e-column field='agreementType' headerText='Agreement Type' width='100' [allowEditing]="false"></e-column>

      <e-column field='typeOfDocument' headerText='Parent Agreement Type' width='100' [allowEditing]="false">

      </e-column>

      <e-column field='firstParty' headerText='First Party' width='100' [allowEditing]="false"></e-column>

      <e-column field='counterParty' headerText='Counter Party' width='100' [allowEditing]="false"></e-column>

      <e-column field='effectiveDate' headerText='Effective Date' width='100' [allowEditing]="false"></e-column>

      <e-column field='masterEffectiveDate' headerText='Parent Effective Date' width='100' [allowEditing]="false">

      </e-column>

    </e-columns>

  </ejs-grid>

</div>

import { Component, OnInit, ViewChild } from '@angular/core';

import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';

import { DropDownList } from '@syncfusion/ej2-angular-dropdowns';

import { EditSettingsModel, GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';

import { ClickEventArgs, ItemModel } from '@syncfusion/ej2-angular-navigations';

import { DialogComponent } from '@syncfusion/ej2-angular-popups';

import { MastertrackercreatorService } from '../../service/data/mastertrackercreator.service';

import { ToolServiceService } from '../../service/data/tool-service.service';

import { COMPANY_NAME } from '../result-document/result-document.component';

@Component({

  selector: 'app-update-matchup',

  templateUrl: './update-matchup.component.html',

  styleUrls: ['./update-matchup.component.css']

})

export class UpdateMatchupComponent implements OnInit {

  data: any;

  masterMatchUpAddendum: any;

  masterMatchUpAddendum1: any;

  agreementTypeDatas = [];

  agreementTypeDatas1 = [];

  agreementTypeDatas11 = [];

  parentReferenceDropDownData = [];

  parentReferenceDropDownData1 = [];

  public dpParams: any;

  public elem: HTMLElement;

  public dropObj: DropDownList

  public targetElement: HTMLElement;

  public editSettings: EditSettingsModel;

  dataTest = ['MSA', 'SOW', 'Amendment', 'Addendum', 'Order', 'Parent']

  isDisableGrid = true;

  @ViewChild('grid') grid: GridComponent;

  @ViewChild('matchupTemplateDialog') matchupTemplateDialog: DialogComponent;

  @ViewChild('select')

  public reorderObj: CheckBoxComponent;

  public mode: string;

  public toolbar: ToolbarItems[] | object;

  public filterSettings: Object;

  public filteringType: Object[] = [

    { Id: 'Menu', type: 'Menu' },

    { Id: 'CheckBox', type: 'Checkbox' },

    { Id: 'Excel', type: 'Excel' }

  ];

  //public checkFields: Object = { text: 'AgreementType', value: 'companyId' };

  constructor(private masterTrackerCreatorService: MastertrackercreatorService, private toolService: ToolServiceService) { }

  ngOnInit() {

    this.getAgreementTypeDataForMasterMatchup();

    this.parentRefrenceIdDropDown();

    this.filterSettings = { type: 'Menu' };

    this.mode = 'CheckBox';

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };

    this.toolbar = ['Search']

  }

  updateMatchupClick() {

    this.matchupTemplateDialog.show();

  }

  toolbarClick(args: ClickEventArgs): void {

    if (args.item.id.endsWith('clear')) {

      this.grid.searchSettings.key = '';

      (this.grid.element.querySelector(".e-input-group.e-search .e-input") as any).value = "";

    }

    if (args.item.id.endsWith('Update')) {

    }

    //Master matchup addendum.

    if (args.item.id.endsWith('Update Matchup')) {

      this.matchupTemplateDialog.show();

    }

  }

  onRunMatchupClick(event) {

    this.isDisableGrid = true;

    this.matchupTemplateDialog.hide();

    var parentAgreementType = event.form.value.parentAgreementType;

    var childAgreementType = event.form.value.childAgreementType;

    var parentDocument = event.form.value.parentDocument;

    let content = {

      "childAgreementType": event.form.value.childAgreementType,

      "parentAgreementType": event.form.value.parentAgreementType,

      "parentDocument": event.form.value.parentDocument

    }

    this.data = [];

    if (parentDocument == "") {

      parentDocument = "no";

    }

    this.masterTrackerCreatorService.getVerifiedDataBasedOnUserConditions(parentAgreementType, childAgreementType, parentDocument).subscribe(dataList => {

      console.log("Data is ");

      this.masterMatchUpAddendum1 = dataList;

      for (let i = 0; i < this.masterMatchUpAddendum1.length; i++) {

        this.masterMatchUpAddendum1[i]["blId"] = this.masterMatchUpAddendum1[i].refrenceId;

      }

      this.data = this.masterMatchUpAddendum1;

    })

  }

  // Getting Data for parent child mapup filter

  getAgreementTypeDataForMasterMatchup() {

    this.toolService.GetRelevantAgrrementType().subscribe(response => {

      if (response != null) {

        this.agreementTypeDatas = response

        this.agreementTypeDatas.forEach(data => {

          this.agreementTypeDatas1.push(data.agreementType);

          console.log(this.agreementTypeDatas1+" data is dropdown")

        })

      } else {

        console.log('Data not fount');

      }

    });

    this.agreementTypeDatas11 = this.agreementTypeDatas1;

   }

  parentRefrenceIdDropDown() {

    for (let i = 0; i <= 10000; i++) {

      this.parentReferenceDropDownData1[i] = 999 + i + "";

    }

    this.parentReferenceDropDownData1.push("  Parent not found");

    this.dpParams = {

      create: () => {

        this.elem = document.createElement("input");

        (this.elem as any).name = "parentReferenceId";

        return this.elem;

      },

      read: () => {

        return this.dropObj.value;

      },

      destroy: () => {

        this.dropObj.destroy();

      },

      write: (args: { rowData: object; column: any }) => {

        this.dropObj = new DropDownList({

          dataSource: this.parentReferenceDropDownData1,

          value: args.rowData[args.column.field],

          fields: { value: 'parentReferenceId', text: 'parentReferenceId' },

          allowFiltering: true,

          ignoreAccent: true,

          filterBarPlaceholder: 'e.g: 10001'

        });

        this.dropObj.appendTo(this.elem);

      }

    };

  }

  actionBegin(event) {

    if (event.requestType == "save") {

      let companyName = sessionStorage.getItem(COMPANY_NAME);

      let content = {

        "transationId": event.data.TransationId,

        "refrenceId": event.data.refrenceId,

        "companyName": companyName,

        "parentRefrenceId": event.data.parentReferenceId

      }

      this.masterTrackerCreatorService.updateParentRefrenceId(content).subscribe(response => {

        if (response == true) {

          for (let i = 0; i < this.data.length; i++) {

            if (this.data[i].refrenceId === event.data.refrenceId) {

              this.data[i].parentReferenceId = event.data.parentReferenceId;

              break;

            }

          }

        }

      })

    }

  }

}

[Deepak Ramakrishnan]

Hi Sunil, 

 

Greetings from Syncfusion support. 

 

We are currently validating your requirement with the provided sample . We will update the possible details in two business days (5^th,October 2021). 

 

Thanks, 

Deepak R. 

[sunil]

Hi,

Kindly reply as soon as early  Possible.

Thanks With Regards

Sunil Suryawanshi

[Deepak Ramakrishnan]

Hi Sunil, 

 

We deeply regret for the inconvenience caused. 

 

We have validated your requirement with provided details and found that that dynamic data get populated in multiselect in our end . 

Also we have attached sample for your reference with required scenerio .

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

 

Also we request you to try the following suggestion  

 

1.Please check the datasource mapped to the component contains value before it get assigned to the multiselect component 

2.If you are using remote data kindly use actionComplete event to assign datasource to the component , it will trigger once the data fecthed from the server successfully. 

 

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

 

3.Also upgrade your verson to the latest (19.3.44) and check whether the issue get reproduced or not. 

 

If you still facing the issue after the above suggestion kindly provide the following details to proceed further in our end 

 

1.Simple runnable sample or modify the provided sample as per your requirement . 

2.Video demonstration which reproduces the issue. 

3.If any console errors occurred when populating the data to the multiselect. 

4.If any specific replication procedure followed to reproduce the issue. 

 

The above details will help us to analyse and provide you the better solution. 

 

Thanks, 

Deepak R.