in Dropdownlist values not showing

[sunil]

While working with dropdownlist in syncfusion i am not getting values in dropdownlist kindly suggest solution.

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

        [dataSource]='dataSource' placeholder='Select Aggrement Type' popupHeight='200px' ngModel>

      </ejs-dropdownlist>

      </div>

   

getAgreementTypeDataForMasterMatchup() {

    this.documentService.  getAllDocuments().subscribe(response => {

      if (response != null) {

        this.agreementTypeDatas = response

        this.agreementTypeDatas.forEach(data => {

          this.agreementTypeDatas1.push(data.documentName);

         

       

        })

        // for(var i in this.agreementTypeDatas1)

        // {

        //   this.agreementTypeDatas112.push(this.agreementTypeDatas1[i])

         

        // }

        this.fieldsvalues = { dataSource: this.agreementTypeDatas1, text: "documentName", value: "companyId" };

   

       

      } else {

        console.log('Data not fount');

      }

    });

    this.agreementTypeDatas11 = this.agreementTypeDatas1;

      }

 

[Sureshkumar P]

Hi Sunil, 

 

Based on your attached code, you have loaded the datasource value inside the fields mapping variable. Which is the reason the data not loading in your component. We suggest you bind the data source outside the fields value as like below.  

 

Find the code example: 

[component.html] 

 <ejs-dropdownlist id="games" #sample formControlName="skillname" name="skillname" [dataSource]="sportsData" 

          [value]="value" [fields]="fields" [placeholder]="waterMark" [popupHeight]="height"></ejs-dropdownlist> 

 

 

[component.ts] 

 

 // define the JSON of data 

  public sportsData: Object[] = [ 

    { Id: 'Game1', Game: 'American Football' }, 

    { Id: 'Game2', Game: 'Badminton' }, 

    { Id: 'Game3', Game: 'Basketball' }, 

    { Id: 'Game4', Game: 'Cricket' }, 

    { Id: 'Game5', Game: 'Football' }, 

    { Id: 'Game6', Game: 'Golf' }, 

    { Id: 'Game7', Game: 'Hockey' }, 

    { Id: 'Game8', Game: 'Rugby' }, 

    { Id: 'Game9', Game: 'Snooker' }, 

    { Id: 'Game10', Game: 'Tennis' }, 

  ]; 

  // maps the appropriate column to fields property 

  public fields: Object = { 

    text: 'Game', 

    value: 'Id', 

  }; 

 

 

Find the sample here: https://stackblitz.com/edit/angular-majgws?file=app.component.ts  

Regards, 

Sureshkumar P 

[Maruko Agano]

Thanks for the reply.

[Sureshkumar P]

Maruko,

We are glad to know that the issue is resolved on your end. Please get back to us if you need further assistance on this.

Regards,

Sureshkumar P

[Maruko Agano]

I am searching for the sample for this code and thanks to you for sharing them with us. When I was looking for the sample online, I have found the https://easyreadernews.com/gambling-in-japanese-anime/ website link in which I have found an article on gambling in Japanese anime and I don't know about this before. I am a college student and I am making a project. For that I need help.

[Sureshkumar P]

Hi Maruko,

We are unclear regarding your requirements. Please explain the steps/replication procedure in detail to get a better understanding.

Regards,

Sureshkumar P