Prompt to save changes

2 posts, 0 answers
  1. Francis
    Francis avatar
    3 posts
    Member since:
    Jun 2019

    Posted 29 Sep Link to this post

    Hi,

    I have a .net core mvc app and using Kendo UI controls on several pages. i'm wondering if there is something i can place into the js at the root of the site that can attach to a control on any of the pages to prompt if a user leaves the page without saving. Or is this something that has to be done on each page? 

    Either way if it's possible would there be an example that i could see where it has been implemented?

     

  2. Missing user
    Missing user avatar

    Posted 01 Oct Link to this post

    Hi Francis,

    To achieve the desired functionality you can create a custom function for the beforeunload event, that is fired when the window, the document and its resources are about to be unloaded. That is whenever the user tries to leave the browser page. When the event occurs you can check whether there has been a change in the dataSource of the widgets on the current page.

    window.onbeforeunload = function (e) {
            var ev = e || window.event;
    
            var gridDS = $('#Grid').getKendoGrid().dataSource;
            if (dataSourceHasChanges(gridDS)) {
                ev.returnValue = '';
            };
        }
    
        function dataSourceHasChanges(ds){
            var dirty = false;
    
            $.each(ds._data, function (){
                if (this.dirty == true){
                    dirty = true;
                }
            });
    
            if (ds._destroyed.length > 0) dirty = true;
            return dirty;
        }

    Attached you'll find a sample solution, where I have modified on of the demos available on the demo page. Once the data is loaded go ahead and change a value in the grid. Whenever you try to leave the page or close the browser window an alert will be presented indicating that there are unsaved changes. Note that custom text is not supported by all browsers.

    I hope this helps. Let me know if you have further questions.

    Regards,
    Aleksandar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top