Prevent Combobox dropdown list from closing when selecting an item

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

    Posted 04 Nov 2010 Link to this post

    Hi,

    Let me be clearer:

    I have limited space in the application so I needed a way to perform some lookups using list boxes without hiding other controls on the page. So I decided to use a RadComboBox with dropdown. Inside the combobox I place a RadListBox that transfers selected item to a different listbox.

    my problem is that each time i select an item in the list box, the combobox closes, then I have to open it again to transfer the selected item to other list box. Of course it closes again and I have to repeat the process.

    Is there anyway I can check server side if the combo box is open and/or is there a way I can prevent the combobox from closing each time I select an item in the list box? 

    Thanks in advance....
    <telerik:RadComboBox ID="RadComboBoxStringInLookupValue" Runat="server" 
         Width="325px" EnableTextSelection="False" DropDownWidth="325px"  
        HighlightTemplatedItems="True" Visible="true" 
        CloseDropDownOnBlur="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" Enabled="True" 
                    OnClientSelectedIndexChanging="SetDropDownToOpen"
                    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>
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Nov 2010 Link to this post

    Hello Gray,
     In order to keep the dropdown open while changing the selection of the list box, a better approach is to try from the client side. Attach the OnClientDropDownClosing event to the RadComboBox and use the following code in the handler. 

    Javascript:
    function OnClientDropDownClosing(sender, args)
       {
           if (args.get_domEvent().target == sender.get_imageDomElement())
           {
               args.set_cancel(false);
           }
           else
           {
               args.set_cancel(true);
           }
       }

    Thanks,
    Princy.
  3. gary
    gary avatar
    14 posts
    Member since:
    Aug 2010

    Posted 05 Nov 2010 Link to this post

    Thanks Princy...That did the trick.
  4. Smiely
    Smiely avatar
    129 posts
    Member since:
    Nov 2010

    Posted 18 Feb 2011 Link to this post

    Hey Princy.... help me too....

    Similar problem, I have tree which loads on demand. So when I click a node ComboBox gets closed.

    OnClientDropDownClosing, StopProgration is not working for me.

    Please help.
    Smiely

  5. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 21 Feb 2013 Link to this post

    This works great but how do I get it to close when clicking anywhere outside the combobox and not just on the get_imageDomElement
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 22 Feb 2013 Link to this post

    Hi Sean,

    You can try using the OnClientBlur client-side event and close the dropdown. 

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 22 Feb 2013 Link to this post

    This throws an exception when calling hideDropDown - "get_domEvent().target is null or not an object".
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Feb 2013 Link to this post

    Hello Sean,

    I tested the scenario with the code below but I was able to prevent the dropdown from closing using the following code:

    Markup:
    <telerik:RadComboBox ID="RadComboBox1" runat="server"
               Width="250" OnClientBlur="OnClientBlur" Skin="Default"EnableScreenBoundaryDetection="false">
                   <Items>
                       <telerik:RadComboBoxItem Text="Apple" />
                       <telerik:RadComboBoxItem Text="Banana"  />
                       <telerik:RadComboBoxItem Text="Lemon" />
                       <telerik:RadComboBoxItem Text="Orange" />
                       <telerik:RadComboBoxItem Text="Strawberry" />
                       <telerik:RadComboBoxItem Text="Water melon" />
                       <telerik:RadComboBoxItem Text="Apple" />
                       <telerik:RadComboBoxItem Text="Banana"/>
                       <telerik:RadComboBoxItem Text="Lemon" />
                       <telerik:RadComboBoxItem Text="Orange" />
                       <telerik:RadComboBoxItem Text="Strawberry" />
                       <telerik:RadComboBoxItem Text="Water melon" />
                   </Items>
               </telerik:RadComboBox>

    javascript:
    function OnClientBlur(sender, args) {
                      args.set_cancel(true);                }

    Let me know if I am missing something in your scenario.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 27 Mar 2013 Link to this post

    This is working for me - My issue now is that when an item is selected in the combobox I use the client side hooks to add the selected item to a listbox on the page - using this javascript:

    function addItem(itemText, itemValue){
       selectedItemsRadListBox = $find("<%= rlbSelectedItems.ClientID %>");
       selectedItemsBox.trackChanges();
       var item = new Telerik.Web.UI.RadListBoxItem();
       item.set_text(itemText);
       item.set_value(itemValue);
       selectedItemsBox.get_items().add(item);
       item.scrollIntoView();
       selectedItemsBox.commitChanges();
       return false;
    }

    This works fine and if I immediately use the control on postback the values are available ... however if I switch to another RadTab (these controls are inside of a RadPageView/Tabs) or any other postback happens and switch back to this one - all of the items in the rlbSelectedItems listbox are gone/disappear and no longer available in the code behind
  10. Sean
    Sean avatar
    51 posts
    Member since:
    May 2008

    Posted 27 Mar 2013 Link to this post

    Also,

    After adding items from the combo to the listbox if I then click a checkbox with an autopostback a javascript 'undefined' exception is thrown
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 01 Apr 2013 Link to this post

    Hello Sean,

    Can you please open a support ticket where you can attach a very simplified runnable project that I can test locally and get a better idea of the particular scenario (along with your current implementation) that you are trying to achieve? Thus I will be able to help you in the most efficient way.  

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top