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

Chaging the bullet points of a listbox to an icon

Thread ID:

Created:

Updated:

Platform:

Replies:

144306 Apr 30,2019 04:58 AM UTC Apr 30,2019 05:53 PM UTC ASP.NET MVC 3
loading
Tags: ListBox
Alis
Asked On April 30, 2019 04:58 AM UTC

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


Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Alis
Replied On April 30, 2019 11:11 AM UTC

Hello Ashokkumar,

It is working fine.  Thanks for the help.

Regards,
Alisha

Ashokkumar Balasubramanian [Syncfusion]
Replied On April 30, 2019 05:53 PM UTC

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


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