Prevent From Close Menu When Choose Date

[Daniel]

Hello,

I am working on a project with RadMenu.
Inside the RadMenu’s Drop-Down area there is a DatePicker and a Button.
When the user clicks the RadMenu, it opens a Drop-Down, and when the user clicks anywhere else the Drop-Down is closed.
When the user clicks on the DatePicker calendar to select a date, in an area outside of the Drop-Down, it closes.
How do I fix this problem? [see video]


Code:

function ExternalitemOpened(s, e) {
                    if ($telerik.isIE8) {
                        // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                        $telerik.$("li", e.get_item().get_element())
                            .each(function () { this.style.cssText = this.style.cssText; });
                    }
                }




                function External_MouseOver(sender, args) {
                    if (args.get_item().get_parent() == sender) {
                        sender.set_clicked(false);
                    }
                }


                function ExternalOnClientItemClicking(sender, args) {
                    if (args.get_item().get_isOpen() == true) {
                        args.set_cancel(true);
                        args.get_item().close();
                    }
                    else {
                        args.set_cancel(true);
                        args.get_item().open();
                    }
                }

 

<telerik:RadMenu ID="GridMenu_Save" runat="server" ClickToOpen="True" EnableShadows="True" OnClientItemOpened="ExternalitemOpened" OnClientItemClicking="ExternalOnClientItemClicking" OnClientMouseOut="External_MouseOver" Style="top: 0px; left: -2px; z-index: 100; height: 35px;" Skin="WebBlue">
           <Items>
               <telerik:RadMenuItem PostBack="true" Text="save" Value="Save" CssClass="btn  btn-primary btn-menu-grid-size">
                   <ContentTemplate>
                       <div id="Save_panel" class="GridMenu_panel">

                           <telerik:RadDatePicker ID="DatePicker_Save" runat="server"></telerik:RadDatePicker>
                           <br />
                           <telerik:RadButton ID="btn_Save" runat="server" Text="save" Skin="Web20" CssClass="btn_Sort" ></telerik:RadButton>
                           <br />
                       </div>
                   </ContentTemplate>
               </telerik:RadMenuItem>
               <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
           </Items>
       </telerik:RadMenu>

Thanks,
Daniel

[Aneliya Petkova]

Hi Daniel,

You can try to achieve this by canceling the OnClientItemClosing event:

<form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <div>
        <script type="text/javascript">

            function ExternalitemOpened(s, e) {
                if ($telerik.isIE8) {
                    // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                    $telerik.$("li", e.get_item().get_element())
                        .each(function () { this.style.cssText = this.style.cssText; });
                }
            }

            function OnClientItemClosing(sender, args) {
                    args.set_cancel(true);
            }

        </script>

        <telerik:RadMenu ID="GridMenu_Save" runat="server" ClickToOpen="True" EnableShadows="True" OnClientItemOpened="ExternalitemOpened" OnClientItemClosing="OnClientItemClosing" Style="top: 0px; left: -2px; z-index: 100; height: 35px;" Skin="WebBlue">
            <Items>
                <telerik:RadMenuItem PostBack="true" Text="save" Value="Save" CssClass="btn  btn-primary btn-menu-grid-size">
                    <ContentTemplate>
                        <div id="Save_panel" class="GridMenu_panel">

                            <telerik:RadDatePicker ID="DatePicker_Save" runat="server"></telerik:RadDatePicker>
                            <br />
                            <telerik:RadButton ID="btn_Save" runat="server" Text="save" Skin="Web20" CssClass="btn_Sort"></telerik:RadButton>
                            <br />
                        </div>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

    </div>
</form>

Please check this video showing how the menu behaves at my side using this approach.

Hope this will be helpful.

Regards,
Aneliya Petkova
Telerik

 

 

[Daniel]

Hi Aneliya Petkova,

Thank you very much for your reply.

Using this code, the user can’t close the Drop-Down menu, without clicking the Save button.
My project requirement is that the Drop-Down menu can be closed either by clicking outside the Drop-Down area or
by clicking on the parent control of the Drop-Down.

I would love to have a solution that meets these requirement.

Thank you,
Daniel.

[Aneliya Petkova]

Hi Daniel,

I modified the page and now it seems that my current solution meets your requirements. Please try it and let me know if this is what you are looking for.

<form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
    <div>
        <script type="text/javascript">
            var flag = false;

            function ExternalitemOpened(s, e) {
                if ($telerik.isIE8) {
                    // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                    $telerik.$("li", e.get_item().get_element())
                        .each(function () { this.style.cssText = this.style.cssText; });
                }
            }

            function OnClientItemClosing(sender, args) {
                args.set_cancel(flag);
            }

            function DatePickerOnPopupOpening(sender) {
                flag = true;
            }

            function DatePickerOnPopupClosing(sender) {
                setTimeout(function () { flag = false; }, 200);
            }
        </script>

        <telerik:RadMenu ID="GridMenu_Save" runat="server" ClickToOpen="True" EnableShadows="True" OnClientItemOpened="ExternalitemOpened" OnClientItemClosing="OnClientItemClosing" Style="top: 0px; left: -2px; z-index: 100; height: 35px;" Skin="WebBlue">
            <Items>
                <telerik:RadMenuItem PostBack="true" Text="save" Value="Save" CssClass="btn  btn-primary btn-menu-grid-size">
                    <ContentTemplate>
                        <div id="Save_panel" class="GridMenu_panel">

                            <telerik:RadDatePicker ID="DatePicker_Save" runat="server" ClientEvents-OnPopupOpening="DatePickerOnPopupOpening" ClientEvents-OnPopupClosing="DatePickerOnPopupClosing"></telerik:RadDatePicker>
                            <br />
                            <telerik:RadButton ID="btn_Save" runat="server" Text="save" Skin="Web20" CssClass="btn_Sort"></telerik:RadButton>
                            <br />
                        </div>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>
</form>

Regards,
Aneliya Petkova
Telerik

 

 

[Daniel]

Hi Aneliya Petkova,

Thank you for the solution you’ve provided!

Works great!

Thanks,
Daniel.