<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> |
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;
} |