CODEWITHSUNDEEP
asp.net
Erdem Gundogdu
Erdem Gundogdu

Reputation: 297

How to make Dropdownlist have multiple checkboxes?

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.

Upvotes: 0

Views: 3973

Answers (3)

Mukul
Mukul

Reputation: 45

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

Upvotes: 1

Sreenath Plakkat
Sreenath Plakkat

Reputation: 1785

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>

Upvotes: 0

davioooh
davioooh

Reputation: 24706

Probably you have to implement a custom control.

Take a look: http://www.codeproject.com/Articles/18063/Multi-select-Dropdown-list-in-ASP-NET

Upvotes: 0

Related Questions