Expand/Dropdown on Hover

[Levi]

Is there a way to cause the combo box to dropdown automatically when you hover the mouse over it?

[Princy]

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.

[Levi]

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?

[Levi]

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?

[Veselin Vasilev]

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.

[Levi]

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

[MBEN]

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

[Princy]

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.

[MBEN]

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.

[Princy]

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.

[MBEN]

the alert works if i specify declaratively. If i add the attribute programmatically it does not work.

[Princy]

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.