Expand/Dropdown on Hover

12 posts, 0 answers
  1. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 25 Mar 2009 Link to this post

    Is there a way to cause the combo box to dropdown automatically when you hover the mouse over it?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Mar 2009 Link to this post

    Hello Levi,

    Try the code snippet shown below for achieving the functionality.

    ASPX:
    <telerik:radcombobox id="RadComboBox1" runat="server">  
    <Items> 
        <telerik:RadComboBoxItem Text="Item1" /> 
        <telerik:RadComboBoxItem Text="Item2" /> 
        <telerik:RadComboBoxItem Text="Item3" /> 
    </Items>          
    </telerik:radcombobox> 

    CS:
    protected void Page_Load(object sender, EventArgs e)     
    {             
        RadComboBox1.Attributes.Add("onmouseover""openDropdown()");     
        RadComboBox1.Attributes.Add("onmouseout""closeDropdown()");   //Add this if you want to close the dropdown when mouse out  

    JavaScript:
    <script type="text/javascript">  
    function openDropdown(control) // Opens the dropdown  
    {  
        var combo = $find("<%= RadComboBox1.ClientID %>");  
        combo.showDropDown();  
    }  
    function closeDropdown(control) //Function for clossing dropdown when mouseout  
    {  
        var combo = $find("<%= RadComboBox1.ClientID %>");  
        combo.hideDropDown();  
    }  
    </script> 

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 31 Mar 2009 Link to this post

    This works for the dropdown but the combo collapses once i move the cursor down to select an item. Any ideas of a different event I could use?
  5. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 31 Mar 2009 Link to this post

    Ok, so I found a good event to use (OnClientFocus="openDropdown") and just removed the auto-collapse on mouse out).

    My problem is i need a way to tell if the combo is already expanded. If so I want to abort doing the expand (so there isn't a flicker every time the mouse moves out of focus from the combo box).

    Can anyone tell me how to do this? How to check to see if a combobox is already expanded using client script?


  6. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 01 Apr 2009 Link to this post

    Hi Levi,

    You can use the get_dropDownVisible() method of RadComboBox client object.


    Best wishes,
    Veselin Vasilev
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  7. Levi
    Levi avatar
    134 posts
    Member since:
    Jul 2008

    Posted 01 Apr 2009 Link to this post

    Thanks for this. One other question. For some reason i have to call (var comboItem = combo.get_selectedItem();)  or it doesn't see my mouse over the combobox options. As soon as I remove this it stops working. Is this a bug? I have Q3 2008 i believe. I don't mind the workaround i am using but it is kind of horky. Thanks!


                var combo = $find("<%= RadComboBox1.ClientID %>");
                if (!bOpened) {
                    combo.toggleDropDown();
                }

                var comboItem = combo.get_selectedItem();


    I also hope you guys will consider adding an auto-expand property to your combobox in the future.
    Levi
  8. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 23 Apr 2014 in reply to Levi Link to this post

    Hi

    I am trying to do a dropdown on hover similar to this but I am getting an Object doesn't support property or method 'showDropDown' error. I am using the latest Telerik controls.

    One thing that's different in my scnario is I have the combobox inside a loginview.

    Below is the code I am using:

    RadComboBox rcLinks = (RadComboBox)this.loginViewQuickLinks.FindControl("rcLinks");
                rcLinks.Attributes.Add("combo", rcLinks.UniqueID);
                rcLinks.Attributes.Add("onmouseover", "openDropdown(this)");
     
    And in javascript:
     
                function openDropdown(sender, args) {
                    var combo = document.forms[0][sender.getAttribute("combo")];
                    combo.showDropDown();
                }


    I am able to find the combo but just can't use showDropDown(). Please help
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Apr 2014 in reply to MBEN Link to this post

    Hi MBEN,

    Please have a look into the sample code snippet which works fine at my end. Please provide your code if it doesn't help.

    ASPX:
    <telerik:RadComboBox ID="radcboOpenDropdown" runat="server">
        <Items>
            <telerik:RadComboBoxItem Text="Item1" />
            <telerik:RadComboBoxItem Text="Item2" />
            <telerik:RadComboBoxItem Text="Item3" />
        </Items>
    </telerik:RadComboBox>

    C#:
    radcboOpenDropdown.Attributes.Add("onmouseover", "openDropdown(this);");

    JavaScript:
    <script type="text/javascript">
        function openDropdown(ComboBox) {
            ComboBox.control.showDropDown();
        }
    </script>

    Thanks,
    Princy.
  10. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 24 Apr 2014 in reply to Princy Link to this post

    Thanks Princy, that worked.

    However, I am having the same issue as Levi. I tried the onclientfocus event but that does not show the combo dropdown.
    could you help me figure this out.
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Apr 2014 in reply to MBEN Link to this post

    Hi MBEN,

    Unfortunately I couldn't replicate the issue at my end. Please add the following code snippet and check whether it is working or not.

    ASPX:
    <telerik:RadComboBox ID="radcboOpenDropdown" runat="server" OnClientFocus="SelectedItem">
     ...
    </telerik:RadComboBox>

    JavaScript:
    function SelectedItem(sender, args) {
        alert(sender.get_selectedItem().get_text());
    }

    Let me know if you have any concern.
    Thanks,
    Princy.
  12. MBEN
    MBEN avatar
    159 posts
    Member since:
    Nov 2011

    Posted 25 Apr 2014 in reply to Princy Link to this post

    the alert works if i specify declaratively. If i add the attribute programmatically it does not work.
  13. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Apr 2014 in reply to MBEN Link to this post

    Hi MBEN,

    Please have a look into the sample code snippet which work fine at my end. Please try this code and let me know if you have any concern.

    ASPX:
    <telerik:RadComboBox ID="radcboOpenDropdown" runat="server">
        <Items>
            <telerik:RadComboBoxItem Text="Item1" />
            <telerik:RadComboBoxItem Text="Item2" />
            <telerik:RadComboBoxItem Text="Item3" />
        </Items>
    </telerik:RadComboBox>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        radcboOpenDropdown.Attributes.Add("onmouseover", "openDropdown(this);");
        radcboOpenDropdown.OnClientFocus = "SelectedItem";
    }

    JavaScript:
    <script type="text/javascript">
        function openDropdown(ComboBox) {
            ComboBox.control.showDropDown();
        }
        function SelectedItem(sender, args) {
            alert(sender.get_selectedItem().get_text());
        }
    </script>

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017