Use of itemTemplate with list of string values

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

Reply | Reply with quote

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

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

Reply | Reply with quote

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

Reply | Reply with quote

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

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144063	Apr 16,2019 02:13 PM UTC	Apr 18,2019 03:24 PM UTC	jQuery	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US