RadComboBox Doesn't Collapse on Click

Question

When you click on a typical ComboBox, it expands. When you click it again, it collapse.

When you click on a RadComboBox, it expands. When you click it again, nothing happens. That is, unless you click on the arrow or actually make a selection.

I want my RadComboBoxes to collapse when they are clicked a second time, just like a regular ComboBox would. Since the RadComboBoxes are transformed into a whole mess of HTML with their own CSS styles, I'm not sure how to go about doing this.

Here is how I am declaring the control.

public static RadComboBox makeARadicalBox() {
    RadComboBox cmbo = new RadComboBox();
    cmbo.ID = "MyRadicalComboBox";

    List<string> listItems = getListItems();
    foreach (string s in listItems)
        cmbo.Items.Add(new RadComboBoxItem(s));

    cmbo.Skin = "myRadicalSkin";

    // TODO - Make the *entire* box clickable instead of just the little arrow

    return cmbo; 
}

Do you mean that when you click inside text entry portion of the box a second time, you want it to collapse? Please clarify where you click when you say "When you click on a RadComboBox". — DanM7, Jun 04 '14 at 20:04
I see what you mean. Based on this site http://demos.telerik.com/aspnet-ajax/combobox/examples/programming/clientevents/defaultcs.aspx, there is no event for when you click the header box. Closing it by reclicking it will need some sort of work around not directly provided by Telerik. — DanM7, Jun 04 '14 at 20:33

DanM7 · Accepted Answer · 2014-06-05T18:29:03.493

Got it. When you click the RadComboBox, if the drop-down is open then hide the drop-down, otherwise show the drop-down. The mouseup part is then so that it doesn't flicker (quickly open/close).

JavaScript:

<script type="text/javascript">

    function onLoad(sender) {
        var div = sender.get_element();

        $telerik.$(div).mousedown(function (e) {
            if (sender.get_dropDownVisible()) {
                sender.hideDropDown();
            }
            else {
                sender.showDropDown();
            }
        });

        $telerik.$(div).mouseup(function (e) {
            if (!sender.get_dropDownVisible()) {
                sender.hideDropDown();
            }
        });
    }

</script>

.aspx:

<telerik:RadComboBox runat="server" ID="RadComboBox1" 
ShowDropDownOnTextboxClick="false" 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 runat="server" Text="Pantry" />
    </Items>
</telerik:RadComboBox>

Since I was generating my combo boxes in code behind, I had to fiddle with the code a little, but your answer ultimately showed me the solution! I solved the flickering problem you mentioned with `cmbo.ShowDropDownOnTextboxClick = false;` and then instead of needing two events for mousedown and mouseup, I only needed one called click. Thank you *so* much! — Rainbolt, Jun 05 '14 at 19:12

RadComboBox Doesn't Collapse on Click

1 Answers1