I am using jquery chosen property to style asp:Dropdownlist in my project.I am following existing project. In that the drop down is populated with below code.
Supporting jquery files:
<script type="text/javascript" src="../Scripts/jquery-3.4.1.min.js"></script>
<script src="../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../scripts/chosen.jquery.min.js" type="text/javascript"></script>
<link href="../styles/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/jquery-ui.js"></script>
Dropdown code at frontend:
<asp:DropDownList ID="dropdown" TabIndex="28" CssClass="chosen-default" AutoPostBack="true"
OnSelectedIndexChanged="dropdown_selectedIndexChanged" runat="server">
</asp:DropDownList>
dropdown populated at backend with table result:
dropdown.DataSource = objResult.Tables[6].DefaultView;
dropdown.DataTextField = objResult.Tables[6].Columns["Name"].ToString();
dropdown.DataValueField = objResult.Tables[6].Columns["Id"].ToString();
dropdown.DataBind();
And chosed function is used for this dropdown to style it.
$(function () {
$('#dropdown').chosen();
});
And the result is like this image. List is having Name followed by Id in breckets.
we are also following the same But only Name is getting displayed in the dropdown list. Id is not displayed. Please help.
Besides the fact, that you are loading jQuery in different version multiple times, you can simply build the string you want:
dropdown.DataTextField = $"{objResult.Tables[6].Columns["Name"].ToString()} ({objResult.Tables[6].Columns["Id"].ToString()})";
or to make it easier to read:
var name = objResult.Tables[6].Columns["Name"].ToString();
var id = objResult.Tables[6].Columns["Id"].ToString();
dropdown.DataTextField = $"{name} ({id})";