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

Content

configuration

Specifies a URL or request options from where the Window will load its content.

For URLs which start with a protocol (for example, http://), a container iframe element is automatically created. As this behavior may change in future versions, try to always use the iframe configuration option.

content

Object|String

  <base href="https://demos.telerik.com/kendo-ui/window/ajax">

content.dataType

String

The type of result expected from the remote service. Used values are "html" and "json".

Default: "html"

<div id="dialog"></div>

<script>
  $("#dialog").kendoWindow({
    content: {
      url: "https://demos.telerik.com/kendo-ui/content/shared/js/products.js",
      dataType: "json"
    }
  });
</script>

content.iframe

Boolean

If the URL for the Window content contains a protocol, the Window creates an iframe for the content and assumes that the nested page resides in another domain.

If the URL does not contain a protocol, the URL is treated as a local URL which will load a partial view and the Window does not create an iframe for the content.

To control the creation of iframe Window content, you have to explicitly configure the option.

<div id="dialog"></div>

<script>
$("#dialog").kendoWindow({
  content: {
    url: "https://demos.telerik.com/kendo-ui/content/shared/js/products.js",
    dataType: "json",
    iframe: true
  }
});
</script>

content.template

String

The template for the content of a Window. Returned data from the server will be given as the data of this template.

If the returned data is JSON, the dataType parameter has to 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 in the content area of the Window as is.

<div id="dialog"></div>
<script>
$("#dialog").kendoWindow({
  content: {
    url: "https://runner.telerik.io/fullscreen/tZWehimq.json",
    dataType: "json",
    iframe: false,
    template: ({ username }) => `User name: ${username}`
  }
});
</script>

content.url

String

Specifies the url from which the content is fetched

<base href="https://demos.telerik.com/kendo-ui/window/ajax" />
<div id="dialog"></div>
<script>
  $("#dialog").kendoWindow({
    content: {
      url: "../content/web/tabstrip/ajax/ajaxContent2.html",
    },
  });
</script>