Is there a way to count unsaved column cells in ASP.NET mvc telerik then create a pop up window when the user hasnt saved after 10 rows

Question

Currently I am trying to count the number of unsaved columns a user has edited so that a pop up window will remind them to save or periodically produce the pop up message again.

My problem is i cant seem to get it to work lol, I can create the pop up window and it loads on open or refresh but it doesnt open when i have over 10 like the code is asking. Infact I havent been able to get any console.logs to the console window to debug if its even working and frankly im looking for some help with solving

<script>


   
    
    function onClose() {
        //$("#showDialogBtn").fadeIn();
        
    }

    function onOpen() {
       // $("#showDialogBtn").fadeOut();
        
    }

    function showDialog() {
        /*
    The general idea here is that you count the total number of
    unsaved columns before you release the show dialog
    */
        $('#dialog').data("kendoDialog").open();
        
        var ucc; // create total unsaved column count
        var grid = $('#Grid').data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            (ucc += gridData[i].eTmfCompletenessComment);
        }
        if (ucc >= 10) {
            $('#dialog').data("kendoDialog").open();
            // $("#showDialogBtn").fadeOut();
        }
        else {
            kendoConsole.log(ucc)
        }
    
        
    }


    
</script>

Answer 1

This is how you would register unsaved changes and then alert if there are any

<script type="text/javascript">
    window.addEventListener("beforeunload", function (e) {
        var confirmationMessage = 'It looks like you have been editing something. '
            + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
</script>