Need confirm box for MenuItemClick

4 posts, 1 answers
  1. drpcken
    drpcken avatar
    36 posts
    Member since:
    Feb 2007

    Posted 19 Feb 2009 Link to this post

    I have a menu with menuitems.   Each menuitem click even points to a server side method that determines which menuitem was clicked and does the appropriate code block.  I want to put a confirm dialog on the menus so that they have to confirm after they click any of the menuitems.  I can do this easily with any control by adding this to the onclick event :   onclick = "return myFunction()".

    I cannot get this to work for the life of me with the new rad menu.  Here's what I have so far:
    this is the javascript to bring up the dialog based on the item clicked:
            function onClick(sender, eventArgs) { 
                var item = eventArgs.get_item(); 
                if (item.get_value() != "Action") { 
                    switch (item.get_value()) 
                    { 
                        case "Export"
                            if (confirm("Are you sure you want to export the selected Employee's to Excel?") == true) { 
                                return true
                            } 
                            else { 
                                return false
                            } 
                             
                            break
                        case "Terminate"
                            return confirm("Are you sure you want to Terminate the selected Employee's?"); 
                            break
                         
                    } 
                } 
            } 
       
    I think everything is ok with the javascript.
    Here's the menu control:
    <telerik:RadMenu ID="RadMenu1" Width="100%" runat="server"  
                             Skin="Web20"  
                             OnClientItemClicked="onClick" 
                             onitemclick="RadMenu1_ItemClick"
                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                <Items> 
                    <telerik:RadMenuItem runat="server" PostBack="False" Text="Action"  
                        Value="Action" ImageUrl="~/images/cog.png"
                        <Items> 
                            <telerik:RadMenuItem runat="server" Text="Export Selected" Value="Export"
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" Text="Term Selected" Value="Terminate"
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" Text="Import from Excel" Value="Import"
                            </telerik:RadMenuItem> 
                        </Items> 
                    </telerik:RadMenuItem> 
                </Items> 
            </telerik:RadMenu> 

    Now with this, it does popup the confirm, but regardless if you hit OK or CANCEL it still runs the server method.  I tried changing OnClientItemClicked = "return onClick():" but when i render the page it says Syntax Error.

    Can someone please help me solve this?  I'm assuming I'm missing something very simple


  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Feb 2009 Link to this post

    Hello,

    The OnClientItemClicking client-side event occurs when the user clicks on a menu item, before the menu responds to the mouse click. Hook the onClick() function to the OnClientItemClicking event of RadMenu instead of OnClientClicked, so that it is possible to cancel the click event by using set_cancel() method. Try the following code.

    JavaScript:
    <script type="text/javascript">  
    function onClick(sender, eventArgs)  
    {   
        var item = eventArgs.get_item();   
        if (item.get_value() != "Action")  
        {   
            switch (item.get_value())   
            {   
                case "Export":   
                    if (!confirm("Are you sure you want to export the selected Employee's to Excel?"))  
                    {  
                        eventArgs.set_cancel(true);   
                    }      
                    break;   
                case "Terminate":   
                    if(!confirm("Are you sure you want to Terminate the selected Employee's?"))  
                    {  
                        eventArgs.set_cancel(true);  
                    }  
            }  
        }   
    }   
    </script> 

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. drpcken
    drpcken avatar
    36 posts
    Member since:
    Feb 2007

    Posted 23 Feb 2009 Link to this post

    Perfect! Thank you so much!!
  5. Geoffrey
    Geoffrey avatar
    1 posts
    Member since:
    Feb 2014

    Posted 06 Feb 2014 in reply to Princy Link to this post

    You could add a modal popup extender with a panel, and put 'Confirm', 'Cancel' buttons on it.
    Make the targetControl a button with display:none in its style.
    Handle the menu click and for the particular menuitem call the mpe.show() method.
    btnOK then calls whatever you want done,but leave btnCancel without an OnClick handler.
Back to Top