Window Overview
The Window displays content in a modal or non-modal HTML window.
By default, the user can move, resize, and close a Window. Its content can also be defined either as static HTML or dynamically loaded with AJAX.
The Window is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Basic Usage
The Window provides a set of default API configuration options which can be set during its initialization such as minimum and maximum height and width, user actions, title, dragging and resizing, initial position, pinned state, and so on.
The following example demonstrates how to create a modal Window with a predefined position and enable all user actions. The order of the values in the action 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 the Window to its title.
$("#window").kendoWindow({
actions: ["Custom", "Pin", "Refresh", "Maximize", "Minimize", "Close"],
draggable: false,
height: "300px",
modal: true,
pinned: false,
position: {
top: 100,
left: 100
},
resizable: false,
title: "Modal Window",
width: "500px"
});
Getting Started
- Initializing from Any DOM Element
- Initializing from body
- Accessing the Window Elements
- Destroying the Window
- Creating Windows from the Same ID
Initializing from Any DOM Element
To initialize the Window, you can use any of the DOM elements. During the initialization, the targeted content will be automatically wrapped in a div element. The following example demonstrates how to create the Window from an HTML element and initialize it by using a jQuery selector.
<div id="window">
Content of the Window
</div>
$(document).ready(function() {
$("#window").kendoWindow();
});
Initializing from body
By default, the Window is created as a child of the <body> element. When a Window initializes, it is automatically displayed in its open state near the location of the DOM element that was used to initialize its content. To control this behavior, use the appendTo setting.
The following example demonstrates a possible markup before the Window is initialized.
<body>
<div id="container1">
<div id="window">
Content of the Window
</div>
...
</div>
<div id="container2">
...
</div>
</body>
The following example demonstrates how the page markup from the previous example changes after the initialization of the Window when the widget is moved to become a child of the <body> element and its additional markup (the wrapper and the title bar) is generated.
<body>
<div id="container1">
...
</div>
<div id="container2">
...
</div>
<div class="k-widget k-window">
<div class="k-window-titlebar">...</div>
<div id="window" class="k-window-content">
Content of the Window
</div>
</div>
</body>
Accessing the Window Elements
The Window provides the wrapper and element DOM elements as fields of its object which you can access and use to customize its appearance and content. Even though the handling of the position and size of the Window is normally done through its API and the setOptions method, you can also utilize wrapper to tweak the position or the size of the widget.
var win = $("#window").data("kendoWindow");
var winWrapper = win.wrapper;
winWrapper.addClass("myWindowClass");
Destroying the Window
When the Window is destroyed, it is completely removed from the DOM—the element from which it was initialized no longer exists on the page. As a result, you can create a new Window instance only from another element. To destroy a Window instance on closing, the earliest time that is recommended for this is the deactivate event.
Creating Windows with the Same ID
To create a Kendo UI Window instance multiple times with the same ID, make sure that the existing instance with this ID is destroyed. Widgets with the same ID cannot exist and work properly simultaneously.
Alternatively, you can open the existing Window instance, refresh its AJAX content or set some new static content without having to destroy the instance.
Functionality and Features
Events
For a complete example on the basic Window events, refer to the demo on using the events of the Window.
Referencing Existing Instances
To refer to an existing Window instance, use the jQuery.data(). Once a reference has been established, use the Window API to control its behavior.
var win = $("#window").data("kendoWindow");
To obtain a reference to a Kendo UI Window instance from within its non-iframe content, use DOM traversal. elementInsideWindow is a jQuery object which contains an element inside the content area of the Window.
var win = elementInsideWindow.closest(".k-window-content").data("kendoWindow");
If the Window is displaying a page in an iframe and the page has to access the widget, obtain a reference to the Window by using window.parent from within the iframe.
The access of the parent
iframeis possible only if theiframeand the parent page belong to the same domain.
var win = window.parent.$("#window").data("kendoWindow");