Merge branch '7.0.x' into mvenkov/add-inheritdoc-to-comments-7.0.x

IgniteUI · Dec 7, 2018 · 1d3d692 · 1d3d692
2 parents b098a42 + 9cc1880
commit 1d3d692
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 6 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -2391,6 +2391,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
+     * Used internally for restricting header group component width.
+     * The values below depend on the header cell default right/left padding values.
+	 * @memberof IgxGridBaseComponent
+     */
+    get defaultHeaderGroupMinWidth(): number {
+        if (this.isCosy()) {
+            return 32;
+        } else if (this.isCompact()) {
+            return 24;
+        } else {
+            return 48;
+        }
+    }
+
     /**
      * Returns the maximum width of the container for the pinned `IgxColumnComponent`s.
      * ```typescript
@@ -2475,6 +2491,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index);
     }
 
+    /**
+     * Returns the `width` to be set on `IgxGridHeaderGroupComponent`.
+	 * @memberof IgxGridBaseComponent
+     */
+    public getHeaderGroupWidth(column: IgxColumnComponent): string {
+
+        const minWidth = this.defaultHeaderGroupMinWidth;
+        if (parseInt(column.width, 10) < minWidth) {
+            return minWidth.toString();
+        }
+
+        return column.width;
+    }
+
     /**
      * Returns the `IgxColumnComponent` by field name.
      * ```typescript

diff --git a/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts
@@ -70,7 +70,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
     @HostBinding('style.min-width')
     @HostBinding('style.flex-basis')
     get width() {
-        return this.column.width;
+        return this.grid.getHeaderGroupWidth(this.column);
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts
@@ -19,6 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => {
     configureTestSuite();
     const COLUMN_HEADER_CLASS = '.igx-grid__th';
     const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
+    const COLUMN_FILTER_CELL_CLASS = 'igx-grid-filtering-cell';
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -28,7 +29,8 @@ describe('IgxGrid - Deferred Column Resizing', () => {
                 GridFeaturesComponent,
                 LargePinnedColGridComponent,
                 NullColumnsComponent,
-                MultiColumnHeadersComponent
+                MultiColumnHeadersComponent,
+                ColGridComponent
             ],
             imports: [
                 FormsModule,
@@ -719,6 +721,27 @@ describe('IgxGrid - Deferred Column Resizing', () => {
         fixture.detectChanges();
         expect(column.width).toEqual('111px');
     }));
+
+    it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ColGridComponent);
+        fixture.detectChanges();
+
+        const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+        const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
+        const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_CLASS ));
+
+        expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49);
+        expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+        expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(49);
+        expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+        expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
+        expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
+    }));
 });
 
 @Component({
@@ -827,3 +850,23 @@ export class NullColumnsComponent implements OnInit {
         this.data = SampleTestData.contactInfoData();
     }
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
+        `<igx-column [field]="'Items'" [width]="'40px'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'ID'" [width]="'50px'" [header]="'ID'" [filterable]="true"></igx-column>
+         <igx-column [field]="'ProductName'" [width]="'30px'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'Test'" width="300px" dataType="string" [resizable]="true"></igx-column>
+         <igx-column [field]="'Downloads'" width="300px" dataType="number" [resizable]="true"></igx-column>
+         <igx-column [field]="'Category'" width="300px" dataType="string" [resizable]="true"></igx-column>`
+    )
+})
+export class ColGridComponent implements OnInit {
+    data = [];
+
+    @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+    ngOnInit() {
+        this.data = SampleTestData.generateProductData(10);
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -54,12 +54,12 @@
         </ng-container>
         <ng-container *ngIf="pinnedColumns.length > 0">
             <ng-template ngFor let-col [ngForOf]="onlyTopLevel(pinnedColumns)">
-                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </ng-container>
         <ng-template igxGridFor let-col [igxGridForOf]="onlyTopLevel(unpinnedColumns)" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
             [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #headerContainer>
-            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
         </ng-template>
         <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="right" class="igx-grid__scroll-on-drag-right"></span>
     </div>

diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -31,12 +31,12 @@
         </ng-container>
         <ng-container *ngIf="pinnedColumns.length > 0">
             <ng-template ngFor let-col [ngForOf]="onlyTopLevel(pinnedColumns)">
-                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </ng-container>
         <ng-template igxGridFor let-col [igxGridForOf]="onlyTopLevel(unpinnedColumns)" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
             [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #headerContainer>
-            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
         </ng-template>
         <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="right" class="igx-grid__scroll-on-drag-right"></span>
     </div>