Skip to content

Commit 455b3b5

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Apply widths to inner igx-grid-header so it matches the cells.
1 parent 7e948df commit 455b3b5

File tree

8 files changed

+64
-38
lines changed

8 files changed

+64
-38
lines changed

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,7 @@
8383
<igx-grid-header-group class="igx-grid-thead__subgroup"
8484
[ngClass]="child.headerGroupClasses"
8585
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
86-
[column]="child"
87-
[style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.hasColumnLayouts"
88-
[style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.hasColumnLayouts">
86+
[column]="child">
8987
</igx-grid-header-group>
9088
}
9189
}
@@ -111,6 +109,7 @@
111109
[ghostHost]="grid.outlet.nativeElement"
112110
[attr.droppable]="true"
113111
(pointerdown)="activate()"
112+
[style.width]="column.resolvedWidth"
114113
[igxColumnMovingDrop]="column"
115114
[column]="column"
116115
>

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Z_INDEX = 9999;
3636
changeDetection: ChangeDetectionStrategy.OnPush,
3737
selector: 'igx-grid-header-group',
3838
templateUrl: './grid-header-group.component.html',
39-
imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
39+
imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupStylePipe]
4040
})
4141
export class IgxGridHeaderGroupComponent implements DoCheck {
4242

@@ -121,21 +121,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
121121
public filteringService: IgxFilteringService,
122122
protected platform: PlatformUtil) { }
123123

124-
@HostBinding('class.igx-grid-th--pinned')
125-
public get pinnedCss() {
126-
return this.isPinned;
127-
}
128-
129-
@HostBinding('class.igx-grid-th--pinned-last')
130-
public get pinnedLastCss() {
131-
return this.isLastPinned;
132-
}
133-
134-
@HostBinding('class.igx-grid-th--pinned-first')
135-
public get pinnedFirstCSS() {
136-
return this.isFirstPinned;
137-
}
138-
139124
@HostBinding('class.igx-grid__drag-col-header')
140125
public get headerDragCss() {
141126
return this.isHeaderDragged;

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@
6666
<igx-grid-header-group
6767
[ngClass]="column.headerGroupClasses"
6868
[ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
69-
[column]="column"
70-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"
71-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL">
69+
[column]="column">
7270
</igx-grid-header-group>
7371
}
7472
}
@@ -85,9 +83,7 @@
8583
<igx-grid-header-group
8684
[ngClass]="column.headerGroupClasses"
8785
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
88-
[column]="column"
89-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"
90-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL">
86+
[column]="column">
9187
</igx-grid-header-group>
9288
</ng-template>
9389

