Navigate
X

How to build a multiple select DropDownList in ASP.NET

In this article, I will show you how to use AJAX PopupControlExtender to build a multiple select DropDownList as this:

Firstly, we need an image captured from a standard drop down list as this:

 

I will use this image as the drop down list instead of the built-in ASP:DropDownList control, the reason is that when a drop down list is clicked, its own selections will be displayed and will overlap with the check box list. The following screen shot should explain this issue clearly:

Secondly, let’s add the drop down list image, a CheckBoxList, and an AJAX PopupControlExtender to a page.

Code Snippet
  1. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  2.     <ContentTemplate>
  3.         <!– the style for divDDL will load
  4.              the drop drop list image as background.
  5.         –>
  6.         <div id="divDDL" class="divDDL" runat="server">
  7.         Please Select…
  8.        </div>
  9.        <asp:Panel ID="pnlCustomers" runat="server" CssClass="MultipleSelectionDDL">
  10.             <asp:CheckBoxList ID="cblCustomerList" runat="server" onclick="readCheckBoxList()" >
  11.                 <asp:ListItem>Customer One</asp:ListItem>
  12.                 <asp:ListItem>Customer Two</asp:ListItem>
  13.                 <asp:ListItem>Customer Three</asp:ListItem>
  14.                 <asp:ListItem>Customer Four</asp:ListItem>
  15.                 <asp:ListItem>Customer Five</asp:ListItem>
  16.                 <asp:ListItem>Customer Six</asp:ListItem>
  17.                 <asp:ListItem>Customer Seven</asp:ListItem>
  18.             </asp:CheckBoxList>
  19.         </asp:Panel>
  20.         <br />
  21.         <cc1:PopupControlExtender ID="pceSelections" runat="server" TargetControlID="divDDL"
  22.                PopupControlID="pnlCustomers" Position="Bottom" OffsetY="-16" >
  23.         </cc1:PopupControlExtender>
  24.     </ContentTemplate>
  25. </asp:UpdatePanel>

I use <div> tag with a style to load the drop down list image as background instead of adding the image directly, because I need “Please Select…” to show up on top of the image, so it looks like a real drop down list.

The AJAX PopupControlExtender is very straight forward and does not need much explanation. The CheckBoxList control is placed in a Panel control whose ID is assigned to the PopupControlExtender’s PopupControlID property.

You may notice there is a JavaScript function call attached to the CheckBoxList, this function is NOT a must for the above code to work. This JavaScript function is really an icing on the cake that makes the drop down list more “intelligent”: when user only selects one option from the CheckBoxList, the text “Please Select…” will change to the text of the selected option; if user selects more than one option, then the text “Please Select…” will change to “Multiple customers selected”. Here is the complete JavaScript functions:

Code Snippet
  1. <script type="text/javascript">
  2.     var hdnCount=0;
  3.     function readCheckBoxList()
  4.     {
  5.         getSelectionCount();
  6.         var cbl = document.getElementById('<%=cblCustomerList.ClientID%>');
  7.         var browser = navigator.appName;
  8.         var pos = 0;
  9.         if (browser.indexOf("Microsoft") >=0)
  10.         {
  11.             pos = 0;
  12.         }
  13.         else
  14.         {
  15.             pos = 1;
  16.         }
  17.         var tbody = cbl.childNodes[pos];
  18.         var length = tbody.childNodes.length – pos;
  19.                    
  20.         if (hdnCount > 1)
  21.         {
  22.             var div = document.getElementById('<%=divDDL.ClientID%>');
  23.             div.innerHTML = "Multiple customers selected";
  24.             return;
  25.  
  26.         }
  27.         else
  28.         {
  29.             for (i=0;i<length;i++)
  30.             {
  31.                 var td = tbody.childNodes[i].childNodes[pos];
  32.                 var chk = td.childNodes[0];
  33.                 if (chk.checked)
  34.                 {
  35.                     var div = document.getElementById('<%=divDDL.ClientID%>');
  36.                     div.innerHTML = chk.nextSibling.innerHTML;
  37.                 }
  38.             }
  39.                 
  40.         }
  41.     }
  42.     function getSelectionCount()
  43.     {
  44.         var cbl = document.getElementById('<%=cblCustomerList.ClientID%>');
  45.         var browser = navigator.appName;
  46.         var pos = 0;
  47.         if (browser.indexOf("Microsoft") >=0)
  48.         {
  49.             pos = 0;
  50.         }
  51.         else
  52.         {
  53.             pos = 1;
  54.         }
  55.         var tbody = cbl.childNodes[pos];
  56.         var length = tbody.childNodes.length – pos;
  57.         hdnCount = 0;
  58.         for (i=0;i<length;i++)
  59.         {
  60.             var td = tbody.childNodes[i].childNodes[pos];
  61.             var chk = td.childNodes[0];
  62.             if (chk.checked)
  63.             {
  64.                 hdnCount++;
  65.             }
  66.         }
  67.     }
  68. </script>

Here is the styles I used, in case you want to give it a try:

Code Snippet
  1. .MultipleSelectionDDL
  2. {
  3.     border: solid 1px #000000;
  4.     height: 100px;
  5.     width: 331px;
  6.     overflow-y: scroll;
  7.     background-color: #f0f8ff;
  8.     font-size: 11px;
  9.     font-family: Calibri, Arial, Helvetica;
  10.     line-height:normal;
  11. }
  12. .divDDL
  13. {
  14.     padding-top:2px;
  15.     padding-left:5px;
  16.     width:335px;
  17.     height:30px;
  18.     background-image: url(images/DropDownList.png);
  19.     background-position:-1px -2px;
  20.     background-repeat:no-repeat;
  21.     font-size:11px;
  22.     font-family:Calibri, Arial, Helvetica;
  23.     
  24. }

I will be very glad to know if it is helpful to you.

3 1 vote
Article Rating
Tags: AJAX PopupControlExtender sampleASP.NET DropDownList Multiple SelectMultiple select drop down list
Jeffrey:
Related Post
  1. [Fixed] Error Code 0x851A001A When Installing SQL Server on Window 11

    If you try to install MS SQL Server or LocalDB on a Windows 11 computer,…

  2. [Solved] Dell Laptop Cannot Power On

    Have you had the problem that suddenly your Dell laptop is not able to turn…

  3. [Fixed] ThinkPad T450S touchpad not working in Linux Mint

    I have an old Lenovo ThinkPad T450S that is laying around and collecting dust, so…