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:

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.

11
Leave a Reply

avatar
11 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
9 Comment authors
Khaled KokahmikePramod GehlotStephen Berseytester Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Ryan
Guest
Ryan

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!

Ryan
Guest
Ryan

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.

Rajani
Guest
Rajani

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.

Ken Royall
Guest
Ken Royall

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.

tester
Guest
tester

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

Stephen Bersey
Guest
Stephen Bersey

Very smooth … done in minutes … not hours as other techniques are suggesting. Rockwell Slickness Rating: 10.0

Pramod Gehlot
Guest
Pramod Gehlot

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!

mike
Guest
mike

And if you whant to fire a server event when you click on the checkboxlist?

Khaled Kokah
Guest
Khaled Kokah

My friend, allow me to say: you are a genius. After hours of searching for a simple and efficient way to achive this, I find your way very easy and creative indeed. I wonder how come there's no built-in control for that really.

Brilliant job keep it up.