Merge pull request #2737 from IgniteUI/zkolev/update-topics-based-on-sheet-master

Updates based on property sheet, overlaySettings and additional context

Author: zdrawku

package-lock.json

@@ -67,7 +67,7 @@
     "domino": "^2.1.4",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^12.0.3",
+    "igniteui-angular": "^12.0.7",
     "igniteui-angular-charts": "^11.1.1",
     "igniteui-angular-core": "^11.1.1",
     "igniteui-angular-excel": "^11.1.1",

package.json

@@ -14,8 +14,8 @@
     <div class="gridContainer">
         <igx-grid igxPreventDocumentScroll #grid [data]="data" [autoGenerate]="false" width="100%" height="560px" columnWidth="200px"
             [allowFiltering]="true">
-            <igx-column [field]="'ID'" dataType="string" [sortable]="true"></igx-column>
-            <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
+            <igx-column [field]="'ID'" dataType="string" [sortable]="true" [hidden]="true"></igx-column>
+            <igx-column [field]="'ContactName'" dataType="string" [sortable]="true" [disableHiding]="true" [hidden]="true"></igx-column>
             <igx-column [field]="'ContactTitle'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
             <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
             <igx-column [field]="'CompanyName'" dataType="string" [sortable]="true"></igx-column>

src/app/grid/grid-column-hiding-sample/grid-column-hiding-sample.component.html

@@ -14,8 +14,8 @@
         <igx-grid-toolbar>
             <igx-grid-toolbar-title>{{ toolbarTitle }}</igx-grid-toolbar-title>
             <igx-grid-toolbar-actions>
-                <igx-grid-toolbar-hiding *ngIf="enableHiding"></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-pinning *ngIf="enablePinning"></igx-grid-toolbar-pinning>
+                <igx-grid-toolbar-hiding *ngIf="enableHiding" [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
+                <igx-grid-toolbar-pinning *ngIf="enablePinning" [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
                 <igx-grid-toolbar-exporter *ngIf="enableExport"></igx-grid-toolbar-exporter>
             </igx-grid-toolbar-actions>
         </igx-grid-toolbar>

src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.html

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { GlobalPositionStrategy, scaleInCenter, scaleOutCenter, AbsoluteScrollStrategy, AutoPositionStrategy } from 'igniteui-angular';
 import { athletesData } from '../../data/athletesData';
 
 @Component({
@@ -13,6 +14,24 @@ export class GridToolbarSample2Component {
     enableHiding = true;
     enablePinning = true;
     enableExport = true;
+    public positionStrategyScaleCenter = new GlobalPositionStrategy({
+        openAnimation: scaleInCenter,
+        closeAnimation: scaleOutCenter
+    });
+    public overlaySettingsScaleCenter = {
+        positionStrategy: this.positionStrategyScaleCenter,
+        scrollStrategy: new AbsoluteScrollStrategy(),
+        modal: true,
+        closeOnEscape: true
+    };
+
+    public positionStrategyAuto = new AutoPositionStrategy();
+    public overlaySettingsAuto = {
+        positionStrategy: this.positionStrategyAuto,
+        scrollStrategy: new AbsoluteScrollStrategy(),
+        modal: false,
+        closeOnEscape: false
+    };
 
     constructor() {
         this.data = athletesData;

src/app/grid/grid-toolbar-sample/grid-toolbar-sample-2.component.ts

@@ -15,8 +15,8 @@
             </div>
         </ng-template>
     </igx-column>
-    <igx-column field="Debut" [sortable]="true" dataType="number" [formatter]="formatter"></igx-column>
-    <igx-column field="GrammyNominations" header="Grammy Nominations" [sortable]="true" dataType="number"></igx-column>
+    <igx-column field="Debut" [sortable]="true" dataType="number" [formatter]="formatter" [hidden]="true"></igx-column>
+    <igx-column field="GrammyNominations" header="Grammy Nominations" [sortable]="true" dataType="number" [hidden]="true"></igx-column>
     <igx-column field="GrammyAwards" header="Grammy Awards" [sortable]="true" dataType="number"></igx-column>
 
     <igx-row-island [key]="'Albums'" [autoGenerate]="false" hiddenColumnsText="Hidden">

src/app/hierarchical-grid/hierarchical-grid-column-hiding/hierarchical-grid-hiding.component.html

@@ -17,8 +17,8 @@
             <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
             <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
             <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
-            <igx-column [field]="'HireDate'" dataType="date" [sortable]="true"></igx-column>
-            <igx-column [field]="'Age'" dataType="number" [sortable]="true"></igx-column>
+            <igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
+            <igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
             <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
             <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
             <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>