Prevent From Close Menu When Choose Date

5 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 09 Nov 2014 Link to this post

    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
  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 12 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 12 Nov 2014 in reply to Aneliya Petkova Link to this post

    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.
  5. Answer
    Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 13 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 13 Nov 2014 in reply to Aneliya Petkova Link to this post

    Hi Aneliya Petkova,

    Thank you for the solution you’ve provided!

    Works great!

    Thanks,
    Daniel.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017