21 April 2018

Kendo UI grid center the progress bar

I found a solution on how to center the Kendo UI grid progress bar today.  Thought I share, it turns out to be real easy.  Just use overwrite the CSS
 <style>  
   .k-loading-mask .k-loading-image {  
     background-image: url('loadingtest2.png') !important;  
     position: fixed !important;  
     top: 50% !important;  
     left: 50% !important;  
     /* bring your own prefixes */  
     transform: translate(-50%, -50%) !important;  
   }  
 </style>

This method can of course be apply to anything you want to display on the center of the screen.



Full source code based on the Grid\Api example from their sample codes is as below 

 <!DOCTYPE html>  
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
   <title>API</title>  
   <meta charset="utf-8">  
   <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">  
   <link href="../../styles/kendo.common.min.css" rel="stylesheet">  
   <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">  
   <link href="../../styles/kendo.default.min.css" rel="stylesheet">  
   <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">  
   <script src="../../js/jquery.min.js"></script>  
   <script src="../../js/jszip.min.js"></script>  
   <script src="../../js/kendo.all.min.js"></script>  
   <script src="../content/shared/js/console.js"></script>  
   <script>  
   </script>  
 </head>  
 <style>  
   .k-loading-mask .k-loading-image {  
     background-image: url('loadingtest2.png') !important;  
     position: fixed !important;  
     top: 50% !important;  
     left: 50% !important;  
     /* bring your own prefixes */  
     transform: translate(-50%, -50%) !important;  
   }  
 </style>  
 <body>  
   <a class="offline-button" href="../index.html">Back</a>  
   <div id="example">  
     <div class="box wide">  
       <div class="box-col">  
         <h4>Selection</h4>  
         <ul class="options">  
           <li>  
             <input type="text" value="0" id="selectRow" class="k-textbox" />  
             <button class="selectRow k-button">Select row</button>  
           </li>  
           <li>  
             <button class="clearSelection k-button">Clear selected rows</button>  
           </li>  
         </ul>  
       </div>  
       <div class="box-col">  
         <h4>Expand/Collapse</h4>  
         <ul class="options">  
           <li>  
             <input type="text" value="0" id="groupRow" class="k-textbox"/>  
             <button class="toggleGroup k-button">Collapse/Expand group</button>  
           </li>  
         </ul>  
       </div>  
     </div>  
     <div id="grid"></div>  
     <script>  
         $(document).ready(function () {  
           $("#grid").kendoGrid({  
             dataSource: {  
               transport: {  
                 read: {  
                   url: "https://demos.telerik.com/kendo-ui/service/Products",  
                   dataType: "jsonp"  
                 }  
               },  
               pageSize: 5,  
               group: {  
                 field: "UnitsInStock",  
                 dir: "asc"  
               }  
             },  
             selectable: "multiple row",  
             pageable: {  
               buttonCount: 5  
             },  
             scrollable: false,  
             groupable: true,  
             columns: [  
               {  
                 field: "ProductName",  
                 title: "Product Name"  
               },  
               {  
                 field: "UnitPrice",  
                 title: "Unit Price",  
                 format: "{0:c}"  
               },  
               {  
                 field: "UnitsInStock",  
                 title: "Units In Stock"  
               }  
             ]  
           });  
           $(".clearSelection").click(function () {  
             $("#grid").data("kendoGrid").clearSelection();  
           });  
           var selectRow = function (e) {  
             if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {  
               var grid = $("#grid").data("kendoGrid"),  
                 rowIndex = $("#selectRow").val(),  
                 row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(rowIndex);  
               grid.select(row);  
             }  
           },  
             toggleGroup = function (e) {  
               if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {  
                 var grid = $("#grid").data("kendoGrid"),  
                   rowIndex = $("#groupRow").val(),  
                   row = grid.tbody.find(">tr.k-grouping-row").eq(rowIndex);  
                 if (row.has(".k-i-collapse").length) {  
                   grid.collapseGroup(row);  
                 } else {  
                   grid.expandGroup(row);  
                 }  
               }  
             };  
           $(".selectRow").click(selectRow);  
           $("#selectRow").keypress(selectRow);  
           $(".toggleGroup").click(toggleGroup);  
           $("#groupRow").keypress(toggleGroup);  
         });  
     </script>  
   </div>  
 </body>  
 </html>
Posted by at No comments:

04 April 2018

Custom JavaScript event illustrated

The trigger function is called when user clicks on p, myCustomEvent is bubble up from p to div1 and div2, but not pass on to div3 because of event.stopPropagation();


 <!DOCTYPE html>  
 <head>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>  
 <style>  
   form, div, p {  
     border-style: solid;  
     border-width: 1px;  
   }  
   p{  
     background-color:green;  
   }  
 </style>  
 <form>  
 FORM  
   <div id="div3">div3  
     <div id="div2">div2  
       <div id="div1">div1  
         <p onclick="trigger(this)">P</p>  
       </div>  
     </div>  
   </div>  
 </form>  
 <script>  
   $(function () {  
     $("#div3").on("myCustomEvent",  
       function (event, arg1, arg2) {  
         alert("div3 will not receive the event");  
       });  
     $("#div2").on("myCustomEvent",   
       function (event, arg1, arg2) {  
         var s = "div2 arg1:" + arg1 + ", arg2:" + arg2;  
         alert(s);  
         event.stopPropagation();  
       });  
     $("#div1").on("myCustomEvent",  
       function (event, arg1, arg2) {  
         alert("div1 caught myCustomEvent and pass it on");  
       });  
   });  
   function trigger(source)  
   {  
     //trigger myCustomEvent which will bubble up to its parents  
     $(source).trigger("myCustomEvent", ["hello", "world"]);  
   }  
 </script>
Posted by at No comments:
Subscribe to: Posts (Atom)