Radcombobox doesn't close on clicking outside

[Bhaskar]

I have a radcombobox, Inside the radcombobox, i have a checkbox, datecontrol and a textbox. after the checkbox click and on selecting the date the dropdown closes automatically. I stopped this from happening with OnClientDropDownClosing event. (args.set_cancel(true)).

The problem now is the dropdown only closes on clicking the dropdown triangle, clicking any other place outside doesn't close the dropdown.

I even tried onclientBlur event, that event also fired on date selection only, and the dropdown remains open.

Any help is appreciated.

[Hristo Valyavicharski]

Hi Bhaskar,

Canceling the OnClientDropDownClosing event will always prevent drop-down from closing. Instead try to enable RadComboBox's DropDownAutoWidth property. It should prevent closing drop-down when checkbox is clicked.

Regards,
Hristo Valyavicharski
Telerik

[Bhaskar]

Hi Hristo,

Thanks you for the reply.
Enabling the DropDownAutoWidth didn't help.

My exact problem now is :
After entering all the details inside the radcombobox (i.e checkbox, date and text), the dropdown doesn't close when clicking outside, it only closes if i click on the dropdown arrow.

pls help.


Thank you
Bhaskar

[Hristo Valyavicharski]

Hi Bhaskar,

RadComboBox closes automatically, because the RadDatePicker is rendered out of the combobox. Actually it is rendered even out of the form. To make the combobox closing properly you will have to check whether is clicked outside the RadDatePicker or outside the combobox:

<script type="text/javascript">
    var canClose = false;

    function OnClientDropDownClosing(sender, args) {
        if (!canClose) {
            args.set_cancel(true);
            canClose = true;
        }
    }

    $(function () {
        $("body").click(function (e) {
            if ($(e.target).parents(".RadCalendarPopup.RadCalendarPopupShadows").size()) {
                canClose = true;
            }
            else {
                canClose = false;
            }
        });
    })
</script>
<telerik:RadComboBox ID="RadComboBox1" runat="server" DropDownAutoWidth="Enabled" OnClientDropDownClosing="OnClientDropDownClosing">
    <ItemTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" />
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
        <br />
    </ItemTemplate>
    <Items>
        <telerik:RadComboBoxItem Text="1" />
    </Items>
</telerik:RadComboBox>

Pay attention that this javascript will be attached for the click event of the body and it should have bigger height.

Regards,
Hristo Valyavicharski
Telerik