Use of itemTemplate with list of string values

[Freddy]

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]

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 

Demo link: https://js.syncfusion.com/demos/web/#!/bootstrap/combobox/template  

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]

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]

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 

 

https://jsplayground.syncfusion.com/3nmxknvx  

 

Regards, 

Keerthana.