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

Opening drop down.

5 Answers 44 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Freddy
Top achievements
Rank 1
Freddy asked on 19 Mar 2013, 10:19 AM
Hi,

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

Thank you,
Freddy.

5 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 19 Mar 2013, 10:38 AM
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.
0
Freddy
Top achievements
Rank 1
answered on 19 Mar 2013, 04:49 PM
Thanks princy. I have another issue, the SelectedIndexChanged server side event does not fire when the DefaultItem is selected. How to resolve this?
0
Accepted
Princy
Top achievements
Rank 1
answered on 20 Mar 2013, 04:24 AM
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.
0
Naree
Top achievements
Rank 1
answered on 25 Aug 2014, 02:12 PM
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
0
Nencho
Telerik team
answered on 28 Aug 2014, 10:18 AM
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.

 
Tags
ComboBox
Asked by
Freddy
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Freddy
Top achievements
Rank 1
Naree
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or