OnMouseOver ComboBox

[maha]

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

 

[Simon]

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