This is a migrated thread and some comments may be shown as answers.

Prevent From Close Menu When Choose Date

4 Answers 81 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 09 Nov 2014, 03:52 PM
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

4 Answers, 1 is accepted

Sort by
0
Aneliya Petkova
Telerik team
answered on 12 Nov 2014, 10:08 AM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 12 Nov 2014, 03:10 PM
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.
0
Accepted
Aneliya Petkova
Telerik team
answered on 13 Nov 2014, 11:17 AM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 13 Nov 2014, 12:42 PM
Hi Aneliya Petkova,

Thank you for the solution you’ve provided!

Works great!

Thanks,
Daniel.
Tags
Menu
Asked by
Daniel
Top achievements
Rank 1
Answers by
Aneliya Petkova
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or