A Window displays content in a modal or non-modal HTML window. By default, a Window can be moved, resized, and closed. Its content can also be defined with either as static HTML or loaded dynamically via AJAX.

A Window can be initialized from virtually any DOM element. During initialization, the targeted content will automatically be wrapped in the div element of the Window.

Getting Started

Create a simple HTML element with the Window content

<div id="window">
    Content of the Window
</div>

Initialize the Window using a selector

$(document).ready(function() {
    $("#window").kendoWindow();
});

When a Window is initialized, it will automatically be displayed open near the location of the DOM element that was used to initialize the content.

Configuring Window Behaviors

A Window provides many configuration options that can be easily set during initialization. Among the properties that can be controlled:

Create a modal Window with all user actions enabled

$("#window").kendoWindow({
    actions: ["Refresh", "Maximize", "Minimize", "Close"],
    draggable: false,
    height: "300px",
    modal: true,
    resizable: false,
    title: "Modal Window",
    width: "500px"
});

The order of the values in the actions array determines the order in which the action buttons will be rendered in the title of a Window. The maximize action serves both as a button for expanding a Window to fill the screen and as a button to restore a Window to its previous size. The minimize action collapses a Window to its title.

Positioning and Opening a Window

In some scenarios, it is preferable to center a Window rather than open it near the HTML element used to define the content. It is also common to open a Window as the result of the action of a user rather than on the load event of a page. The Window API provides methods for handling these scenarios.

Centering a Window and opening on button click

<p id="window">
    Content of the Window
</p>
<button id="openButton">Open Window</button>

Initialize Window, center, and configure button click action

$(document).ready(function(){
    var window = $("#window").kendoWindow({
        height: "200px",
        title: "Centered Window",
        visible: false,
        width: "200px"
    }).data("kendoWindow");
});

$("#openButton").click(function(){
    var window = $("#window").data("kendoWindow");
    window.center();
    window.open();
});

Loading Window content via AJAX

A Window provides built-in support for asynchronously loading content from a URL. This URL should return a HTML fragment that can be loaded in a Window content area.

Load Window content asynchronously

<div id="window"></div>

Initialize window and configure content loading

$(document).ready(function(){
    $("#window").kendoWindow({
        content: "html-content-snippet.html",
        title: "Async Window Content"
    });
});

Accessing an Existing Window

You can reference an existing Window instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing Window instance

var window = $("#window").data("kendoWindow");