Using Ajax RadComboBox will not remain closed when arrow selected

1 posts, 0 answers
  1. gary
    gary avatar
    14 posts
    Member since:
    Aug 2010

    Posted 10 Mar 2011 Link to this post

    Hi,

    I have a combox that only should close when the arrow is selected. To do this, I am using the OnClientDropDownClosing event. The code below does eactly what I want it to do, only close when arrow is selected. When the dropdown arrow is selected, the OnClientDropDownClosing is called, the dropdown closes, then the OnClientDropDownClosed is called and everything works fine.
      
    CONTROL:

    telerik:RadComboBox ID="RadComboBoxStringInLookupValue" Runat="server" Width="325px" AllowCustomText="True" 
        EmptyMessage="<%$ Resources:CommonUserMsg, EnterValueMsgResource %>" EnableTextSelection="False" 
        DropDownWidth="325px" HighlightTemplatedItems="True" Visible="true" OnClientDropDownClosing="OnClientDropDownClosing" 
        OnClientDropDownClosed="populateComboBoxEmptyMessage" CausesValidation="False" >
        <ItemTemplate>
            <ul>
             <li class="col1">
               <telerik:RadListBox ID="RadListBoxSource" runat="server" Height="125px" DataSourceID="ObjectDataSourceLookUpValues" 
                    DataTextField="Descr" DataValueField="Code" AllowTransfer="true" TransferToID="RadListBoxDestination" 
                    AllowTransferOnDoubleClick="True" SelectionMode="Multiple" OnClientSelectedIndexChanged="SetCanvasChanged" 
                    ondatabound="OnDataBound" onitemdatabound="OnItemsDataBound" >
                   <ButtonSettings ReorderButtons="Common"></ButtonSettings>
               </telerik:RadListBox
             </li>    
             <li class="col2">
                <telerik:RadListBox ID="RadListBoxDestination" runat="server" Height="125px"  SelectionMode="Multiple"
                   <ButtonSettings ReorderButtons="Common"></ButtonSettings>
                </telerik:RadListBox
             </li>                                 
            </ul>
          </ItemTemplate
          <Items>
              <telerik:RadComboBoxItem Text="" />
          </Items>           
    </telerik:RadComboBox>

    OnClientDropDownClosing Function

     

     

     

    function OnClientDropDownClosing(sender, args) {
         args.set_cancel(false);
         var target = args.get_domEvent().target;
      
         //cancel drop-down closing only when clicked inside and not on the arrow
         if (target && target != sender.get_imageDomElement() && (jQuery.contains(sender.get_element(), target) ||   
               jQuery.contains(sender.get_dropDownElement(), target)))
         {
                  args.set_cancel(true);
         }
    }
    This all worked; but then we added Ajax to the mix and it has stopped working. Now here what's happening.

    OnClientDropDownClosing is called everytime a click is made in the drop down and remains open like I want it to; then once the dropdown arrow is clicked, it calls OnClientDropDownClosing, closes the dropdown, then opens it again..Never Calling the OnClientDropDownClosed event, which I am guessing is because the dropdown opens again.

    Could it not be working because of the AJAX?

    Thanks,
    Gary

Back to Top