New to Kendo UI for jQuery? Download free 30-day trial

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 component 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
<button id="openButton">Open Dialog</button>

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

        width: 200,
        height: 200,
        title: "Dialog Title",
        visible: false

    var dialog = $("#dialog").data("kendoDialog");;


Unlike most components, 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