@@ -98,8 +94,6 @@
9894
[ngClass]="column.headerGroupClasses"
9995
[ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger"
10096
[column]="column"
101-
[style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"
102-
[style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:hasMRL"
10397
[style.left]="column.rightPinnedOffset">
10498
</igx-grid-header-group>
10599
}

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
3737
changeDetection: ChangeDetectionStrategy.OnPush,
3838
selector: 'igx-grid-header-row',
3939
templateUrl: './grid-header-row.component.html',
40-
imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe]
40+
imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe]
4141
})
4242
export class IgxGridHeaderRowComponent implements DoCheck {
4343

‎projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,43 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
5555
@ViewChild('sortIconContainer', { read: ElementRef })
5656
protected sortIconContainer: ElementRef;
5757

58+
@HostBinding('class.igx-grid-th--pinned')
59+
public get pinnedCss() {
60+
return this.isPinned;
61+
}
62+
63+
@HostBinding('class.igx-grid-th--pinned-last')
64+
public get pinnedLastCss() {
65+
return this.isLastPinned;
66+
}
67+
68+
@HostBinding('class.igx-grid-th--pinned-first')
69+
public get pinnedFirstCSS() {
70+
return this.isFirstPinned;
71+
}
72+
73+
/**
74+
* Gets whether the header group is stored in the last column in the pinned area.
75+
*/
76+
public get isLastPinned(): boolean {
77+
return !this.grid.hasColumnLayouts ? this.column.isLastPinned : false;
78+
}
79+
80+
/**
81+
* Gets whether the header group is stored in the first column of the right pinned area.
82+
*/
83+
public get isFirstPinned(): boolean {
84+
return !this.grid.hasColumnLayouts ? this.column.isFirstPinned : false;
85+
}
86+
87+
/**
88+
* Gets whether the header group is stored in a pinned column.
89+
*
90+
* @memberof IgxGridHeaderGroupComponent
91+
*/
92+
public get isPinned(): boolean {
93+
return this.column.pinned;
94+
}
5895
/**
5996
* @hidden
6097
*/
@@ -76,7 +113,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
76113
@HostBinding('attr.aria-sort')
77114
public get ariaSort() {
78115
return this.sortDirection === SortingDirection.Asc ? 'ascending'
79-
: this.sortDirection === SortingDirection.Desc ? 'descending' : null;
116+
: this.sortDirection === SortingDirection.Desc ? 'descending' : null;
80117
}
81118

82119
/**
@@ -300,7 +337,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
300337
}
301338

302339
protected isAdvancedFilterApplied() {
303-
if(!this.grid.advancedFilteringExpressionsTree) {
340+
if (!this.grid.advancedFilteringExpressionsTree) {
304341
return false;
305342
}
306343
return !!ExpressionsTreeUtil.find(this.grid.advancedFilteringExpressionsTree, this.column.field);

‎src/app/grid-percentage-columns/grid-percantge-widths.sample.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
11
<div class="wrapper">
22
<div class="sample-content">
33
<div class="sample-column">
4-
<igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="100%" height="600px">
5-
<igx-column field="ProductName" [pinned]="true" header="Product Name" width="19%" [dataType]="'string'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" [resizable]="true">
4+
<igx-grid [data]="data" [locale]="locale" [allowFiltering]="true" [moving]="true" [filterMode]="'excelStyleFilter'" width="420px" height="600px">
5+
<igx-column field="ProductName" [pinned]="false" header="Product Name" width="20%" [dataType]="'string'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" >
66
</igx-column>
7-
<igx-column field="UnitsInStock" [pinned]="false" header="Units In Stock" width="19%" dataType="currency" [pipeArgs]="pipeArgs" [sortable]="true" [hasSummary]="true" [editable]="true" [filterable]="true" [resizable]="true">
7+
<igx-column field="UnitsInStock" [pinned]="false" header="Units In Stock" width="20%" dataType="currency" [pipeArgs]="pipeArgs" [sortable]="true" [hasSummary]="true" [editable]="true" [filterable]="true" >
88
</igx-column>
9-
<igx-column field="OrderDate" header="Order Date" width="19%" [dataType]="'date'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" [resizable]="true">
9+
<igx-column field="OrderDate" header="Order Date" width="20%" [dataType]="'date'" [sortable]="true" [hasSummary]="false" [editable]="true" [filterable]="true" >
1010
<ng-template igxCell let-cell="cell" let-val>
1111
{{val | date:'dd/MM/yyyy'}}
1212
</ng-template>
1313
</igx-column>
14-
<igx-column field="Discontinued" [resizable]="true" header="Discontinued" width="15%" [dataType]="'boolean'"
14+
<igx-column field="Discontinued" header="Discontinued" width="10%" [dataType]="'boolean'" minWidth="20px"
1515
[sortable]="false" [hasSummary]="false" [editable]="true" [filterable]="false">
1616
</igx-column>
17-
<igx-column field="ReorderLevel" header="Reorder Level" [resizable]="true" dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="19%" [sortable]="false" [editable]="true" >
17+
<igx-column field="ReorderLevel" header="Reorder Level" dataType="percent" [pipeArgs]="pipeArgs" [hasSummary]="true" width="10%" [sortable]="false" [editable]="true" >
18+
</igx-column>
19+
<igx-column field="SupplierID" header="SupplierID" width="10%" [sortable]="false" [editable]="true">
1820
</igx-column>
19-
<igx-paginator [perPage]="10"></igx-paginator>
2021
</igx-grid>
2122
</div>
2223
</div>

‎src/app/grid-percentage-columns/grid-percantge-widths.sample.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,12 @@ igx-card {
77
text-transform: uppercase;
88
margin: 0.7rem 0 0.3rem;
99
}
10+
11+
::ng-deep igx-grid-cell {
12+
border-right: 1px solid lightgray;
13+
padding: 0 7px !important;
14+
}
15+
16+
::ng-deep igx-grid-header {
17+
padding: 0 7px !important;
18+
}

‎src/app/grid-percentage-columns/grid-percantge-widths.sample.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { IColumnPipeArgs, IgxButtonDirective, IgxCardComponent, IgxCardContentDi
99
providers: [],
1010
selector: 'app-grid-percantge-widths.sample',
1111
templateUrl: 'grid-percantge-widths.sample.html',
12-
imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe]
12+
styleUrls: ['grid-percantge-widths.sample.scss'],
13+
imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe]
1314
})
1415
export class GridColumnPercentageWidthsSampleComponent implements OnInit {
1516
@ViewChild('grid1', { read: IgxGridComponent, static: true })

0 commit comments

Comments
 (0)