Basic Operations

You can control the opened and closed state of the Dialog as well as its destroy operation.

Opening and Closing

Usually, a Dialog is opened as a result of a user action rather than of the load event of the page. The Dialog API provides methods for handling such scenarios. Basically, the widget can be initialized as non-visible and can opened when needed.

The following example demonstrates how to open a Dialog on a button click.

<div id="dialog">
    Content of the Dialog
</div>
<button id="openButton">Open Dialog</button>

The following example demonstrates how to initialize a Dialog, center, and configure the button click action.

$(document).ready(function(){
    $("#dialog").kendoDialog({
        width: 200,
        height: 200,
        title: "Dialog Title",
        visible: false
    }).data("kendoDialog");
});

$("#openButton").click(function(){
    var dialog = $("#dialog").data("kendoDialog");
    dialog.open();
});

Destroying

Unlike most widgets, the Dialog is completely removed from the DOM when it is destroyed. This means that the element from which the Dialog was initialized no longer exists on the page. Therefore, you can create a new Dialog instance only from another element.

See Also

In this article
Not finding the help you need? Improve this article