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

Need confirm box for MenuItemClick

3 Answers 228 Views
Menu
This is a migrated thread and some comments may be shown as answers.
drpcken
Top achievements
Rank 1
drpcken asked on 19 Feb 2009, 10:01 PM
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


3 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 20 Feb 2009, 07:19 AM
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.
0
drpcken
Top achievements
Rank 1
answered on 24 Feb 2009, 03:27 AM
Perfect! Thank you so much!!
0
Geoffrey
Top achievements
Rank 1
answered on 06 Feb 2014, 04:32 PM
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.
Tags
Menu
Asked by
drpcken
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
drpcken
Top achievements
Rank 1
Geoffrey
Top achievements
Rank 1
Share this question
or