<div class="control">
@Html.EJ().DropDownList("DropDownList").Width("100%").Datasource((IEnumerable<DDLfields>)ViewBag.datasource).Width("200").Template("<div class='ename'> ${text} </div><div class='cont'> ${color} </div>").WatermarkText("Select a Person")
</div> |
[HttpPost]
public ActionResult DropdownlistFeatures(string DropDownList1)
{
emp.Add(new DDLfields { text = "Erik Linden", id = "3", color = "Red" });
emp.Add(new DDLfields { text = "John Linden", id = "6", color = "Blue" });
emp.Add(new DDLfields { text = "Louis", id = "7", color = "Green" });
emp.Add(new DDLfields { text = "Lawrence", id = "8", color = "Yellow" });
ViewBag.datasource = emp;
//DropDownList1 is ID of DropDownList used in this example. You can get the selected items value in controller using the ID
string DropDownValue = DropDownList1;
string selectedColor,selectedtext,selectedid;
foreach( var listitem in emp)
{
if(listitem.text == DropDownValue) {
selectedColor = listitem.color;
selectedid = listitem.id;
selectedtext = listitem.text;
}
}
return View();
} |
function onselect(args) {
var obj = $('#DropDownList1').data("ejDropDownList");
for (i = 0; i < obj.model.dataSource.length; i++) {
if (obj.getSelectedValue() == obj.model.dataSource[i].text) {
console.log("Selected Item's Text - " + obj.model.dataSource[i].text);
console.log("selected Item's ID - " + obj.model.dataSource[i].id);
console.log("selected Item's Color - " + obj.model.dataSource[i].color);
}
}
} |