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

Use of itemTemplate with list of string values


Can someone give me an example of how to use the ItemTemplate in ejComboBox, when the DataSource is a list of string?
Which placeholder should I use for the value?

Kind regards,

3 Replies

PO Prince Oliver Syncfusion Team April 17, 2019 10:15 AM UTC

Hello Freddy, 

Greetings from Syncfusion support. 

Template is used in ComboBox to display multiple fields in inline as ComboBox items to get a multi column layout in popup. If dataSource is list of strings , then the corresponding string value will be directly displayed in ComboBox as there is no field mapping. Please refer to the following online demo example for further reference 

We have some clarifications like, in what case you require template option for simple list of strings? Whether you need to align items based on this template? Else your requirement is to apply styles for items based on template element?. Kindly share us clear details on your requirement, this will help us provide a solution. 


FR Freddy April 17, 2019 10:53 AM UTC

Hi Prince,

My goal is to add a delete link in each item, so it can be removed by clicking the new link; this can't be done with CSS alone.
I don't understand, why the itemtemplate should be limited to objects only. ItemTemplate is used for adding new html-nodes, not css formating (only).

Kind regards,

KR Keerthana Rajendran Syncfusion Team April 18, 2019 03:24 PM UTC

Hi Freddy,  
Sorry for the inconvenience.  
We suggest you to add delete icon for each item during open event for the first time and remove the item through select event by checking the close icon target. Please refer to the below given code 
<script type="text/javascript"> 
                              var empList = [ 'Kapil Sharma','David Linden','John Linden', "Harish Shree"]; var flag= true; 
        $(function () { 
                          dataSource: empList, 
                         width: '250px', 
                        placeholder: 'Select an employee', 
                       popupWidth: '250px', 
                       popupHeight: '300px', 
                      open: function(args) 
                   for (i=0;i< this.liCollections.length;i++) 
                               var span = document.createElement("span"); 
                               span.classList="e-icon e-close"; 
                                     console.log("close icon is clicked"); 
                                     // remove the item here based on your requirement. 
Please refer to the below given link 

Live Chat Icon For mobile
Up arrow icon