Merge branch 'master' into skrastev/fix-9158

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -6081,13 +6081,42 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             } else {
-                column.defaultWidth = this._columnWidth;
+                // D.K. March 29th, 2021 #9145 Consider min/max width when setting defaultWidth property
+                column.defaultWidth = this.getExtremumBasedColWidth(column);
                 column.resetCaches();
             }
         });
         this.resetCachedWidths();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    protected getExtremumBasedColWidth(column: IgxColumnComponent): string {
+        let width = this._columnWidth;
+        if (width && typeof width !== 'string') {
+            width = String(width);
+        }
+        const minWidth = width.indexOf('%') === -1 ? column.minWidthPx : column.minWidthPercent;
+        const maxWidth = width.indexOf('%') === -1 ? column.maxWidthPx : column.maxWidthPercent;
+        if (column.hidden) {
+            return width;
+        }
+
+        if (minWidth > parseFloat(width)) {
+            width = String(column.minWidth);
+        } else if (maxWidth < parseFloat(width)) {
+            width = String(column.maxWidth);
+        }
+
+        // if no px or % are defined in maxWidth/minWidth consider it px
+        if (width.indexOf('%') === -1 && width.indexOf('px') === -1) {
+            width += 'px';
+        }
+        return width;
+    }
+
     protected resetNotifyChanges() {
         this._cdrRequestRepaint = false;
         this._cdrRequests = false;

src/app/app.component.ts

@@ -268,6 +268,11 @@ export class AppComponent implements OnInit {
             icon: 'view_column',
             name: 'Grid FinJS'
         },
+        {
+            link: '/gridUpdates',
+            icon: 'view_column',
+            name: 'Grid Nested Props Update'
+        },
         {
             link: '/gridRemoteVirtualization',
             icon: 'view_column',

src/app/app.module.ts

@@ -144,6 +144,7 @@ import { MainComponent } from './grid-finjs/main.component';
 import { ControllerComponent } from './grid-finjs/controllers.component';
 import { CommonModule } from '@angular/common';
 import { GridEventsComponent } from './grid-events/grid-events.component';
+import { GridUpdatesComponent } from './grid-updates-test/grid-updates.component';
 
 const components = [
     ActionStripSampleComponent,
@@ -260,6 +261,7 @@ const components = [
     GridEventsComponent,
     GridFilteringComponent,
     GridFinJSComponent,
+    GridUpdatesComponent,
     MainComponent,
     ControllerComponent,
     GridExternalFilteringComponent,

src/app/app.routing.ts

@@ -85,6 +85,7 @@ import { AnimationsSampleComponent } from './styleguide/animations/animations.sa
 import { GridFormattingComponent } from './grid-formatting/grid-formatting.component';
 import { MainComponent } from './grid-finjs/main.component';
 import { GridEventsComponent } from './grid-events/grid-events.component';
+import { GridUpdatesComponent } from './grid-updates-test/grid-updates.component';
 
 const appRoutes = [
     {
@@ -405,6 +406,10 @@ const appRoutes = [
         path: 'gridEvents',
         component: GridEventsComponent
     },
+    {
+        path: 'gridUpdates',
+        component: GridUpdatesComponent
+    },
 ];
 
 export const routing = RouterModule.forRoot(appRoutes);

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

@@ -57,6 +57,9 @@
             </div>
         </ng-template>
     </igx-column>
+
+    <igx-column [field]="'Obj.Price'" [width]="'120px'"></igx-column>
+
     <igx-column [field]="'Chart'" [width]="'60px'" [hidden]="false" [filterable]='false'>
         <ng-template igxCell let-cell="cell" class="center-text">
             <button class="button-icon" igxButton="icon" igxRipple [igxRippleCentered]="true" tabindex="-1">

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

@@ -4,12 +4,14 @@ import {
     ViewChild } from '@angular/core';
 import {
     DefaultSortingStrategy,
+    GridSelectionMode,
+    IGroupingExpression,
     IgxGridComponent,
     SortingDirection
 } from 'igniteui-angular';
 import { Contract, REGIONS } from '../shared/financialData';
 
-const GROUPING_EXPRESSIONS = [{
+const GROUPING_EXPRESSIONS: IGroupingExpression[] = [{
     dir: SortingDirection.Desc,
     fieldName: 'Category',
     ignoreCase: false,
@@ -40,12 +42,12 @@ export class GridFinJSComponent {
     @Input()
     public data: any;
 
-    public selectionMode = 'multiple';
+    public selectionMode: GridSelectionMode = GridSelectionMode.multiple;
     public contracts = Contract;
     public regions = REGIONS;
     public columnFormat = { digitsInfo: '1.3-3'};
     public showToolbar = true;
-    public groupingExpressions = GROUPING_EXPRESSIONS;
+    public groupingExpressions: IGroupingExpression[] = GROUPING_EXPRESSIONS;
 
     constructor() { }