Cannot read property 'template' of undefined

[Jose Luis Garcia]

Hi,

I've this code:

                <ejs-combobox #supportEngineerIdField id="supportEngineerId"

                              formControlName="supportEngineerId"

                              name="supportEngineerId"

                              [dataSource]="supportEngineers"

                              sortOrder="Ascending"

                              [autofill]="true"

                              [fields]="supportEngineerIdFields"

                              [ignoreAccent]="true"

                              floatLabelType="Auto"

                              placeholder="Ingeniero de Soporte"

                              [itemTemplate]="itemTemplate">

                  <ng-template #itemTemplate let-data>

                    <span>{{ data.firstName }} {{ data.lastName }}</span>

                  </ng-template>

                </ejs-combobox>

and when te page is rendered I received this error:

ERROR TypeError: Cannot read property 'template' of undefined

    at template.js:25

    at ej2-base.es2015.js:4381

    at Object.renderContentTemplate (ej2-lists.es2015.js:530)

    at FormBase.templateListItem (ej2-dropdowns.es2015.js:853)

    at FormBase.renderItems (ej2-dropdowns.es2015.js:832)

    at FormBase.<anonymous> (ej2-dropdowns.es2015.js:609)

    at FormBase.push.HJ9Y.ComponentBase.trigger (component-base.js:299)

    at FormBase.<anonymous> (ej2-dropdowns.es2015.js:607)

    at FormBase.push.HJ9Y.ComponentBase.trigger (component-base.js:299)

    at FormBase.setListData (ej2-dropdowns.es2015.js:572)

"@syncfusion/ej2-angular-dropdowns": "^18.2.58"

Angular 10.1.2

Any idea what's wrong?

Regards

Jose

[Sureshkumar P]

Hi Jose,  

 

Greetings from Syncfusion support. 

 

The reported issue is our known issue from our end in the 18.2.58 version. And we have fixed the issue in our latest release in the version 18.2.59, we have included the “DropDownList template throws error from list package”.  So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue in your end. 

 

Please find the release notes details from the below link.  

 

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/18.2.59/?type=all#listview   

 

Regards, 

Sureshkumar P 

 

[Jose Luis Garcia]

Hi Sureshkumar,

Thank you very much for your support.

Now it's working find without errors.

Now I've another little bug:

That's the code:

<div class="col">

          <ejs-combobox #customerField id="customer"

                        formControlName="customer"

                        name="customer"

                        [dataSource]="customers"

                        [allowCustom]="false"

                        [autofill]="true"

                        [fields]="customerFields"

                        [allowFiltering]="true"

                        [ignoreAccent]="true"

                        floatLabelType="Auto"

                        placeholder="Cliente"

                        (change)="onChangeCustomer()">

          </ejs-combobox>

        </div>

        <div class="col">

          <ejs-combobox #contactField id="contact"

                        formControlName="contact"

                        name="contact"

                        [dataSource]="contacts"

                        [allowCustom]="false"

                        [autofill]="true"

                        [fields]="contactFields"

                        [ignoreAccent]="true"

                        floatLabelType="Auto"

                        placeholder="Contacto">

          </ejs-combobox>

        </div>

and this is the onChangeCustomer function:

  public async onChangeCustomer(): Promise<void> {

    if (this.customerField.value === null) {

      this.contact.setValue(null);

    } else {

      this.loading = true;

      this.contacts = await this.e3mService.getContacts(this.customerField.value as string);

      this.contactField.refresh();

      this.contactField.focusIn();

      this.loading = false;

    }

  }

The problem is when I'm in contact field, the dropdown part appears but is not selectable. I only can write in the field but not select any option.

Any idea?

Regards

Jose

[Sureshkumar P]

Hi Jose, 

 

Thanks for your update. 

 

Based on your shared information, we suspect that you want to render the cascading combobox. We have rendered the cascading combobox component, but we cannot able to replicate the reported issue from our end.  

 

Please find the sample here: https://stackblitz.com/edit/angular-af2hyc-bykxr9?file=main.ts  

 

If, still you have facing the issue, then please replicate the reported issue in the above attached sample and update the sample with detailed issue replication procedure. That will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P