Post
Ask Question

JQuery Open Close Kendo Window on button Click

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
  1. <html>  
  2.     <head>  
  3.         <meta charset="utf-8">  
  4.             <title>Untitled</title>  
  5.             <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">  
  6.                 <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">  
  7.                     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">  
  8.                         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">  
  9.                             <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  10.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>  
  11.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>  
  12.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>  
  13.                         </link>  
  14.                     </linl>  
  15.                 </link>  
  16.             </link>  
  17.         </meta>  
  18.     </head>  
  19.     <body>  
  20.         <body>  
  21.             <div id="example">  
  22.                 <div id="window" style="display:none">  
  23.                     Hi this is awesome Kendo windo  
  24.                 </div>  
  25.             </div>  
  26.         </body>  
  27.     </body>  
  28. </html>  
Step 2: JavaScript.
  1. $(document).ready(function() {  
  2.    $("#open").click(function() {  
  3.       $("#window").show().kendoWindow({  
  4.          width: "500px",  
  5.          height: "200px",  
  6.          modal: true,  
  7.          title: "Window"  
  8.       });  
  9.    });  
Step 3: Run the application.

The Result in browser:


The same functionality you can perform in MVVM pattern.

Here is the HTML design:
  1. <html>  
  2.     <head>  
  3.         <meta charset="utf-8">  
  4.             <title>Untitled</title>  
  5.             <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">  
  6.                 <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.rtl.min.css">  
  7.                     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">  
  8.                         <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.mobile.all.min.css">  
  9.                             <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  10.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>  
  11.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/jszip.min.js"></script>  
  12.                             <script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>  
  13.                         </head>  
  14.                         <body>  
  15.                             <div id="example">  
  16.                                 <div id="win" data-role="window"  
  17. data-title="Window"  
  18. data-width="300"  
  19. data-actions="[ 'close', 'refresh', 'maximize', 'minimize' ]"  
  20. data-height="150">  
  21.                                     <p>Awesome Kendo Window.</p>  
  22.                                 </div>  
  23.                                 <button data-role="button"  
  24. data-sprite-css-class="k-icon k-edit"  
  25. data-bind="events: { click: onClick }"  
  26. style="width: 180px"  
  27. >Click me</button>  
  28.                             </div>  
  29.                         </body>  
  30.                     </html>  
JavaScript in MVVM Pattern :
  1. $(document).ready(function() {  
  2.    var viewModel = kendo.observable({  
  3.       isVisible:false,  
  4.       onClick:function(e)  
  5.       {  
  6.          var my_win = $("#win").data("kendoWindow");  
  7.          my_win.center().open();  
  8.       }  
  9.    });  
  10.    kendo.bind($("#example"), viewModel);  
  11. });  
The Result in Browser:
That's it
Happy Coding