This is a migrated thread and some comments may be shown as answers.

Suspend execution until dialog closed

1 Answer 1148 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Iron
Bob asked on 12 Feb 2019, 05:04 PM

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;
}

1 Answer, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 13 Feb 2019, 05:02 PM
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
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.
Tags
Dialog
Asked by
Bob
Top achievements
Rank 1
Iron
Answers by
Marin Bratanov
Telerik team
Share this question
or