Using set_cancel() To Cancel Navigation

4 posts, 1 answers
  1. Ken Cox
    Ken Cox avatar
    100 posts
    Member since:
    Oct 2002

    Posted 21 Mar 2010 Link to this post

    Hi folks,

    I'm trying to prompt users to save unsaved fields in pages. The page navigates away even when I call eventArgs.set_cancel(true); 

    The idea is that if you type something into the textbox and then click a menu item, you're prompted about the unsaved change.

    Could someone point out what I'm missing here? The complete code for the page is shown below.

    Thanks,

    Ken

    <%@ Page Language="VB" AutoEventWireup="false"  %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     
        <script type="text/javascript">  
            var isDirty = false;  
            var msg = 'This page has unsaved changes.\n\nClick OK to abandon the changes and leave the page.\n\nClick Cancel to stay on the page so you can save your changes.';  
     
            $(document).ready(function() {  
                $(':input').change(function() {  
                    if (!isDirty) {  
                        isDirty = true;  
                    }  
                });  
     
                //            window.onbeforeunload = function () {  
                //                if (isDirty) {  
                //                 confirm(msg);  
                //                }  
                //            };  
            });  
     
            function doNavigation(targetURL) {  
                if (isDirty == false) {  
                    window.location.href = targetURL;  
                }  
                else {  
                    if (confirm(msg) == false) {  
                        return false;  
                    }  
                    else {  
                        window.location.href = targetURL;  
                    }  
                }  
            }  
     
            function onClicking(sender, eventArgs) {  
                var item = eventArgs.get_item();  
                var navigateUrl = item.get_navigateUrl();  
                if (navigateUrl && navigateUrl != "#" && isDirty) {  
                    var proceed = confirm(msg);  
                    if (!proceed) {  
                        eventArgs.set_cancel(true);  
                        return false;  
                    }  
                }  
            }                 
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <div> 
            <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20" OnClientItemClicking="onClicking">  
                <Items> 
                    <telerik:RadMenuItem EnableViewState="false" runat="server" NavigateUrl="~/dashboard.aspx" 
                        Text="Dashboard" PostBack="False">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/scheduling.aspx" PostBack="False" 
                                Text="Scheduling" /> 
                        </Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem PostBack="False" runat="server" NavigateUrl="~/contacts.aspx" 
                        Text="Contacts" /> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem PostBack="False" runat="server" NavigateUrl="~/items.aspx" Text="Items">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/resetitems.aspx" PostBack="False" 
                                Text="Debug: Reset Items" /> 
                        </Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/sales.aspx" Text="Sales" PostBack="False" /> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/purchases.aspx" Text="Purchasing" 
                        PostBack="False" /> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem runat="server" Text="Production" NavigateUrl="~/workorders.aspx" 
                        PostBack="False" /> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/projects.aspx" Text="Projects" 
                        PostBack="False">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/files.aspx" PostBack="False" Text="Files" /> 
                        </Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/events.aspx" Text="Events" PostBack="False">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" NavigateUrl="~/scheduling.aspx" PostBack="False" 
                                Text="Scheduling" /> 
                        </Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem IsSeparator="true" /> 
                </Items> 
            </telerik:RadMenu> 
            <br /> 
            <br /> 
            <br /> 
            <telerik:RadTextBox ID="RadTextBox1" Runat="server">  
            </telerik:RadTextBox> 
        </div> 
        </form> 
    </body> 
    </html> 
     
  2. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 22 Mar 2010 Link to this post

    Hi Ken Cox,

    Please use the following code in your OnClicking method to cancel the navigation:

    eventArgs.get_domEvent().preventDefault();

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Piyush Bhatt
    Piyush Bhatt avatar
    166 posts
    Member since:
    Nov 2007

    Posted 14 Jun 2011 Link to this post

    this worked.

    This should be included in the online document here:
    http://demos.telerik.com/aspnet-ajax/menu/examples/programming/clientevents/defaultcs.aspx
    and in local document here:
    ms-help://telerik.aspnetajax.radcontrols.2010.Q1/telerik.aspnetajax.radmenu.2010.Q1/onclientitemclicking-client-side.html


  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 17 Jun 2011 Link to this post

    Hi Piyush,

    Thank you for your suggestion.

    We will make sure to include the necessary changes to our online demo.

    Regards,
    Kate
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top