How to make Dropdownlist have multiple checkboxes? - asp.net

Question

I have an aspx page and within the page I have a dropdownlist. On pageload, I add some choices to the dropdownlist. But I want to be able to select more than one option from this list when I click the dropdownlist, like a window which opens below of it and has a checkboxlist with the same choices.
How can I add multiple checkboxes to the dropdownlist, or make a checkboxlist in this manner? Should I use JQuery?
Thanks in advance.

Answer 1

For MultiCheckbox Dropdown in Asp.net , Use the following code enter image description here
First refer the ajaxtoolkit assembply in file
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then add Script Manager
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
</asp:ScriptManager>
Use the following Html Code
<asp:TextBox ID="txtClient" placeholder="Select Clients" runat="server" CssClass="txtbox" ReadOnly="true" Height="28px" Width="250px" Style="margin-bottom: auto; text-align: center; background-color: White; cursor: pointer; border-color: black; margin: 1px;"></asp:TextBox>
<asp:Panel ID="PnlClientlist" runat="server" CssClass="PnlDesign" Style="">
<asp:CheckBox ID="cbAll" runat="server" Text="Select All" BackColor="Aqua" onclick="CheckAll();" />
<asp:CheckBoxList ID="drpClients" runat="server" onclick="UnCheckAll();">
</asp:CheckBoxList>
</asp:Panel>
<cc1:PopupControlExtender ID="PceSelectClient" runat="server" TargetControlID="txtClient"
PopupControlID="PnlClientlist" Position="Bottom">
</cc1:PopupControlExtender>
Add the above reference in cocde
Use Css and JS:
function CheckAll() {
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ($('#' + '<%=cbAll.ClientID %>').prop('checked') == true) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', true);
}
}
else {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if (('#' + '<%=drpClients.ClientID %>' + '_' + i).disabled != true)
$('#' + '<%=drpClients.ClientID %>' + '_' + i + ':checkbox').prop('checked', false);
}
}
}
}
function UnCheckAll() {
var flag = 0;
var count = 0;
$('#' + '<%=drpClients.ClientID %>' + ' input:checkbox').each(function () {
count = count + 1;
});
for (i = 0; i < count; i++) {
if ('#' + '<%=drpClients.ClientID %>' + '_' + i) {
if ($('#' + '<%=drpClients.ClientID %>' + '_' + i).prop('checked') == true) {
flag = flag + 1;
}
}
}
if (flag == count)
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', true);
else
$('#' + '<%=cbAll.ClientID %>' + ':checkbox').prop('checked', false);
}
.PnlDesign
{
border: solid 1px #000000;
height: 300px;
width: 330px;
overflow-y: scroll;
background-color: white;
font-size: 15px;
font-family: Arial;
width: 450px;
}
.txtbox
{
background-image: url(img/drpdwn.png);
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
cursor: hand;
background-size: 20px 30px;
}

Answer 2

Probably you have to implement a custom control.
Take a look: http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET

Answer 3

In My razor view it works please change to required aspx view
#Html.DropDownList("selectedclients", new SelectList(Model.ListClients, "ClientId", "FullName", 1), "---Select clients---", new { #class =multiple = "multiple", id = "clients" })
where ListClients is an IEnumerable list
also add jquery-1.4.4.min.js and jquery.multiSelect.js in view
and in load add
<script type="text/javascript">
$(document).ready(function () {
$("#clients").multiSelect({ oneOrMoreSelected: '*' });
});
</script>