SFM-Broker/src/app/dashboard/dashboard.component.html

<p>dashboard works!</p>

<kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>



<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-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
        <p style="margin: 30px; text-align: center;">Are you sure you want to
        continue?</p>
        

        <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>
 

        <kendo-menu>
            <kendo-menu-item text="My Web Site" icon="folder">
                <kendo-menu-item text="images" icon="folder">
                    <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
                    <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
                    <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
                </kendo-menu-item>
                <kendo-menu-item text="resources" icon="folder">
                    <kendo-menu-item text="pdf" icon="folder">
                        <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
                        <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
                    </kendo-menu-item>
                    <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
                </kendo-menu-item>
                <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
                <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
                <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
                <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
            </kendo-menu-item>
          </kendo-menu>

        <kendo-dialog-actions>
            <button kendoButton (click)="action('no')">No</button>
            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
        </kendo-dialog-actions>
    </kendo-dialog>

    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
      <p style="text-align: center;">Additional info</p>
     </kendo-window>
  </div>