Post
Ask Question

Prevent Default Esc Key Functionality To Close The Kendo Window

Introduction

Using Esc key to close the kendo window is a default functionality of it, but in some scenario if you have editable kendo grid in kendo window then there will be conflict while the user uses the Esc key, because the same Esc key will close the kendo grid cell if it is in editable mode, but by default it will close the entire window, now we need to prevent this default functionality of kendo window. 

Prevent Esc key functionality to close the kendo window

The below function block is used to prevent the Esc key functionality to close the kendo window.
  1. $(function () {    
  2.            kendo.ui.Window.fn._keydown = function (originalFn) {    
  3.            var KEY_ESC = 27;    
  4.        return function (e) {    
  5.            if (e.which !== KEY_ESC) {    
  6.                originalFn.call(this, e);    
  7.                }    
  8.            };    
  9.       }(kendo.ui.Window.fn._keydown);    
  10.       });      
KendoWindow.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <base href="https://demos.telerik.com/kendo-ui/window/index">  
  5.     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>  
  6.     <title></title>  
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />  
  8.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />  
  9.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />  
  10.   
  11.     <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>  
  12.     <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>  
  13.       
  14.   
  15. </head>  
  16. <body>  
  17.   
  18.         <div id="example">  
  19.             <div id="window">  
  20.                 <div id="grid"></div>  
  21.                 
  22.             </div>  
  23.             <button id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</button>  
  24.   
  25.           
  26.              
  27.             <script>  
  28.         $(function () {  
  29.             kendo.ui.Window.fn._keydown = function (originalFn) {  
  30.             var KEY_ESC = 27;  
  31.         return function (e) {  
  32.             if (e.which !== KEY_ESC) {  
  33.                 originalFn.call(this, e);  
  34.                 }  
  35.             };  
  36.        }(kendo.ui.Window.fn._keydown);  
  37.        });   
  38.                 $(document).ready(function() {  
  39.      
  40.                     $("#grid").kendoGrid({  
  41.                 dataSource: {  
  42.                     type: "odata",  
  43.                     transport: {  
  44.                         read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"  
  45.                     },  
  46.                     pageSize: 20  
  47.                 },  
  48.                 height: 550,  
  49.                 groupable: true,  
  50.                 sortable: true,  
  51.                 editable: true,  
  52.                 pageable: {  
  53.                     refresh: true,  
  54.                     pageSizes: true,  
  55.                     buttonCount: 5  
  56.                 },  
  57.                 columns: [{  
  58.                     template: "<div class='customer-photo'" +  
  59.                     "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +  
  60.                     "<div class='customer-name'>#: ContactName #</div>",  
  61.                     field: "ContactName",  
  62.                     title: "Contact Name",  
  63.                     width: 240  
  64.                 }, {  
  65.                     field: "ContactTitle",  
  66.                     title: "Contact Title"  
  67.                 }, {  
  68.                     field: "CompanyName",  
  69.                     title: "Company Name"  
  70.                 }, {  
  71.                     field: "Country",  
  72.                     width: 150  
  73.                 }]  
  74.             });  
  75.         
  76.                     var myWindow = $("#window"),  
  77.                         undo = $("#undo");  
  78.   
  79.                     undo.click(function() {  
  80.                         myWindow.data("kendoWindow").open();  
  81.                         undo.fadeOut();  
  82.                     });  
  83.   
  84.                     function onClose() {  
  85.                         undo.fadeIn();  
  86.                     }  
  87.  
  88.                     myWindow.kendoWindow({  
  89.                         width: "600px",  
  90.                         title: "About Alvar Aalto",  
  91.                         visible: false,  
  92.                         actions: [  
  93.                             "Pin",  
  94.                             "Minimize",  
  95.                             "Maximize",  
  96.                             "Close"  
  97.                         ],  
  98.                         close: onClose  
  99.                     }).data("kendoWindow").center().open();  
  100.                 });  
  101.             </script>  
  102.   
  103.             <style>  
  104.         .customer-photo {  
  105.         display: inline-block;  
  106.         width: 32px;  
  107.         height: 32px;  
  108.         border-radius: 50%;  
  109.         background-size: 32px 35px;  
  110.         background-position: center center;  
  111.         vertical-align: middle;  
  112.         line-height: 32px;  
  113.         box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);  
  114.         margin-left: 5px;  
  115.     }  
  116.   
  117.       .customer-name {  
  118.          display: inline-block;  
  119.         vertical-align: middle;  
  120.         line-height: 32px;  
  121.         padding-left: 3px;  
  122.      }  
  123.                 #example {  
  124.                     min-height:500px;  
  125.                 }  
  126.                 #undo {  
  127.                     text-align: center;  
  128.                     position: absolute;  
  129.                     white-space: nowrap;  
  130.                     padding: 1em;  
  131.                     cursor: pointer;  
  132.                 }  
  133.                 .armchair {  
  134.                     float: left;  
  135.                     margin: 30px 30px 120px 30px;  
  136.                     text-align: center;  
  137.                 }  
  138.                 .armchair img {  
  139.                     display: block;  
  140.                     margin-bottom: 10px;  
  141.                 }  
  142.                 .k-window-content a {  
  143.                     color: #BBB;  
  144.                 }  
  145.                 .k-window-content p {  
  146.                     margin-bottom: 1em;  
  147.                 }  
  148.                   
  149.                 @media screen and (max-width: 1023px) {  
  150.                     div.k-window {  
  151.                         display: none !important;  
  152.                     }  
  153.                 }  
  154.             </style>  
  155.         </div>  
  156.   
  157.   
  158. </body>  
  159. </html>  
Result in Browser
  
Reference

https://demos.telerik.com/kendo-ui/window/index

Summary

We have seen how to prevent the default Esc key functionality to close the kendo window, which is useful when we are using the editable Kendo Grid. 

I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this article are always welcomed