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

Chaging the bullet points of a listbox to an icon

I have a set of 2 listboxes with drag and drop enabled.  Below is my code for one listbox:

@Html.EJ().ListBox(inclusionId).Width("100%").Datasource(Model.Inclusions).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId").ID("Id")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true)

What I want to do is to be able to delete the elements from a listbox.  I want to add a span in front of the listbox elements having an icon (a bin icon) as class and upon clicking on this icon will do the necessary manipulations to delete the element from the listbox.
I tried adding to the listbox as below:

@Html.EJ().ListBox(inclusionId).Width("100%").Datasource(Model.Inclusions).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId").ID("Id")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true).Template("<span class='icon-delete'></span>")

However this is not doing the changes that I want.

Any idea of how I can do this?
Or is there any other way where I can delete an element from a listbox?
Thanks


3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team April 30, 2019 08:58 AM UTC

Hi Alis,  
 
Greetings from Syncfusion Support.  
 
Based on your requirement, we have rendered delete icon in front of list items using “Template” property. We suspect that template doesn’t work in your end due to wrong icon class name or it may not be positioned correctly through CSS. Or else, this may be due to the enablePersistence property set to true in your end which will maintain the previous state of ListBox from browser cache. So, kindly check by clearing cache or run this in an incognito window. Please refer to the below given code.  
 
            <div class="ctrllabel"> 
                @Html.EJ().ListBox("inclusionId").Width("100%").Datasource((IEnumerable<Inclusions>)ViewBag.inclusions).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId").ID("Id")).AllowDrag(true).AllowDrop(true).Enabled(true).Template("<span class='e-icon e-delete eimg'></span><div class='ename'> ${Label} </div>").EnablePersistence(true).ClientSideEvents(e => e.Select("onSelect")) 
            </div> 
    <script> 
        function onSelect(args) { 
            if (args.event.target.classList.contains("e-delete")) { //check whether delete icon is clicked 
                this.removeSelectedItems() //remove the selected item. 
            } 
        } 
    </script> 
    <style> 
        .eimg { 
            margin: 0; 
            padding: 8px 0px 3px 3px; 
            border: 0 none; 
            width: 20px; 
            float: left; 
        } 
 
        .ename { 
            padding: 3px 3px 1px 3px; 
        } 
    </style> 
</div> 
 
Controller: 
 
List<Inclusions> types = new List<Inclusions>(); 
        public ActionResult ListBoxFeatures() 
        { 
            types.Add(new Inclusions { id = "1", Label = "Pinpoint", TypeOfInclusionId = "a" }); 
            types.Add(new Inclusions { id = "2", Label = "Feather", TypeOfInclusionId = "b" }); 
            types.Add(new Inclusions { id = "3", Label = "Cavity", TypeOfInclusionId = "c" }); 
            types.Add(new Inclusions { id = "4", Label = "Chip", TypeOfInclusionId = "d" }); 
            types.Add(new Inclusions { id = "5", Label = "Needle", TypeOfInclusionId = "e" }); 
            types.Add(new Inclusions { id = "6", Label = "Knot", TypeOfInclusionId = "f" }); 
            types.Add(new Inclusions { id = "7", Label = "Cloud", TypeOfInclusionId = "g" }); 
            types.Add(new Inclusions { id = "8", Label = "Crystal", TypeOfInclusionId = "h" }); 
            ViewBag.inclusions = types; 
            return View(); 
        } 
public class Inclusions 
    { 
        public string id; 
 
        public string Label; 
 
        public string TypeOfInclusionId; 
 
    } 
 
You can check the target through select event and remove the selected item using removeSelectedItems() method of ListBox.  Now the ListBox will be rendered with icons as shown below.  
 
We have attached a sample for your reference which can be downloaded from the below given link 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 



AL Alis April 30, 2019 11:11 AM UTC

Hello Ashokkumar,

It is working fine.  Thanks for the help.

Regards,
Alisha


AB Ashokkumar Balasubramanian Syncfusion Team April 30, 2019 05:53 PM UTC

Hi Alis, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon