Prevent Combobox dropdown list from closing when selecting an item

[gary]

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>

[Princy]

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.

[gary]

Thanks Princy...That did the trick.

[Smiely]

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

[Sean]

This works great but how do I get it to close when clicking anywhere outside the combobox and not just on the get_imageDomElement

[Kate]

Hi Sean,

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

All the best,
Kate
the Telerik team

[Sean]

This throws an exception when calling hideDropDown - "get_domEvent().target is null or not an object".

[Kate]

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

[Sean]

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

[Sean]

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

[Kate]

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