This is a migrated thread and some comments may be shown as answers.

OnMouseOver ComboBox

1 Answer 110 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
maha
Top achievements
Rank 1
maha asked on 03 Aug 2010, 02:33 PM
How to make radcomboBox open dropdownlist on mouseover and close the list when mouse is out the combobox dropdownlist?
I did the following :
<script type="text/javascript">
  
    function ToggleDropDown() {
        var combo = $find("<%= RadComboBoxSearch.ClientID %>");
        combo.showDropDown();
    }
       function closeDropDown() {
        var combo = $find("<%= RadComboBoxSearch.ClientID %>");
         combo.hideDropDown();
     }
      
  
  
</script>
and in code behind

RadComboBoxSearch.Attributes.Add(

"onmouseover", "ToggleDropDown();")

 


RadComboBoxSearch.Attributes.Add(

"onmouseut", "CloseDropDown();")

but by doing that when mouse is over the combo the list opens but when i go with mouse over the list it closes without being able to select anything.I need to close the combolist when mouse is out the combolist and not out the combo itself

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Simon
Telerik team
answered on 05 Aug 2010, 02:59 PM
Hello maha,

This is a bit tricky requirement. Please try this implementation:
<telerik:RadComboBox runat="server" ID="lstFoodStorage" OnClientLoad="onLoad">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="FoodStorage" />
        <telerik:RadComboBoxItem runat="server" Text="Freezer" />
        <telerik:RadComboBoxItem runat="server" Text="Fridge" />
        <telerik:RadComboBoxItem runat="server" Text="Microwave" />
        <telerik:RadComboBoxItem runat="server" Text="OnTheGo" />
        <telerik:RadComboBoxItem CssClass="rcbitemlast" runat="server" Text="Pantry" />
    </Items>
</telerik:RadComboBox>
<script type="text/javascript" language="javascript">
    function onLoad(sender) {
        var div = sender.get_element();
 
        $telerik.$(div).bind('mouseenter', function () {
            if (!sender.get_dropDownVisible())
                sender.showDropDown();
        });
 
 
        $telerik.$(".RadComboBoxDropDown").mouseleave(function (e) {
            hideDropDown("#" + sender.get_id(), sender, e);
        });
 
 
        $telerik.$(div).mouseleave(function (e) {
            hideDropDown(".RadComboBoxDropDown", sender, e);
        });
 
    }
 
    function hideDropDown(selector, combo, e) {
        var tgt = e.relatedTarget;
        var parent = $telerik.$(selector)[0];
        var parents = $telerik.$(tgt).parents(selector);
 
        if (tgt != parent && parents.length == 0) {
            if (combo.get_dropDownVisible())
                combo.hideDropDown();
        }
    }
</script>

I hope this helps.

All the best,
Simon
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
ComboBox
Asked by
maha
Top achievements
Rank 1
Answers by
Simon
Telerik team
Share this question
or