Closing a RadDropDownList on mouseleave

11 posts, 0 answers
  1. Adi
    Adi avatar
    3 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adi
    Adi avatar
    3 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

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






  5. Adi
    Adi avatar
    3 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

    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?

  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Jun 2013 Link to this post

    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.
  7. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 25 Aug 2014 in reply to Shinu Link to this post

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

    Regards,
    Garivi

     

  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Aug 2014 in reply to Naree Link to this post

    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.
  9. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 25 Aug 2014 in reply to Shinu Link to this post

    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








  10. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Aug 2014 in reply to Naree Link to this post

    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.
  11. Naree
    Naree avatar
    10 posts
    Member since:
    Apr 2014

    Posted 26 Aug 2014 in reply to Shinu Link to this post

    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.
  12. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2014 in reply to Naree Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017