How to prevent ajax toolkit DropDownExtender from closing on click?

Question

I have the code below to implement a dropdownlist with checkboxes. My problem is that every time i click a checkbox the dropdownlist closes and i need to reopen it to select more checkboxes. How do i make it so the dropdownlist dosn't close until i click off of it?

    <asp:Panel ID="pnl_Items" runat="server" BorderColor="Aqua" BorderWidth="1">
        <asp:CheckBoxList ID="cbl_Items" runat="server">
            <asp:ListItem Text="Item 1" />
            <asp:ListItem Text="Item 2" />
            <asp:ListItem Text="Item 3" />          
        </asp:CheckBoxList>
    </asp:Panel>

   <br />
    <asp:TextBox ID="tb_Items" runat="server"></asp:TextBox>
    <ajax:DropDownExtender  ID="TextBox1_DropDownExtender" 
                            runat="server" 
                            DynamicServicePath="" 
                            Enabled="True" 
                            DropDownControlID="pnl_Items" on 
                            TargetControlID="tb_Items">
    </ajax:DropDownExtender>

Answer 1

You will need to get the Ajax control toolkit source code and modify the DropDownExtender to behave the way you want it to. Each control has its own folder with all the files related to it's ability to function within.

Recompile, drop the new dll into your project.

Answer 2

I was able to get the desired behavior by adding the following javascript that I found on this post.

 var DDE;
 function pageLoad() 
 {
     DDE = $find('<%= TextBox1_DropDownExtender.ClientID %>');
     DDE._dropWrapperHoverBehavior_onhover();
     $get('<%= pnl_Items.ClientID %>').style.width = $get('<%= tb_Items.ClientID %>').clientWidth;


     if (DDE._dropDownControl) {
         $common.removeHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
     }
     DDE._dropDownControl$delegates = {
         click: Function.createDelegate(DDE, ShowMe),
         contextmenu: Function.createDelegate(DDE, DDE._dropDownControl_oncontextmenu)
     }
     $addHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
 }

 function ShowMe() {
     DDE._wasClicked = true;
 }

Answer 3

i prefer not altering AjaxControlToolkit. As follows:

$(document).ready(function() {
$('input[type=checkbox], label').click(function(e){
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation)e.stopPropagation();
});
});

change jquery selector to your checkboxes!