How to implement a Multiple Select/Choose (MultiSelect) DropDownList with CheckBoxes in ASP.Net.

In this article I will explain how to implement a Multiple Select/Choose (MultiSelect) DropDownList with CheckBoxes in ASP.Net.

(Or)

Checkbox list in Dropdown using Asp.net Ajax PopupControlExtender control

We may have a requirement to select more than one value from dropdown list but we can’t select/choose the more than one value from asp.net dropdown list control.

It’s an asp.net Ajax control which is used to attach any control to display with popup window and we can add server or html controls to display in popup window. This Popupcontrolextender control needs to be placed inside the update panel as shown below in sample code. In this control there are three important properties we need to use to achieve this functionality such as TargetControlID, PopupControlID and Position

Below is the style CSS code for Ajax Popupcontrolextender .

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<style type="text/css">

        .PnlDesign {

            border: solid 1px #000000;

            height: 120px;

            width: 150px;

            overflow-y: scroll;

            background-color: White;

            font-size: 15px;

            font-family: Arial;

        }

        .txtbox {

            border-top-left-radius: 10px;

            border-top-right-radius: 10px;

            border-bottom-left-radius: 10px;

            border-bottom-right-radius: 10px;           

            background-position: right top;

            background-repeat: no-repeat;

            cursor: pointer;

            cursor: hand;

        }

    </style>

Below is the ASP.NET Design code for selecting the multiple values in Popup Extender.

<asp:TextBox ID="txtCustomer" Text="Select Customers" runat="server" CssClass="txtbox"

               Height="20px" Width="150px"></asp:TextBox>

    <asp:Panel ID="PnlCust" runat="server" CssClass="PnlDesign">

   <asp:CheckBoxList ID="cblCustomerList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="cblCustomerList_SelectedIndexChanged">

       </asp:CheckBoxList>

 </asp:Panel>

<br />

<ajax:PopupControlExtender ID="PceSelectCustomer" runat="server" TargetControlID="txtCustomer"  PopupControlID="PnlCust" Position="Bottom">

  </ajax:PopupControlExtender>

Below .aspx.cs code for binding data to checkbox list.

cblCustomerList.DataSource = dsGetCustomerInfo.Tables[0];

cblCustomerList.DataTextField = "CustomerName";

cblCustomerList.DataValueField = "CustomerId";

cblCustomerList.DataBind();

Out Put :