CODEWITHSUNDEEP
c#htmlasp.nettelerik
Rainbolt
Rainbolt

Reputation: 3660

RadComboBox Doesn't Collapse on Click

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

Upvotes: 2

Views: 2079

Answers (1)

DanM7
DanM7

Reputation: 2246

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>

Upvotes: 1

Related Questions