dialog order matters when popup

src/app/dashboard/dashboard.component.html

 
 <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
 
-<div class="example-wrapper" style="opacity:0.8;">
+
+
+<hr> 
+
+<kendo-grid [data]="gridData" >
+    <kendo-grid-column field="ProductID" title="ID" width="40">
+    </kendo-grid-column>
+    <kendo-grid-column field="ProductName" title="Name" width="250">
+    </kendo-grid-column>
+    <kendo-grid-column field="Category.CategoryName" title="Category">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitPrice" title="Price" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+        <ng-template kendoGridCellTemplate let-dataItem>
+            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+        </ng-template>
+    </kendo-grid-column>
+</kendo-grid>
+
+
+<!-- <div #target class="target">
+    <p class="placeholder">Right-click to open Context menu</p>
+  </div>
+  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
+
+  <div class="example-wrapper" style="opacity:1;">
     <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
     <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
     
     <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
       <p style="text-align: center;">Additional info</p>
      </kendo-window>
-  </div>
-
-<div class="example-wrapper">
-    <div class="row">
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorGradient</p>
-            <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorPalette</p>
-            <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>ColorPicker</p>
-            <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
-        </div>
-        <div class="col-xs-12 col-sm-6 example-col">
-            <p>MaskedTextBox</p>
-            <kendo-maskedtextbox
-                [mask]="'9-000'"
-            ></kendo-maskedtextbox>
-        </div>
-    </div>
- </div>
-<hr> 
-
-<kendo-grid [data]="gridData" >
-    <kendo-grid-column field="ProductID" title="ID" width="40">
-    </kendo-grid-column>
-    <kendo-grid-column field="ProductName" title="Name" width="250">
-    </kendo-grid-column>
-    <kendo-grid-column field="Category.CategoryName" title="Category">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitPrice" title="Price" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
-        <ng-template kendoGridCellTemplate let-dataItem>
-            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
-        </ng-template>
-    </kendo-grid-column>
-</kendo-grid>
-
-
-<!-- <div #target class="target">
-    <p class="placeholder">Right-click to open Context menu</p>
-  </div>
-  <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
-
+  </div>

src/app/dashboard/dashboard.component.ts

 export const sampleProducts = [
   {
       "ProductID": 1,
-      "ProductName": "Chai",
+      "ProductName": "Chai11",
       "SupplierID": 1,
       "CategoryID": 1,
       "QuantityPerUnit": "10 boxes x 20 bags",
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
-  public gridData: any[] = products;
+  public gridData: any[] = sampleProducts;
   public dialogOpened = false;
   public windowOpened = false;
 

src/app/dashboard/dist/dashboard.component.js

 exports.sampleProducts = [
     {
         "ProductID": 1,
-        "ProductName": "Chai",
+        "ProductName": "Chai11",
         "SupplierID": 1,
         "CategoryID": 1,
         "QuantityPerUnit": "10 boxes x 20 bags",
     }];
 var DashboardComponent = /** @class */ (function () {
     function DashboardComponent() {
-        this.gridData = exports.products;
+        this.gridData = exports.sampleProducts;
         this.dialogOpened = false;
         this.windowOpened = false;
     }

src/index.html

 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>SFM Advanced Broker Platform</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
   <app-root></app-root>
 
   <style>
-#bgVideo {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    z-index: -1;
-}
-
-    body { 
-    margin: 0; 
-    background-size: cover; 
-    background-image: url('../img/login-bg1.jpg');
-}
-
-.vimeo-container {
-  padding: 0;
-  width: 100%;
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
-iframe {
-  box-sizing: border-box;
-  width: 177.77777778vh;
-  height: 56.25vw;
-  min-width: 100%;
-  min-height: 100%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+    #bgVideo {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      min-width: 100%;
+      min-height: 100%;
+      z-index: -1;
+    }
+
+    body {
+      margin: 0;
+      background-size: cover;
+      background-image: url('../img/login-bg1.jpg');
+    }
+
+    .vimeo-container {
+      padding: 0;
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      position: relative;
+    }
+
+    iframe {
+      box-sizing: border-box;
+      width: 177.77777778vh;
+      height: 56.25vw;
+      min-width: 100%;
+      min-height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
   </style>
 
-  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0"
-  frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
+  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"
+    allow="autoplay; fullscreen" allowfullscreen></iframe>
 
 </body>
-</html>
+
+</html>