The Window widget displays content in a modal or non-modal HTML window. By default, Windows can be moved, resized, and closed by users. Window content can also be defined with either static HTML or loaded dynamically with Ajax.

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

Getting Started

 <p id="window">
     Kendo window content
 </p>

$("#window").kendoWindow();

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

Configuring Window behaviors

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

• Minimum height/width
• Available user Window actions (close/refresh/maximize)
• Window title
• Draggable and Resizable behaviors

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

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

Positioning and Opening the 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’s also common to open a Window as the result of an action rather than on initial page load. The Window API provides methods for handling this and many more advanced Window scenarios. Please see the Window demo Methods tab for more details.

 <!-- Create Window HTML and a button to open Window -->
 <p id="window">
     Centered Kendo UI Window content
 </p>
 <button id="btnOpen">Open Window</button>

 //Initialize Window, center, and configure button click action-->
 $(document).ready(function(){
     var window = $("#window").kendoWindow({
     title: "Centered Window",
     width: "200px",
     height: "200px",
     visible: false
 }).data("kendoWindow");
 });
 $("#btnOpen").click(function(){
     var window = $("#window").data("kendoWindow");
     window.center();
     window.open();
 });

Loading Window content with Ajax

While any valid technique for loading Ajax content can be used, 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.

 <!-- Define a basic HTML element for the Window -->
 <div id="window"></div>

 //Initialize and configure to load content async -->
 $(document).ready(function(){
     $("#window").kendoWindow({
       title: "Async Window Content",
       contentUrl: "html-content-snippet.html"
     });
 });