How to build a multiple select DropDownList in ASP.NET

Posted on by

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

MultipleSelectDropDownList

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

DropDownList 

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:

2010-01-08_161906

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.

10 thoughts on “How to build a multiple select DropDownList in ASP.NET”

  1. Wow! After many hours of searching and trying different things out I found this page. Wonderful! Does exactly what I need it to do without much coding, just my existing Ajax kit. I found many forums of people looking for something like this but no answers, only crazy controls that half work.  Well done!

    Reply ↓

  2. Quick fix on this.
    in the javascript function readCheckBoxList you need to move:
    var div = document.getElementById(‘<%=divDDL.ClientID%>’);
    outside of the if statement. Also it does help to add an else if in there:
    else if (hdnCount == 0) { div.innerHTML = “Please select”; }
     
    It’s a matter of personal preference, but I also found it useful to change the css around a bit. I changed the image to just a 18×18 down arrow and aligned it right, made the div background color white and set the height of it to 18 and it looks great.
     
    Again, thanks for the excellent post.

    Reply ↓

  3. @Ryan,

    Good suggestion. I actually updated the JavaScript code similar to what you suggested after I wrote this post, but I forgot to update this post. Thank you for the suggestion.

    Jeffrey

    Reply ↓

  4. after spending more time for searching  multiple selection control,i got this article and it help me to come out from my issue of how to select multiple item from control.Thanks a lot.

    Reply ↓

  6. This is really good but if you have other controls below this the list selection covers them up and I don't see a way of *not* displaying the list form.

    Reply ↓

  7. Sir thanks a lot i searched for this coding for many days but this article solved my problem in minutes thanks a lot

    Reply ↓

  9. Wow! After many hours of searching and trying different things out I found this page. Wonderful! Does exactly what I need it to do without much coding, just my existing Ajax kit. I found many forums of people looking for something like this but no answers, only crazy controls that half work.  Well done!

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>