Radcombobox doesn't close on clicking outside

4 posts, 0 answers
  1. Bhaskar
    Bhaskar avatar
    2 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    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.


  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 20 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bhaskar
    Bhaskar avatar
    2 posts
    Member since:
    Sep 2013

    Posted 20 Sep 2013 Link to this post

    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
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 25 Sep 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top