We really needed as simplified a multi-select control as possible, and this example seems to fit the bill. I've tested it in IE7 and Firefox. Note that setting the style (display: none) within each panel containing the checkboxlist control is important for
correct function. If anyone can offer improvements, please post here.
David55
Member
46 Points
158 Posts
Multi-Select DropDown List using Ajaxtoolkit PopupControlExtender and Javascript
Jan 11, 2011 02:03 PM|LINK
We really needed as simplified a multi-select control as possible, and this example seems to fit the bill. I've tested it in IE7 and Firefox. Note that setting the style (display: none) within each panel containing the checkboxlist control is important for correct function. If anyone can offer improvements, please post here.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <style type="text/css"> .DropDownPanels { border: solid 1px #7F9DB9; height: 100px; background-color: white; } </style> <title>Multi-Select DropDown Lists</title> <script language="javascript" type="text/javascript"> function FindTheCBValues(tb) { var cbl, txtBx; switch(tb) { case 'tb1': txtBx = document.getElementById('<%=txtTargetTB1.ClientID%>'); cbl = document.getElementById('<%=cblToday1.ClientID%>'); break; case 'tb2': txtBx = document.getElementById('<=txtTargetTB2.ClientID>'); cbl = document.getElementById('<%=cblToday2.ClientID%>'); break; case 'tb3' : txtBx = document.getElementById('<%=txtTargetTB3.ClientID%>'); cbl = document.getElementById('<%=cblToday3.ClientID%>'); break; case 'tb4' : txtBx = document.getElementById('<%=txtTargetTB4.ClientID%>'); cbl = document.getElementById('<%=cblToday4.ClientID%>'); break; default: break; } if (txtBx != null && cbl != null && txtBx && cbl) { var text4TB = ''; var labels = cbl.getElementsByTagName('label'); var checkBoxes = cbl.getElementsByTagName('input'); // item lengths should be equal below - 1 label per checkbox var cbsLength = checkBoxes.length; var labelsLength = labels.length; if (cbsLength === labelsLength) { for(var i = 0; i < cbsLength; i++) { if (checkBoxes[i].type == "checkbox" && checkBoxes[i].checked) { txtBx.style.fontStyle = "normal"; txtBx.style.color = "Black"; text4TB += labels[i].innerHTML + ', '; } } } txtBx.value = text4TB.substring(0,text4TB.length - 2); txtBx.title = txtBx.value; if (txtBx.value.length == 0) { txtBx.style.fontStyle = "italic"; txtBx.style.color = "#990033"; txtBx.value = "Click and Select Below"; txtBx.title = ""; } } } </script> </head> <body> <form id="form1" runat="server"> <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" /> <div style="background-color: #7F9DB9; height: 400px; width: 500px; border: solid 1px #4875A8;"> <table> <tr><td> <asp:TextBox ID="txtTargetTB1" runat="server" Text="Click and Select Below" Font-Italic="true" Width="150px" ForeColor="#990033" ReadOnly="true" style="cursor: pointer" BackColor="#EBEBE4" /> <ajaxToolkit:PopupControlExtender ID="ajxPopUp" runat="server" TargetControlID="txtTargetTB1" PopupControlID="pHideShow" Position="Bottom" /> <asp:Panel ID="pHideShow" runat="server" CssClass="DropDownPanels" ScrollBars="Vertical" Width="154px" style="display: none"> <asp:UpdatePanel ID="panel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:CheckBoxList ID="cblToday1" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Table" AutoPostBack="false" onClick="javascript:FindTheCBValues('tb1')"> <asp:ListItem Text="CB_11" Value="CB_11" /> <asp:ListItem Text="CB_12" Value="CB_12" /> <asp:ListItem Text="CB_13" Value="CB_13" /> <asp:ListItem Text="CB_14" Value="CB_14" /> <asp:ListItem Text="CB_15" Value="CB_15" /> </asp:CheckBoxList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </td></tr> <tr><td><asp:TextBox ID="txtTargetTB2" runat="server" Text="Click and Select Below" Font-Italic="true" Width="150px" ForeColor="#990033" ReadOnly="true" style="cursor: pointer" BackColor="#EBEBE4" /> <ajaxToolkit:PopupControlExtender ID="ajxPopUp2" runat="server" TargetControlID="txtTargetTB2" position="Bottom" PopupControlID="pHideShow2" /> <asp:Panel ID="pHideShow2" runat="server" CssClass="DropDownPanels" ScrollBars="Vertical" Width="154px" style="display: none" ><asp:UpdatePanel ID="panel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:CheckBoxList ID="cblToday2" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Table" AutoPostBack="false" onClick="javascript:FindTheCBValues('tb2')"> <asp:ListItem Text="CB_21" Value="CB_21" /> <asp:ListItem Text="CB_22" Value="CB_22" /> <asp:ListItem Text="CB_23" Value="CB_23" /> <asp:ListItem Text="CB_24" Value="CB_24" /> <asp:ListItem Text="CB_25" Value="CB_25" /> </asp:CheckBoxList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </td></tr> <tr><td> <asp:TextBox ID="txtTargetTB3" runat="server" Text="Click and Select Below" Font-Italic="true" Width="150px" ForeColor="#990033" ReadOnly="true" style="cursor: pointer" BackColor="#EBEBE4" /> <ajaxToolkit:PopupControlExtender ID="ajxPopUp3" runat="server" TargetControlID="txtTargetTB3" position="Bottom" PopupControlID="pHideShow3" /> <asp:Panel ID="pHideShow3" runat="server" CssClass="DropDownPanels" ScrollBars="Vertical" Width="154px" style="display:none"> <asp:UpdatePanel ID="panel3" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:CheckBoxList ID="cblToday3" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Table" AutoPostBack="false" onClick="javascript:FindTheCBValues('tb3')"> <asp:ListItem Text="CB_31" Value="CB_31" /> <asp:ListItem Text="CB_32" Value="CB_32" /> <asp:ListItem Text="CB_33" Value="CB_33" /> <asp:ListItem Text="CB_34" Value="CB_34" /> <asp:ListItem Text="CB_35" Value="CB_35" /> </asp:CheckBoxList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </td></tr> <tr><td> <asp:TextBox ID="txtTargetTB4" runat="server" Text="Click and Select Below" Font-Italic="true" Width="150px" ForeColor="#990033" ReadOnly="true" style="cursor: pointer" BackColor="#EBEBE4" /> <ajaxToolkit:PopupControlExtender ID="ajxPopUp4" runat="server" TargetControlID="txtTargetTB4" position="Bottom" PopupControlID="pHideShow4" /> <asp:Panel ID="pHideShow4" runat="server" CssClass="DropDownPanels" ScrollBars="Vertical" Width="154px" style="display:none"> <asp:UpdatePanel ID="panel4" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:CheckBoxList ID="cblToday4" runat="server" RepeatColumns="1" RepeatDirection="Vertical" RepeatLayout="Table" AutoPostBack="false" onClick="javascript:FindTheCBValues('tb4')"> <asp:ListItem Text="CB_41" Value="CB_41" /> <asp:ListItem Text="CB_42" Value="CB_42" /> <asp:ListItem Text="CB_43" Value="CB_43" /> <asp:ListItem Text="CB_44" Value="CB_44" /> <asp:ListItem Text="CB_45" Value="CB_45" /> </asp:CheckBoxList> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> </td></tr> </table> </div> </form> </body> </html>David.