We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to apply item template to dynamically created dropdownlist?


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,

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

Thanks in advance,

1 Reply 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team March 24, 2023 04:16 PM UTC

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>',



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


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


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.



Marked as answer
Live Chat Icon For mobile
Up arrow icon