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. [Solved] Dell Laptop Cannot Power On

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

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

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

  3. How to Set up Visual Studio Code for Java Development in Ubuntu

    Visual Studio Code is the most popular open-source, cross-platform IDE for software developers and it…