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

Getting Started with the Window

This guide demonstrates how to get up and running with the Kendo UI for jQuery Window.

After the completion of this guide, you will be able to achieve the following end result:

<div id="window">
  <p>Hello, get started with the Kendo UI for jQuery Window!</p>
</div>

<script>
    $("#window").kendoWindow({
      height:500,
      width:500,
      title: "Your Kendo Window"
    });
</script>

1. Create a div Element

First, create an <div> element on the page that will serve as the main container of the Window component. In the <div> element, you can pre-define the content for the component.

<div id="window">
  <p>Hello, get started with the Kendo UI for jQuery Window!</p>
</div>

2. Initialize the Window

In this step, you will initialize the Window from the <div> element. When you initialize the component from a div, all settings of the Window will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.

<div id="window">
  <p>Hello, get started with the Kendo UI for jQuery Window!</p>
</div>

<script>
    // Target the div element by using jQuery and then call the kendoWindow() method.
    $("#window").kendoWindow({
        // Add some basic configurations such as width and height.
        width: 500,
        height: 500,
        title: "Your Kendo Window"
    });
</script>

3. Set the Title

You can use the title field to set the header text in the Window component.

<div id="window">
  <p>Hello, get started with the Kendo UI for jQuery Window!</p>
</div>

<script>
    // Target the div element by using jQuery and then call the kendoWindow() method.
    $("#window").kendoWindow({
        // Add some basic configurations such as width and height.
        width: 500,
        height: 500,
        title: 
    });
</script>

Next Steps

See Also

In this article