How to apply item template to dynamically created dropdownlist?

[Dimitris]

Hello,

I cannot find any example for the following scenario:

In code, I am creating a dropdownlist and adding it to a toolbar:

this.parametersObj = new DropDownList({
  dataSource: this.parameters,
  fields: { text: 'code' }, 
  width: '250px',                  
  allowFiltering: true,
  ...
});      
this.parametersObj.appendTo('#parameters');

How can I apply a ItemTemplate to the dropdownlist? The template should have access to the dataSource.

Thanks in advance,

[Vinothkumar Yuvaraj]

Hi Dimitris,

We are glad to inform you that you can add an itemTemplate to the DropDownList using the following code snippet:

this.dropDownListObj = new DropDownList({

  itemTemplate: '<div>' +'<div class="ename"> ${FirstName} </div></div>',

 });

this.dropDownListObj.appendTo('#dropDownList');

We also recommend that you refer to our sample application, available at the following link, for a better understanding of the implementation:

https://stackblitz.com/edit/angular-exczxy?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2FdataSource.json

Furthermore, you can check out our demo link for a live example of the DropDownList with templates:

https://ej2.syncfusion.com/demos/#/bootstrap5/drop-down-list/template.html

We hope that this solution meets your requirements. However, if you need further assistance, please feel free to share more information about your specific needs, and we will be happy to assist you further.

Regards,

Vinothkumar