| title | page_title | description |
|---|---|---|
Window |
Configuration, methods and events of Kendo UI Window |
How to initialize a Window UI widget and configure its behaviors, center a window, set its content and toggle the state of the UI widget. |
Represents the Kendo UI Window. Inherits from Widget.
The buttons for interacting with the window. Predefined array values are "Close", "Refresh", "Minimize", and "Maximize".
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
actions: [ "Minimize", "Maximize" ]
});
</script>
A collection of {Animation} objects, used to change default animations. A value of false will disable all animations in the widget.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: false
});
</script>
The animation that will be used when a Window closes.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
close: false
}
});
</script>
Effect to be used for closing of the popup.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
close: {
effects: "fade:out"
}
}
});
</script>
Defines the close animation duration.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
close: {
duration: 2000
}
}
});
</script>
The animation that will be used when a Window opens.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
open: false
},
visible: false
});
$("#dialog").data("kendoWindow").open();
</script>
Effect to be used for opening of the popup.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
open: {
effects: "fade:in"
}
},
visible: false
});
$("#dialog").data("kendoWindow").open();
</script>
Defines the open animation duration.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
animation: {
open: {
duration: 100
}
},
visible: false
});
$("#dialog").data("kendoWindow").open();
</script>
The element that the Window will be appended to. Beneficial if the Window is used together with a form. Note that this does not constrain the window dragging within the given element.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
appendTo: "form#mainForm"
});
</script>
Determines whether the Window will be focused automatically when opened. The property also influences the focus behavior when the Window is clicked when already opened.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
autoFocus: false
});
</script>
Specifies a URL or request options that the window should load its content from.
Note: For URLs starting with a protocol (e.g. http://), a container iframe element is automatically created. This behavior may change in future versions, so it is advisable to always use the iframe configuration option.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
content: "/details"
});
</script>
Template for the content of a Window. Returned data from the server will be given as the data of this template.
Note that if the returned data is JSON, the dataType parameter should be passed, so that the data gets parsed by jQuery.
If the URL contains a protocol, set iframe to false, otherwise the JSON response will be injected "as is" in the Window content area.
<div id="dialog">
<p><strong>This example will not work, unless you define a valid JSON service URL for `content.url`.</p>
<p>The expected JSON response is:
<pre>
{ username: "...my username here..." }
</pre>
</strong></p>
</div>
<script>
$("#dialog").kendoWindow({
content: {
url: "/https/github.com/userDetails",
dataType: "json",
iframe: false,
template: "User name: #= data.username #"
}
});
</script>
Enables (true) or disables (false) the ability for users to move/drag the widget.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
draggable: false
});
</script>
Explicitly states whether a content iframe should be created. For more information, please read Using iframes.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
content: "http://www.telerik.com/",
iframe: true
});
</script>
The maximum height (in pixels) that may be achieved by resizing the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
maxHeight: 300
});
</script>
The maximum width (in pixels) that may be achieved by resizing the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
maxWidth: 300
});
</script>
The minimum height (in pixels) that may be achieved by resizing the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
minHeight: 100
});
</script>
The minimum width (in pixels) that may be achieved by resizing the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
minWidth: 100
});
</script>
Specifies whether the window should show a modal overlay over the page.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
modal: true
});
</script>
Specifies whether the window should be pinned, i.e. it will not move together with the page content during scrolling.
<div style="height: 5000px;"></div>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
pinned: true,
position: { top: 100 }
});
</script>
A collection of one or two members, which define the initial Window's top and/or left position on the page.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
position: {
top: 100, // or "100px"
left: "20%"
}
});
</script>
Specifies the initial top position of the window. Numeric values are treated as pixels. String values can specify pixels, percentages, ems or other valid values.
Specifies the initial left position of the window. Numeric values are treated as pixels. String values can specify pixels or percentages, ems or other valid values.
Enables (true) or disables (false) the ability for users to resize a Window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
resizable: false
});
</script>
The text in the window title bar. If false, the window will be displayed without a title bar. Note that this will prevent the window from being dragged, and the window titlebar buttons will not be shown.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
title: "Customer details"
});
</script>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
title: false
});
</script>
Specifies whether the window will be initially visible.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
visible: false
});
setTimeout(function() {
$("#dialog").data("kendoWindow").open();
}, 1000);
</script>
Specifies width of the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
width: 400
});
</script>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
width: "50%"
});
</script>
Specifies height of the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
height: 400
});
</script>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
height: "50%"
});
</script>
Centers the window within the viewport.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
</script>
Closes a Window.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
setTimeout(function() {
dialog.close();
}, 1000);
</script>
Gets or set the content of a window.
The content of the Window.
Object If the content parameter is provided, this method will return the widget object to support chaining. Otherwise, it will return the current content of the widget.
<div id="dialog">foo</div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
console.log(dialog.content()); // logs "foo"
</script>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.content("Kendo UI all the things!");
</script>
Destroys the window and its modal overlay, if necessary. Removes the widget HTML elements from the DOM.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.destroy();
</script>
Maximizes a Window to the entire viewing area of the user agent. Triggers the resize event.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.maximize();
</script>
Maximizes a Window to its title bar.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.minimize();
</script>
Opens a Window.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
visible: false
});
var dialog = $("#dialog").data("kendoWindow");
dialog.open();
</script>
Pins the Window at its current position with a position:fixed style, i.e. the widget stops moving together with the other page content when the page is scrolled. The user will still be able to move the Window with the mouse or keyboard.
<div style="height: 5000px;"></div>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
position: { top: 100 }
});
var dialog = $("#dialog").data("kendoWindow");
dialog.pin();
</script>
Refreshes the content of a Window from a remote URL or the initially defined content template.
Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.
Options for requesting data from the server.
If omitted, the window uses the content property
that was supplied when the window was created.
Any options specified here are passed to jQuery.ajax().
The server URL that will be requested.
A JSON object containing the data that will be passed to the server.
The HTTP request method ("GET", "POST").
A template to be used for displaying the requested data.
Indicates whether the content should be fetched within an iframe, or with AJAX and rendered in the same page.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.refresh("/feedbackForm");
dialog.refresh({
url: "/https/github.com/feedbackForm",
data: { userId: 42 }
});
dialog.refresh({
url: "/https/github.com/userInfo",
data: { userId: 42 },
template: "Hello, #= firstName # #= lastName #"
});
</script>
Restores a maximized or minimized Window to its previous state. Triggers the resize event.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
// maximize the window
dialog.maximize();
setTimeout(function() {
// restore its original size
dialog.restore();
}, 1000);
</script>
Allows the window to be configured with new options. If you change the content url, call refresh afterwards.
Another option is to execute the refresh method with the new URL directly.
The configuration options to be set.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.setOptions({
width: 180,
height: 225
});
</script>
Gets or set the title of a Window.
The title of the Window.
kendo.ui.Window If a title is provided, this method will return the window object to support chaining. Otherwise, it will return the current title of the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
var title = dialog.title();
</script>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.title("Hello");
</script>
Brings forward a Window to the top of the z-index.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.toFront();
</script>
Toggles a Window between a maximized and restored state. Triggers the resize event.
kendo.ui.Window Returns the window object to support chaining.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.toggleMaximization();
</script>
Disables the Window's pinned state, so that the widget will move together with the other page content when the page is scrolled.
<div style="height: 5000px;"></div>
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
pinned: true,
position: { top: 100 }
});
var dialog = $("#dialog").data("kendoWindow");
dialog.unpin();
</script>
Triggered when a Window has finished its opening animation.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
activate: function() {
// open animation has finished playing
}
});
</script>
<div id="dialog"></div>
<script>
function window_activate() {
// open animation has finished playing
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("activate", window_activate);
</script>
Triggered when a Window is closed (by a user or through the close() method).
Indicates whether the close action has been triggered by the user (by clicking the close button or hitting the escape key). When the close method has been called, this field is false.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
close: function(e) {
// close animation has finished playing
}
});
</script>
<div id="dialog"></div>
<script>
function window_close(e) {
// close animation has finished playing
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("close", window_close);
</script>
Triggered when a Window has finished its closing animation.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
deactivate: function() {
// close animation will start soon
}
});
</script>
<div id="dialog"></div>
<script>
function window_deactivate() {
// close animation will start soon
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("deactivate", window_deactivate);
</script>
Triggered when a Window has been moved by a user.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
dragend: function() {
// user has released the window after dragging
}
});
</script>
<div id="dialog"></div>
<script>
function window_dragend() {
// user has released the window after dragging
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("dragend", window_dragend);
</script>
Triggered when the user starts to move the window.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
dragstart: function() {
// user has started dragging the window
}
});
</script>
<div id="dialog"></div>
<script>
function window_dragstart() {
// user has started dragging the window
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("dragstart", window_dragstart);
</script>
Triggered when an AJAX request for content fails.
The XHR request object, as returned from jQuery.ajax
The status of the request, as returned from jQuery.ajax
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
error: function(e) {
console.log("Request failed with status " + e.status)
}
});
</script>
<div id="dialog"></div>
<script>
function window_error(e) {
console.log("Request failed with status " + e.status)
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("error", window_error);
</script>
Triggered when a Window is opened (i.e. the open() method is called).
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
open: function() {
// open animation will start soon
}
});
</script>
<div id="dialog"></div>
<script>
function window_open() {
// open animation will start soon
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("open", window_open);
</script>
Triggered when the content of a Window has finished loading via AJAX, when the window iframe has finished loading, or when the refresh button has been clicked on a window with static content.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
refresh: function() {
// new content has been fetched
}
});
</script>
<div id="dialog"></div>
<script>
function window_refresh() {
// new content has been fetched
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("refresh", window_refresh);
</script>
Triggered when a window has been resized by a user.
<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
resize: function() {
// user has finished resizing the window
}
});
</script>
<div id="dialog"></div>
<script>
function window_resize() {
// user has finished resizing the window
}
$("#dialog").kendoWindow();
var dialog = $("#dialog").data("kendoWindow");
dialog.bind("resize", window_resize);
</script>