Merge pull request #12460 from IgniteUI/dpetev/demos-type-checks

Fix demos type checks and warnings, some cleanup

Author: kdinev

src/app/grid-cellEditing/grid-cellEditing.component.html

@@ -25,11 +25,6 @@ <h3>Grid with primary key ProductID</h3>
     <igx-column field="ReorderLevel" width="200px" [sortable]="true" [filterable]="true" [editable]="true" [dataType]="'number'" [hasSummary]="false">
     </igx-column>
     <igx-column field="ProductName" width="200px" [groupable]="kk" [header]="pname" [sortable]="true" [dataType]="'string'" [editable]="true" [resizable]="true">
-        <ng-template igxCellValidationError let-cell='cell'>
-            <div *ngIf="cell.formGroup?.get(cell.column?.field).errors?.['forbiddenName']">
-                This name is forbidden.
-            </div>
-        </ng-template>
     </igx-column>
     <igx-column required field="UnitsInStock" header="UnitsInStock" width="200px" [dataType]="'number'" [editable]="true" [sortable]="true" [hasSummary]="false">
       </igx-column>
@@ -74,4 +69,4 @@ <h3>Grid without PK</h3>
     <igx-paginator [perPage]="10"></igx-paginator>
 </igx-grid>
 <button (click)="moveColumns()">Move OrderDate and ProductName</button>
-<button (click)="updateSelectedCell()">Update Selected Cell</button>
+<button (click)="updateSelectedCell()">Update Selected Cell</button>

src/app/grid-cellEditing/grid-cellEditing.component.ts

@@ -167,10 +167,6 @@ export class GridCellEditingComponent {
         const secColumn = this.gridWithoutPK.getColumnByName('OrderDate');
         this.gridWithoutPK.moveColumn(column, secColumn);
     }
