Closing a RadDropDownList on mouseleave

[Adi]

Hey guys,

I am in a situation where I need to close my RadDropDownLists on mouseleave.
The dropdowns are on my UserControl.ascx page along with some comboboxes.

I have referred your code for RadComboboxes and it works really fine. It closes the comboboxes on mouseleave. But when I call the same javascipt function for the DropDownLists on OnClientLoad it doesn't work.

Following is the code which I have referred:

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

The selector in $telerik.$(".RadComboBoxDropDown") does not recognize the RadDropDownLists. It is only for ComboBoxes.
I need to achieve the same thing for my dropdownlists as well.

Following is the code for my dropdownlist:

<telerik:RadDropDownList ID="RadDropDownAreaList" Visible="true" runat="server" Width="300px"
DropDownHeight="200px">
</telerik:RadDropDownList>
<asp:CompareValidator runat="server" ID="Comparevalidator1" ValueToCompare="- Select -"
Operator="NotEqual" ControlToValidate="RadDropDownAreaList" ErrorMessage="Required"                                       
ValidationGroup="e" />

[Shinu]

Hi,

Please have a look at the following code I tried to close the RadDropDownList on mouse leave.

JavaScript:

<script type="text/javascript" language="javascript">
    function onLoad(sender) {
        var div = sender.get_element();
        var div1 = sender.get_dropDownElement();
        $telerik.$(div).bind('mouseleave', function () {
            sender.closeDropDown()
        });
        $telerik.$(div1).bind('mouseenter', function () {
            sender.openDropDown()
        });
        $telerik.$(div1).bind('mouseleave', function () {
            sender.closeDropDown()
        });
    }
</script>

Thanks,
Shinu.

[Adi]

Thanks a lot Shinu!!

That is awesome....

var div1 = sender.get_dropDownElement();

In the above code how do we know that what is the proper name of the element we are looking for?

I mean to say get_dropDownElement() gets the dropdownlist. Do we have similar function to get the ComboBox too?

Code for combobox works fine. However, sometimes the comboboxes do not close immediately on mouseleave.

But the code you gave for RadDropDownlists is really nice. It closes the dropdown immediately on mouseleave.

Do you have anything for Comboboxes as well??

[Adi]

Thanks a lot Shinu!!
This is awesome....

var div1 = sender.get_dropDownElement();

If we look at the above code, how do we know that which function will fetch the proper element we need.

For instance, by  sender.get_dropDownElement(); we get the dropdownelements in that div. Do we have any such function to get ComboBoxes as well?

the code which I have for comboboxes works pretty well but sometimes the combobox doesn't close immediately  on mouseleave.

But the way you bind mouseleave for the dropdown, makes the dropdown close immediately on mouseleave.
Would you suggest something for comboboxes as well?

[Shinu]

Hi Adi,

I have tried the same code for RadComboBox which works fine at my end. If you want the RadComboBox drop-down to expand and collapse immediately, try setting its expand and collapse animation duration property along with your same code. Please have a look at the sample code snippet.

ASPX:

<telerik:RadComboBox runat="server" ID="lstFoodStorage" OnClientLoad="onLoad">
    <CollapseAnimation Duration="0" />
    <ExpandAnimation Duration="0" />
    <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 runat="server" Text="Pantry" />
    </Items>
</telerik:RadComboBox>

Also, the get_dropDownElement() method is specific to RadDropDownList and does not work with RadComboBox.

Thanks,
Shinu.

[Naree]

Hi Shinu,
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.

Regards,
Garivi

 

[Shinu]

Hi Garivi,

Please try the below JavaScript to set the Default Message after closing the DropDown.

JavaScript:

function onLoad(sender) {
    var div = sender.get_element();
    var div1 = sender.get_dropDownElement();
    $telerik.$(div1).bind('mouseleave', function () {
        sender.closeDropDown();
        sender.get_textElement().textContent = sender.get_defaultMessage();
    });
}

Let me know if you have any concern.
Thanks,
Shinu.

[Naree]

Hi Shinu,Thanks for your reply. I tried as per instructions I'm unable to solve the issue.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.


Regards,
Garivi

[Shinu]

Hi Garivi,

In order to achieve your scenario try to clear the selection of RadComboBox it will set the empty message.

JavaScript:

...
if (tgt != parent && parents.length == 0) {

   if (combo.get_dropDownVisible()) {

      combo.hideDropDown();

      combo.clearSelection();

   }

}
...

Thanks,
Shinu.

[Naree]

Hi Shinu,
I used the code snippet what ever you suggested. It's showing the empty text box but, Drop down is not giving chance(waiting) to select the value.I'm using the below specified code.
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();
                }
else{
combo.clearSelection();
}
            }

Please suggest me the solution.I'm eagerly waiting for your suggestion.

Regards,
G.NareshReddy.

[Shinu]

Hi Garivi,

Please do the following modification in your JavaScript which works fine at my end.

JavaScript:

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();
    }
    else {
        if (combo.get_selectedItem() == null) {
            combo.clearSelection();
        }
    }
}

Thanks,
Shinu.