Opening drop down.

[Freddy]

Hi,

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

Thank you,
Freddy.

[Princy]

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.

[Freddy]

Thanks princy. I have another issue, the SelectedIndexChanged server side event does not fire when the DefaultItem is selected. How to resolve this?

[Princy]

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.

[Naree]

Hi Princy,Code what ever you specified is working fine. I have small problem after mouse leave "EmptyMessage= 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

[Nencho]

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