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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Use of itemTemplate with list of string values

Thread ID:

Created:

Updated:

Platform:

Replies:

144063 Apr 16,2019 02:13 PM UTC Apr 18,2019 03:24 PM UTC jQuery 3
loading
Tags: ejComboBox
Freddy
Asked On April 16, 2019 02:13 PM UTC

Hello,

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

Prince Oliver [Syncfusion]
Replied On 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. 

Regards, 
Prince 


Freddy
Replied On 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,
Freddy

Keerthana Rajendran [Syncfusion]
Replied On 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 () { 
               $('#list').ejComboBox({ 
                          dataSource: empList, 
                         width: '250px', 
                        placeholder: 'Select an employee', 
                       popupWidth: '250px', 
                       popupHeight: '300px', 
                      open: function(args) 
                         { 
                         if(flag) 
                          { 
                   for (i=0;i< this.liCollections.length;i++) 
                        { 
                               var span = document.createElement("span"); 
                               span.classList="e-icon e-close"; 
                               this.liCollections[i].append(span); 
                       } 
                                flag=false;  
                   } 
               }, 
               select:function(args) 
                        { 
                               if(args.e.target.classList.contains("e-close")) 
                                    { 
                                     console.log("close icon is clicked"); 
                                     // remove the item here based on your requirement. 
                                    } 
                                
                               } 
            }); 
        }); 
                               
                
    </script> 
 
Please refer to the below given link 
 
 
Regards, 
Keerthana. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon