chore(demos): cleanup type check errors

damyanpetev · damyanpetev · commit e3227c3399c2 · 2022-11-09T10:54:21.000+02:00
diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.html b/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>
diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.ts b/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];
diff --git a/src/app/grid-filter-template/grid-filter-template.sample.ts b/src/app/grid-filter-template/grid-filter-template.sample.ts
@@ -5,9 +5,10 @@ import {
     IgxNumberFilteringOperand,
     IgxDateFilteringOperand,
     IgxStringFilteringOperand,
-    IgxColumnComponent,
+    // ColumnType,
     GridSelectionMode
 } from 'igniteui-angular';
+import { ColumnType } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
 
 @Component({
     providers: [],
@@ -511,7 +512,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;
 
diff --git a/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.html b/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%'" [autoGenerate]='true' (dataPreLoad)="handlePreLoad()" [clipboardOptions]="clipboardOptions"
-    (sortingDone)="processData(true)" (columnInit)='onColumnInit($event)'>
+    <igx-grid [batchEditing]="true" #grid1 [data]="remoteData | async" height="500px" width="100%" [autoGenerate]="true" (dataPreLoad)="handlePreLoad()" [clipboardOptions]="clipboardOptions"
+    (sortingDone)="processData(true)" (columnInit)="onColumnInit($event)">
     </igx-grid>
 </div>
diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/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">
diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/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 = [{
diff --git a/src/app/grid-validation/grid-validation.sample.component.html b/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>
diff --git a/src/app/grid-validation/grid-validation.sample.component.ts b/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));
diff --git a/src/app/grid/grid.sample.html b/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>
diff --git a/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html b/src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html
@@ -15,7 +15,7 @@
     <igx-column field="Phone"></igx-column>
     <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland1)" [emptyGridMessage]="''">
         <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
-            <igx-grid-toolbar-title>Child Toolbar - Level {{ grid.parentIsland.level }}</igx-grid-toolbar-title>
+            <igx-grid-toolbar-title>Child Toolbar - Level 2</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
                 <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
             </igx-grid-toolbar-actions>
@@ -27,7 +27,7 @@
         <igx-column field="ShipAddress"></igx-column>
         <igx-row-island #rowIsland2 [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowSelection]='selectionMode' (gridCreated)="gridCreated($event, rowIsland2)" [emptyGridMessage]="''">
             <igx-grid-toolbar [grid]="grid" *igxGridToolbar="let grid">
-                <igx-grid-toolbar-title>Child Toolbar - Level {{ grid.parentIsland.level }}</igx-grid-toolbar-title>
+                <igx-grid-toolbar-title>Child Toolbar - Level 3</igx-grid-toolbar-title>
                 <igx-grid-toolbar-actions>
                     <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                     <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
@@ -180,4 +180,4 @@ <h4 class="sample-title">Sample 4</h4>
             <igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
         </igx-row-island>
     </igx-hierarchical-grid>
-</div>
+</div>
diff --git a/src/app/pivot-grid-noop/pivot-grid-noop.sample.html b/src/app/pivot-grid-noop/pivot-grid-noop.sample.html
@@ -1,11 +1,11 @@
 <igx-pivot-grid
     #grid1
-    [igxGridState]="options"
+    igxGridState
     [data]="mockData"
     [sortStrategy]='myStrategy'
     [pivotConfiguration]="pivotConfigHierarchy"
     height="500px">
 </igx-pivot-grid>
 <button igxButton="outlined" (click)="saveState()">SAVE STATE</button>
 <button igxButton="raised" (click)="restoreState()">RESTORE STATE(string)</button>
-<button igxButton="raised" (click)="restoreStateFromObject()">RESTORE STATE(object)</button>
+<button igxButton="raised" (click)="restoreStateFromObject()">RESTORE STATE(object)</button>
diff --git a/src/app/pivot-grid-state/pivot-grid-state.sample.html b/src/app/pivot-grid-state/pivot-grid-state.sample.html
@@ -11,7 +11,6 @@
             [data]="origData"
             [width]="'100%'"
             [height]="'800px'"
-            [displayDensity]="gridDensity"
             [superCompactMode]="true"
             [defaultExpandState]="true"
             [rowSelection]='"single"'
diff --git a/src/app/pivot-grid/pivot-grid.sample.html b/src/app/pivot-grid/pivot-grid.sample.html
@@ -65,7 +65,7 @@
             [data]="origData"
             [width]="'100%'"
             [height]="'100%'"
-            [displayDensity]="gridDensity"
+            [displayDensity]="density"
             [superCompactMode]="gridDensity === 'superCompact'"
             [defaultExpandState]="true"
             [rowSelection]='"single"'
diff --git a/src/app/pivot-grid/pivot-grid.sample.ts b/src/app/pivot-grid/pivot-grid.sample.ts
@@ -53,7 +53,13 @@ export class IgxTotalSaleAggregate {
 })
 export class PivotGridSampleComponent {
     @ViewChild('grid1', { static: true }) public grid1: IgxPivotGridComponent;
-    public gridDensity = 'superCompact';
+    public gridDensity: DisplayDensity | 'superCompact' = 'superCompact';
+    public get density(): DisplayDensity {
+        if (this.gridDensity === 'superCompact') {
+            return 'compact';
+        }
+        return this.gridDensity;
+    }
 
     public filterExpTree = new FilteringExpressionsTree(FilteringLogic.And);
 
@@ -114,7 +120,6 @@ export class PivotGridSampleComponent {
             },
         ],
         rows: [
-            
             {
                 memberName: 'SellerName',
                 enabled: true,
@@ -271,7 +276,7 @@ export class PivotGridSampleComponent {
         this.selected = allEnabled;
     }
 
-    public setDensity(density: DisplayDensity) {
+    public setDensity(density: DisplayDensity | 'superCompact') {
         this.gridDensity = density;
     }
 
diff --git a/src/app/radio/radio.sample.html b/src/app/radio/radio.sample.html
@@ -33,17 +33,17 @@ <h6 igxCardHeaderTitle>Reserve your dream vacation at {{ opt }}</h6>
     <article class="sample-column">
         <h4 class="sample-title">Radio group without data model (Vertical Alignment)</h4>
         <igx-radio-group #radioGroupZZ name="radiogroupZZ" value="Bar" required (change)="onRadioChange($event)" [alignment]="alignment">
-            <igx-radio class="radio-sample" *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}">
+            <igx-radio class="radio-sample" *ngFor="let item of ['Foo', 'Bar', 'Baz']" value="{{item}}" [disabled]="disabled">
                 {{item}}
             </igx-radio>
         </igx-radio-group>
         <label>
-            <input type="checkbox" [checked]="radioGroup.disabled" (change)="radioGroup.disabled = !radioGroup.disabled"> Disabled
+            <input type="checkbox" [checked]="disabled" (change)="disabled = !disabled"> Disabled
         </label>
         <label>
             <input type="checkbox" [checked]="radioGroup.required" (change)="radioGroup.required = !radioGroup.required"> Required
         </label>
-        Disabled = '{{radioGroup.disabled}}'<br>
+        Disabled = '{{disabled}}'<br>
         Required = '{{radioGroup.required}}'<br>
         SelectedValue = '{{selectedValue}}'<br>
         <button igxButton type="button" (click)="onBtnClick()" style="width: 200px">Select 'Baz'</button>
diff --git a/src/app/radio/radio.sample.ts b/src/app/radio/radio.sample.ts
@@ -20,6 +20,7 @@ class Person {
 export class RadioSampleComponent implements AfterContentInit {
     @ViewChild('radioGroupZZ', { read: IgxRadioGroupDirective, static: true })
     public radioGroup: IgxRadioGroupDirective;
+    public disabled = false;
 
     public selectedValue: any;
     public options = [0, 1, 2, 3, 4];