-    public checkValid(cell) {
-        debugger;
-        return cell.formGroup?.get(cell.column?.field).errors?.['appForbiddenName'];
-    }
     public updateSelectedCell() {
         let newValue;
         const selectedCell = this.gridWithoutPK.selectedCells[0];

src/app/grid-export/grid-export.sample.ts

@@ -1,12 +1,10 @@
 import { Component, ViewChild } from '@angular/core';
 import {
-    IgxColumnComponent,
+    ColumnType,
     IgxNumberSummaryOperand,
     IgxSummaryResult,
-    IgxExcelExporterService,
     IGridToolbarExportEventArgs,
     IgxExporterOptionsBase,
-    IgxExcelExporterOptions,
     IColumnExportingEventArgs,
     IRowExportingEventArgs,
     IgxGridComponent,
@@ -91,31 +89,29 @@ export class GridExportComponent {
         this.productId = GRID_DATA.length;
     }
 
-    public toggleSummary(column: IgxColumnComponent) {
+    public toggleSummary(column: ColumnType) {
         column.hasSummary = !column.hasSummary;
-        this.grid.summaryService.clearSummaryCache();
-        this.tGrid.summaryService.clearSummaryCache();
     }
 
     public configureExport(args: IGridToolbarExportEventArgs) {
         console.log(args);
-        //const options: IgxExporterOptionsBase = args.options;
+        // const options: IgxExporterOptionsBase = args.options;
+
+        // // Change exporter options
 
-        // Change exporter options
-        //
         // options.fileName = `Report_${new Date().toDateString()}`;
         // options.exportSummaries = false;
 
-        // Cancel column exporting
-        //
+        // // Cancel column exporting
+
         // args.exporter.columnExporting.subscribe((colExportingArgs: IColumnExportingEventArgs) => {
         //     if (colExportingArgs.columnIndex === 1) {
         //         colExportingArgs.cancel = true;
         //     }
         // });
 
-        // Cancel row exporting
-        //
+        // // Cancel row exporting
+
         // args.exporter.rowExporting.subscribe((rowExportingArgs: IRowExportingEventArgs) => {
         //     if (rowExportingArgs.rowIndex === 1) {
         //         rowExportingArgs.cancel = true;

src/app/grid-filter-template/grid-filter-template.sample.ts

@@ -5,7 +5,7 @@ import {
     IgxNumberFilteringOperand,
     IgxDateFilteringOperand,
     IgxStringFilteringOperand,
-    IgxColumnComponent,
+    ColumnType,
     GridSelectionMode
 } from 'igniteui-angular';
 
@@ -511,7 +511,7 @@ export class GridFilterTemplateSampleComponent implements OnInit {
         this.selectionMode = GridSelectionMode.multiple;
     }
 
-    public onInput(input: any, column: IgxColumnComponent) {
+    public onInput(input: any, column: ColumnType) {
         let operand = null;
         let value = input.value;
 

src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.html

@@ -1,5 +1,5 @@
 <div class="dark-grid">
-    <igx-grid batchEditing ='true' #grid1 [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [primaryKey]="'ProductID'" [autoGenerate]='true' (dataPreLoad)="handlePreLoad()" [clipboardOptions]="clipboardOptions"
-    (sortingDone)="processData(true)" (columnInit)='onColumnInit($event)' rowSelection="multiple">
+    <igx-grid [batchEditing]="true" #grid1 [data]="remoteData | async" height="500px" width="100%" primaryKey="ProductID" [autoGenerate]="true" (dataPreLoad)="handlePreLoad()" [clipboardOptions]="clipboardOptions"
+    (sortingDone)="processData(true)" (columnInit)="onColumnInit($event)" rowSelection="multiple">
     </igx-grid>
 </div>

src/app/grid-summaries/grid-summaries.sample.html

@@ -1,7 +1,7 @@
 <div class="density-chooser">
     <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
 </div>
-<igx-grid #grid1 [pinning]="pinningConfig" [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
+<igx-grid #grid1 [pinning]="pinningConfig" [data]="data" [autoGenerate]="false" [width]="w" [height]="h"
     [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'" [showSummaryOnCollapse]="true"
     [summaryRowHeight]="rh" [rowSelection]="rowSelection ? 'multiple' : 'none'" [displayDensity]="density">
     <igx-grid-toolbar *ngIf="showToolbar" [displayDensity]="grid1.displayDensity">

src/app/grid-summaries/grid-summaries.sample.ts

@@ -4,7 +4,8 @@ import {
     IgxNumberSummaryOperand,
     IgxSummaryResult,
     ColumnPinningPosition,
-    IPinningConfig
+    IPinningConfig,
+    DisplayDensity
 } from 'igniteui-angular';
 
 class MySummary extends IgxNumberSummaryOperand {
@@ -52,7 +53,7 @@ export class GridSummaryComponent implements OnInit {
     public columnPinning = false;
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
     public rowSelection = false;
-    public density = 'compact';
+    public density: DisplayDensity = 'compact';
     public displayDensities;
 
     public data = [{

src/app/grid-validation/grid-validation.sample.component.html

@@ -4,7 +4,7 @@ <h4>Grid without transactions</h4>
         <igx-switch [(ngModel)]="rowEditNoTransactions">Row edit</igx-switch>
         <igx-grid [rowStyles]="rowStyles"  validationTrigger='change' (validationStatusChange)='validationChange($event)' (cellEdit)='cellEdit($event)' (formGroupCreated)='formCreateHandler($event)' #gridNoTransactions primaryKey="ProductID" [data]="data" [rowEditable]="rowEditNoTransactions"
         [width]="'1200px'" [height]="'800px'">
-        <igx-column [field]="" editable='false'>
+        <igx-column [field]="" [editable]='false'>
             <ng-template igxCell let-cell="cell">
                 {{cell.row.validation.status}}
             </ng-template>
@@ -13,7 +13,7 @@ <h4>Grid without transactions</h4>
         <igx-column field='ProductName' appForbiddenName='bob' required [editable]='true'>
             <ng-template igxCellEditor let-cell="cell" let-value let-fc='formControl'>
                 <input  [(ngModel)]="cell.editValue"/>
-            </ng-template> 
+            </ng-template>
             <ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
                 <ng-container *ngTemplateOutlet="defaultErr" >
                 </ng-container>
@@ -65,15 +65,14 @@ <h4>Grid with transactions</h4>
         <h4>TreeGrid</h4>
         <igx-tree-grid #treegrid [data]="treeData" primaryKey="employeeID" [rowStyles]="rowStyles"
         foreignKey="PID" [width]="'900px'" [height]="'800px'" [rowEditable]="true" [moving]="true">
-        <igx-column [field]="" editable='false'>
+        <igx-column [field]="" [editable]='false'>
             <ng-template igxCell let-cell="cell">
                 {{cell.row.validation.status}}
             </ng-template>
         </igx-column>
         <igx-column *ngFor="let c of treeColumns" [field]="c.field" [dataType]="c.dataType" [header]="c.label"
-            [pinned]="c.pinned" [groupable]="false" [resizable]="c.resizable" [width]="c.width"
-            [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [minWidth]="c.minWidth"
-            [maxWidth]="c.maxWidth" required>
+            [groupable]="false" [resizable]="c.resizable" [width]="c.width.toString()"
+            [sortable]="true" [filterable]="true" [editable]="true" required>
         </igx-column>
         <igx-action-strip #actionstrip>
             <igx-grid-editing-actions [addRow]="true" [addChild]="actionstrip.context?.treeRow.level < 1">
@@ -87,10 +86,10 @@ <h4>TreeGrid</h4>
         <h4>Hierarchical Grid</h4>
         <igx-hierarchical-grid #hgrid [data]="hGridData" primaryKey="EmployeeID"
          [width]="'900px'" [height]="'550px'" [rowEditable]="true" [moving]="true">
-        <igx-column *ngFor="let c of hColumns" [field]="c.field" required editable='true'>
+        <igx-column *ngFor="let c of hColumns" [field]="c.field" required [editable]='true'>
         </igx-column>
         <igx-row-island [key]="'Orders'" [autoGenerate]="false">
-            <igx-column *ngFor="let c of hColumns2" [field]="c.field" required appForbiddenName='bob' editable='true'>
+            <igx-column *ngFor="let c of hColumns2" [field]="c.field" required appForbiddenName='bob' [editable]='true'>
                 <ng-template igxCellValidationError let-cell='cell' let-defaultErr='defaultErrorTemplate'>
                     <ng-container *ngTemplateOutlet="defaultErr" >
                     </ng-container>

src/app/grid-validation/grid-validation.sample.component.ts

@@ -1,7 +1,7 @@
 import { Component, Directive, ViewChild, Input } from '@angular/core';
 import { data } from '../shared/data';
 
-import {  IgxGridComponent, IRecordValidationState, IgxGridValidationService, IGridValidationStatusEventArgs, RowType } from 'igniteui-angular';
+import {  IgxGridComponent, IRecordValidationState, IgxGridValidationService, IGridValidationStatusEventArgs, RowType, GridColumnDataType, IGridFormGroupCreatedEventArgs } from 'igniteui-angular';
 import { AbstractControl, FormGroup, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
 import { HIERARCHICAL_DATA } from '../shared/hierarchicalData';
 
@@ -40,7 +40,7 @@ export class GridValidationSampleComponent {
     public rowStyles = {
       background: (row: RowType) => {
           return row.validation.status === 'INVALID' ? '#FF000033' : '#00000000';
-      } 
+      }
   };
     public columns = [
         { field: 'ProductID' },
@@ -49,7 +49,14 @@ export class GridValidationSampleComponent {
         { field: 'UnitsInStock' }
     ];
 
-    public treeColumns = [
+    public treeColumns: {
+        field: string;
+        label: string;
+        width: number;
+        resizable: boolean;
+        dataType: GridColumnDataType;
+        hasSummary: boolean;
+    }[] = [
       { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false },
       { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true },
       { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false },
@@ -154,7 +161,7 @@ public hColumns2 = [
         // }
     }
 
-    public formCreateHandler(formGr: FormGroup) {
+    public formCreateHandler(formGr: IGridFormGroupCreatedEventArgs) {
         // can add validators here
         //    const prodName = formGr.get('ProductName');
         //    prodName.addValidators(forbiddenNameValidator(/bob/i));

src/app/grid/grid.sample.html

@@ -150,8 +150,8 @@ <h4>{{ col.field }}</h4>
                 <ng-template igxHeader let-column="column">
                     <p style="color: crimson">{{column.field}}</p>
                 </ng-template>
-                <ng-template igxCell let-item="item" let-ri="rowIndex" let-column="column">
-                    <igx-checkbox [checked]="item" (change)="grid2.updateCell($event.checkbox.checked, ri, column?.field)"></igx-checkbox>
+                <ng-template igxCell let-value let-cell="cell">
+                    <igx-checkbox [checked]="value" (change)="grid2.updateCell($event.checkbox.checked, cell.row.key, cell.column.field)"></igx-checkbox>
                 </ng-template>
             </igx-column>
             <igx-paginator [perPage]="10"></igx-paginator>
@@ -193,8 +193,8 @@ <h4 class="sample-title">Grid with templated cell remote data</h4>
                 <ng-template igxHeader let-column="column">
                     <p style="color: crimson">{{column.field</p>
                 </ng-template>
-                <ng-template igxCell let-item="item" let-ri="rowIndex" let-column="column">
-                    <igx-checkbox [checked]="item" (change)="grid3.updateCell($event.checkbox.checked, ri, column?.field)"></igx-checkbox>
+                <ng-template igxCell let-item let-cell="cell">
+                    <igx-checkbox [checked]="item" (change)="grid3.updateCell($event.checkbox.checked, cell.row.key, cell.column.field)"></igx-checkbox>
                 </ng-template>
             </igx-column>
             <igx-paginator [perPage]="10"></igx-paginator>