OnMouseOver ComboBox

2 posts, 1 answers
  1. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 03 Aug 2010 Link to this post

    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

     

  2. Answer
    Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Aug 2010 Link to this post

    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
Back to Top