Prompt to save changes

[Francis]

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?

 

[Aleksandar]

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