Suspend execution until dialog closed

[Bob]

I'm trying to replace my javascript alert calls with calls to a custom kendo dialog.  The difference is that when a javascript alert is called, all javascript execution is suspended until the user clicks ok.  With kendo dialogs, execution continues even if the dialog is set to modal.  Is there a way to "wait" for the user to click ok before resuming execution of the rest of the javascript?  Having the call to the kendo dialog as the last line in the function isn't always an option.  Here is the dialog code:

@(Html.Kendo().Dialog()
    .Name("alertDialog")
    .Title("FastWeigh 10")
    .HtmlAttributes(new { @class = "kAlert"})
    .Width(400)
    .Modal(true)
    .Closable(true)
    .Visible(false)
    .Actions(actions =>
    {
        actions.Add().Text("OK").Primary(true);
    })
)

 

And the dialog call itself:

function kAlert(message) {
    var kDialog = $("#alertDialog").data("kendoDialog");
    kDialog.content("<div class='fwAlert'><span class='fa fa-info-circle'/><p class='alertText'>" + message + "</p></div>");
    return kDialog.open().result;
}

[Marin Bratanov]

Hi Bob,

The main difference between the browser prompts (window.alert(), window.confirm() and window.prompt()) and anything you can put together as a web component in the web page is that the browser prompts block the execution thread. The stop all rendering and processing on the page while they are active. This is impossible with JavaScript, as it would be a huge security/performance issue for end users.

Thus, the approach to using a JavaScript-based confirmation is to split the logic into two parts, and execute the one that requires confirmation in the callback of the custom dialog.

Here's a basic example that showcases how things are done with both types of dialogs:

@(Html.Kendo().Dialog()
        .Name("alertDialog")
        .Title("FastWeigh 10")
        .HtmlAttributes(new { @class = "kAlert" })
        .Width(400)
        .Modal(true)
        .Closable(true)
        .Visible(false)
        .Actions(actions =>
        {
            actions.Add().Text("OK").Primary(true).Action("continueWork");
        })
)

<button onclick="kAlert('sure?');">Kendo Dialog: do something that wants confirmation</button>

<button onclick="browserAlert('sure?');">Browser Dialog: do something that wants confirmation</button>

<script>
    function kAlert(message) {
        console.log("KENDO DIALOG: do the first part of the work up to the confirmation prompt");

        var kDialog = $("#alertDialog").data("kendoDialog");
        kDialog.content("<div class='fwAlert'><span class='fa fa-info-circle'/><p class='alertText'>" + message + "</p></div>");
        return kDialog.open().result;
    }

    //the same approach for splitting the actions will work with the other dialog types like confirm
    //if you only want to show a notification to the user and always execute the rest of the logic, you may instead use the onClose event
    function continueWork() {
        console.log("KENDO DIALOG: to the rest of the work");
    }

    function browserAlert(msg) {
        console.log("BROWSER DIALOG: do the first part of the work up to the confirmation prompt");
        alert(msg);
        console.log("BROWSER DIALOG: to the rest of the work");
    }
</script>

Regards,
Marin Bratanov
Progress Telerik