Step 1: Create a new HTML page using notepad or any other editor and name it as Kendo Window.
Write the following code in KendoWindow.html
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</link>
</linl>
</link>
</link>
</meta>
</head>
<body>
<body>
<div id="example">
<div id="window" style="display:none">
Hi this is awesome Kendo windo
</div>
</div>
</body>
</body>
</html>
Step 2: JavaScript.
$(document).ready(function() {
$("#open").click(function() {
$("#window").show().kendoWindow({
width: "500px",
height: "200px",
modal: true,
title: "Window"
});
});
Step 3: Run the application.
The Result in browser:
The Result in browser:
The same functionality you can perform in MVVM pattern.
Here is the HTML design:
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="win" data-role="window"
data-title="Window"
data-width="300"
data-actions="[ 'close', 'refresh', 'maximize', 'minimize' ]"
data-height="150">
<p>Awesome Kendo Window.</p>
</div>
<button data-role="button"
data-sprite-css-class="k-icon k-edit"
data-bind="events: { click: onClick }"
style="width: 180px"
>Click me</button>
</div>
</body>
</html>
JavaScript in MVVM Pattern :
$(document).ready(function() {
var viewModel = kendo.observable({
isVisible:false,
onClick:function(e)
{
var my_win = $("#win").data("kendoWindow");
my_win.center().open();
}
});
kendo.bind($("#example"), viewModel);
});
The Result in Browser:

That's it
Happy Coding
