How to set Dropdownlist value by element Id not by ViewChild ??

[Tony]

Hi,

I want to set ejs-dropdownlist selected value by using html attribut 'id', not by ViewChild

because i want to set all form value (textbox, combobox, etc) based on my data response from backend.

i want to set by this method :

i have json like 

menuId = 1

 name =  "Football"

and i have html form like ""input id='name' "" and "" ejs-dropdownlist id='menuId' ""

i want set form value by using looping from my json, example :

for(let item in json){

$('#' + item).val(json[item]);

}

all work fine when i bind to html element, but i cant set value from syncfusion element by using attribute 'id'

help me please to set this forms

Regards,

Tony

[Vignesh Srinivasan]

Hi Tony, 

 

Greetings from Syncfusion support. 

 

We can set the value property by using ID in ngAfterViewInit method. Please find the code sample below. 

 

Code snippet : 

 

<div class="col-lg-8 control-section multiline"> 

    <div class="content-wrapper"> 

      <ejs-textbox 

        id="name" 

        placeholder="Enter your address" 

        required 

      ></ejs-textbox> 

      <ejs-dropdownlist 

        id="menuId" 

        #sample 

        [dataSource]="sportsData" 

        [fields]="fields" 

        [placeholder]="waterMark" 

        [popupHeight]="height" 

      ></ejs-dropdownlist> 

    </div> 

  </div> 

 

public json: object = { menuId: "1", name: "Football" }; 

  ngAfterViewInit(e: any): void { 

    for (let item in this.json) { 

      document.getElementById(item).ej2_instances[0].value = this.json[item]; 

    } 

} 

 

 

 

We have created the sample based on your scenario. Please find the sample here: 

 

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

 

Kindly check with the above sample. Please get back us if you need further assistance.  

   

Regards,  

Vignesh Srinivasan.  

[Jonas Czeslik]

Hi, I am currently having the same problem. I need to set values of syncfusion components (Dropdown, Checkbox, ...), but outside the range, where I could use ViewChild. So, I tried to do this with the document.getElementByID() method, but I am getting the error: 

Property 'ej2_instances' does not exist on type 'HTMLElement'.

Is there a way to avoid this? Do I have to cast the HTMLElement to something else

[Berly Christopher]

Hi Jonas Czeslik,  

   

Yes, we need to done type casting using as any type as mentioned in the below code example to get rid of the reported issue.  

   

ngAfterViewInit(e: any): void { 

  for (let item in this.json) { 

    (document.getElementById(item) as any).ej2_instances[0].value = this.json[ 

      item 

    ]; 

  } 

} 

   

   

Please find the modified sample from the below link.  

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

   

Regards,  

Berly B.C