Autocomplete custom item template inside inplace editor

[Matt Richard]

Hello,

I have a inplace editor with autocomplete model. I want to set a custom item template.

If I set the model like this:

        inPlaceEditorModel = {

          dataSource: this.parentComponent.autoComplete.currentRecords,

          fields: this.parentComponent.autoComplete.itemFkFields,

          showPopupButton: true,

          highlight: true,

          allowCustom: false,

          filtering: (e) => this.parentComponent.onFiltering(e),

          headerTemplate: this.field.createForm? '<button class="e-btn e-icon-btn e-flat create-new-on-fly-btn" id="headerButton"><span class="material-icons icon-plus"></span><span>Ajouter un nouvel élément</span></button>' : '',

          itemTemplate: `<div class="autocomplete-list-item-title">{{ data.title }}</div>

        <div *ngIf="field.subProperties" class="autocomplete-list-item-details">

          <span *ngFor="let subProperty of field.subProperties; let i = index">

            <span>{{

              data[subProperty.name]

                | formatValue : subProperty.type : subProperty.lookupFamily

                | async

            }}</span>

            <span *ngIf="field.subProperties[i + 1]">&nbsp;&bull;&nbsp;</span>

          </span>

        </div>`,

          open: (args: any) => {

            const headerButton = document.getElementById('headerButton');

            if (headerButton) {

              const self = this;

              headerButton.addEventListener('click', (e: MouseEvent) => {

                self.parentComponent.openNewForm();

              });

            }

          }

        };

It doesn't compile the template and give this result:

How can I setup a custom template?

Thanks,

Regards,

Matt

[Yohapuja Selvakumaran]

Hi Matt Richart,

We sincerely apologize for the delay in getting back to you.

We would like to inform you that you can use the item template in the DropDownList component by utilizing the template support available with the In-Place Editor. To help you, we have created a sample for your reference:

Sample: 4i7xjpfh (forked) - StackBlitz

For further details about using templates with the In-Place Editor, please refer to our official documen-tation:

Documentation: https://ej2.syncfusion.com/angular/documentation/inplace-editor/integration 

If you encounter any further issues or have additional questions, please don't hesitate to let us know.

Regards,

Yohapuja S