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
close icon

Add new item to listbox with a template

Hello,

I have the following code which upon an ajax save add the new saved item to a listbox.  Below is my code:
                    $('#inclusions').ejListBox("addItem", data.inclusionText);
                    var newInclusion = $('#inclusions li:last-child').find('.ename');
                    $(newInclusion).attr("id", data.newInclusionId);
                    $(newInclusion).attr('data-typevalue', 0);

My listbox has the following template:
@Html.EJ().ListBox("defaultInclExcl").Width("100%").Datasource(Model.DefaultEIList).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId").ID("Id")).AllowDrag(true).AllowDrop(false).Enabled(true).Template("<span class='e-icon eimg'></span><div class='ename' style='word-break:break-word' id=${Id} data-typevalue=${TypeOfInclusionId}> ${Label} </div>").ClientSideEvents(e => e.ItemDrag("GetIndex")).ClientSideEvents(e => e.ItemDragStop("validateDrag"))

The new item is being added correctly with the template, however, my previously added item of the listbox are getting the values  data-typevalue and id as undefined.
I have noticed that it is when the code hits the first line, that is the addItem, which is setting the two values to undefined.

Any help please?

Thanks,
Alis

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team August 19, 2019 12:32 PM UTC

Hi Alis, 
 
Good day to you. 
 
We have checked your query about the ListBox component, we were unable to reproduce this issue. we suggest you find the exact li element and then add the attributes. it will be working fine, Id and data-typevalue was added correctly please refer the below screenshot. 
 
 
 
 
kindly check the below sample, 
 
 
If you are facing any issues kindly modify this sample to reproduce the issue so that we can proceed further. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon