Opening drop down.

6 posts, 2 answers
  1. Freddy
    Freddy avatar
    25 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    Hi,

    How to open the drop down when mouse hovered as well as close it on mouse out?

    Thank you,
    Freddy.
  2.
  3. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2013 Link to this post

    Hi Freddy,

    Please have a look into the following code i tried at my end.

    ASPX:
    <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>

    JavaScript:
    <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>

    Thanks,
    Princy.
  5. Freddy
    Freddy avatar
    25 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    Thanks princy. I have another issue, the SelectedIndexChanged server side event does not fire when the DefaultItem is selected. How to resolve this?
  7. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2013 Link to this post

    Hi Freddy,

    This is not an issue but the default behavior of the RadComboBox. The SelectedIndexChanged event does not fire when the DefaultItem is selected.

    Thanks,
    Princy.
  8.
  9. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 25 Aug 2014 Link to this post

    Hi Princy,Code what ever you specified is working fine. I have small problem after mouse leave "EmptyMessage=&nbsp;Please select:" is not working. Can u please guide me how to display empty message after on mouse leave.I'm using the below specified code snippet.

     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();
                            sender.get_textElement().textContent = sender.get_defaultMessage();
                           
                        }
                    }
                } 




    can u please suggest how to solve it.


    Thanks & Regards,
    Garivi
  11. Nencho
    Admin
    Nencho avatar
    1880 posts

    Posted 28 Aug 2014 Link to this post

    Hello Garivi,

    In order to achieve the proper behavior when the dropdown is closed, you would need to manually trigger the blur event and reset the EmptyMessage. Please consider the following implementation for the hideDropDown function :

    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();
                            combo._raiseClientBlur()
                            combo.set_emptyMessage(combo.get_emptyMessage());
                        }
                    }
                }



    Regards,
    Nencho
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top