Skip to content

Commit d300ee5

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Initial template updates.
1 parent ddf757a commit d300ee5

17 files changed

+109
-81
lines changed

‎projects/igniteui-angular/src/lib/grids/columns/column.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1047,7 +1047,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
10471047
@WatchColumnChanges()
10481048
@Input()
10491049
public get pinningPosition(): ColumnPinningPosition {
1050-
return this._pinningPosition || this.grid.pinning.columns;
1050+
const userSet = this._pinningPosition !== null && this._pinningPosition !== undefined;
1051+
return userSet ? this._pinningPosition : this.grid.pinning.columns;
10511052
}
10521053

10531054
/**
@@ -1619,8 +1620,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
16191620

16201621
/** @hidden @internal **/
16211622
public get rightPinnedOffset(): string {
1622-
return this.pinned && !this.grid.isPinningToStart ?
1623-
- this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
1623+
return this.pinned && this.pinningPosition === ColumnPinningPosition.End ?
1624+
- this.grid.pinnedEndWidth - this.grid.pinnedStartWidth - this.grid.headerFeaturesWidth + 'px' :
16241625
null;
16251626
}
16261627

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -781,8 +781,10 @@ export interface GridType extends IGridDataBindable {
781781
/** Indicates if the column of the grid is in drag mode */
782782
columnInDrag: any;
783783
/** @hidden @internal */
784-
/** The width of pinned element */
785-
pinnedWidth: number;
784+
/** The width of pinned element for pinning at start. */
785+
pinnedStartWidth: number;
786+
/** The width of pinned element for pinning at end. */
787+
pinnedEndWidth: number;
786788
/** @hidden @internal */
787789
/** The width of unpinned element */
788790
unpinnedWidth: number;
@@ -917,6 +919,10 @@ export interface GridType extends IGridDataBindable {
917919
unpinnedColumns: ColumnType[];
918920
/** An array of columns, but it counts only the ones that are pinned */
919921
pinnedColumns: ColumnType[];
922+
/** An array of columns, but it counts only the ones that are pinned to the start. */
923+
pinnedStartColumns: ColumnType[];
924+
/** An array of columns, but it counts only the ones that are pinned to the end. */
925+
pinnedEndColumns: ColumnType[];
920926
/** represents an array of the headers of the columns */
921927
/** @hidden @internal */
922928
headerCellList: any[];

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

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3267,7 +3267,8 @@ export abstract class IgxGridBaseDirective implements GridType,
32673267
private _totalWidth = NaN;
32683268
private _pinnedVisible = [];
32693269
private _unpinnedVisible = [];
3270-
private _pinnedWidth = NaN;
3270+
private _pinnedStartWidth = NaN;
3271+
private _pinnedEndWidth = NaN;
32713272
private _unpinnedWidth = NaN;
32723273
private _visibleColumns = [];
32733274
private _columnGroups = false;
@@ -3914,7 +3915,8 @@ export abstract class IgxGridBaseDirective implements GridType,
39143915
*/
39153916
public resetCachedWidths() {
39163917
this._unpinnedWidth = NaN;
3917-
this._pinnedWidth = NaN;
3918+
this._pinnedStartWidth = NaN;
3919+
this._pinnedEndWidth = NaN;
39183920
this._totalWidth = NaN;
39193921
}
39203922

@@ -4422,12 +4424,21 @@ export abstract class IgxGridBaseDirective implements GridType,
44224424
}
44234425

44244426
/** @hidden @internal */
4425-
public get pinnedWidth() {
4426-
if (!isNaN(this._pinnedWidth)) {
4427-
return this._pinnedWidth;
4427+
public get pinnedStartWidth() {
4428+
if (!isNaN(this._pinnedStartWidth)) {
4429+
return this._pinnedStartWidth;
44284430
}
4429-
this._pinnedWidth = this.getPinnedWidth();
4430-
return this._pinnedWidth;
4431+
this._pinnedStartWidth = this.getPinnedStartWidth();
4432+
return this._pinnedStartWidth;
4433+
}
4434+
4435+
/** @hidden @internal */
4436+
public get pinnedEndWidth() {
4437+
if (!isNaN(this._pinnedEndWidth)) {
4438+
return this._pinnedEndWidth;
4439+
}
4440+
this._pinnedEndWidth = this.getPinnedEndWidth();
4441+
return this._pinnedEndWidth;
44314442
}
44324443

44334444
/** @hidden @internal */
@@ -4526,9 +4537,9 @@ export abstract class IgxGridBaseDirective implements GridType,
45264537
* const pinnedColumns = this.grid.pinnedStartColumns.
45274538
* ```
45284539
*/
4529-
public get pinnedStartColumns(): IgxColumnComponent[] {
4530-
return this._pinnedStartColumns.filter(col => !col.hidden);
4531-
}
4540+
public get pinnedStartColumns(): IgxColumnComponent[] {
4541+
return this._pinnedStartColumns.filter(col => !col.hidden);
4542+
}
45324543

45334544
/**
45344545
* Gets an array of the pinned to the right `IgxColumnComponent`s.
@@ -4538,9 +4549,9 @@ export abstract class IgxGridBaseDirective implements GridType,
45384549
* const pinnedColumns = this.grid.pinnedEndColumns.
45394550
* ```
45404551
*/
4541-
public get pinnedEndColumns(): IgxColumnComponent[] {
4542-
return this._pinnedEndColumns.filter(col => !col.hidden);
4543-
}
4552+
public get pinnedEndColumns(): IgxColumnComponent[] {
4553+
return this._pinnedEndColumns.filter(col => !col.hidden);
4554+
}
45444555

45454556
/* csSuppress */
45464557
/**
@@ -5587,21 +5598,40 @@ export abstract class IgxGridBaseDirective implements GridType,
55875598
* ```
55885599
* @param takeHidden If we should take into account the hidden columns in the pinned area.
55895600
*/
5590-
public getPinnedWidth(takeHidden = false) {
5591-
const fc = takeHidden ? this._pinnedColumns : this.pinnedColumns;
5601+
public getPinnedStartWidth(takeHidden = false) {
5602+
const fc = takeHidden ? this._pinnedStartColumns : this.pinnedStartColumns;
55925603
let sum = 0;
55935604
for (const col of fc) {
55945605
if (col.level === 0) {
55955606
sum += parseFloat(col.calcWidth);
55965607
}
55975608
}
5598-
if (this.isPinningToStart) {
5599-
sum += this.featureColumnsWidth();
5600-
}
5609+
// includes features at start
5610+
sum += this.featureColumnsWidth();
56015611

56025612
return sum;
56035613
}
56045614

5615+
/**
5616+
* Gets calculated width of the pinned areas.
5617+
*
5618+
* @example
5619+
* ```typescript
5620+
* const pinnedWidth = this.grid.getPinnedWidth();
5621+
* ```
5622+
* @param takeHidden If we should take into account the hidden columns in the pinned area.
5623+
*/
5624+
public getPinnedEndWidth(takeHidden = false) {
5625+
const fc = takeHidden ? this._pinnedEndColumns : this.pinnedEndColumns;
5626+
let sum = 0;
5627+
for (const col of fc) {
5628+
if (col.level === 0) {
5629+
sum += parseFloat(col.calcWidth);
5630+
}
5631+
}
5632+
return sum;
5633+
}
5634+
56055635
/**
56065636
* Gets calculated width of the pinned left area.
56075637
*
@@ -5624,26 +5654,6 @@ export abstract class IgxGridBaseDirective implements GridType,
56245654
return sum;
56255655
}
56265656

5627-
/**
5628-
* Gets calculated width of the pinned left area.
5629-
*
5630-
* @example
5631-
* ```typescript
5632-
* const pinnedWidth = this.grid.getPinnedWidth();
5633-
* ```
5634-
* @param takeHidden If we should take into account the hidden columns in the pinned area.
5635-
*/
5636-
public getPinnedRightWidth(takeHidden = false) {
5637-
const fc = takeHidden ? this._pinnedEndColumns : this.pinnedEndColumns;
5638-
let sum = 0;
5639-
for (const col of fc) {
5640-
if (col.level === 0) {
5641-
sum += parseFloat(col.calcWidth);
5642-
}
5643-
}
5644-
return sum;
5645-
}
5646-
56475657
/**
56485658
* @hidden @internal
56495659
*/
@@ -7204,11 +7214,8 @@ export abstract class IgxGridBaseDirective implements GridType,
72047214
if (this.hasVerticalScroll() && !this.isPercentWidth) {
72057215
width -= this.scrollSize;
72067216
}
7207-
if (!this.isPinningToStart) {
7208-
width -= this.featureColumnsWidth();
7209-
}
72107217

7211-
return width - this.getPinnedWidth(takeHidden);
7218+
return width - (this.getPinnedStartWidth(takeHidden) + this.getPinnedEndWidth(takeHidden));
72127219
}
72137220

72147221
/**
@@ -7336,11 +7343,11 @@ export abstract class IgxGridBaseDirective implements GridType,
73367343
protected reinitPinStates() {
73377344
this._pinnedColumns = this._columns
73387345
.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
7339-
this._pinnedStartColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.Start)
7346+
this._pinnedStartColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.Start)
73407347
.sort((a, b) => this._pinnedStartColumns.indexOf(a) - this._pinnedStartColumns.indexOf(b));
7341-
this._pinnedEndColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.End)
7348+
this._pinnedEndColumns = this._columns.filter((c) => c.pinned && c.pinningPosition === ColumnPinningPosition.End)
73427349
.sort((a, b) => this._pinnedEndColumns.indexOf(a) - this._pinnedEndColumns.indexOf(b));
7343-
this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter((c) => !c.pinned) :
7350+
this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter((c) => !c.pinned) :
73447351
this._columns.filter((c) => !c.pinned)
73457352
.sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));
73467353
}

‎projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2180,7 +2180,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
21802180
const firstUnpinnedCell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
21812181
expect(firstUnpinnedCell.active).toBe(true);
21822182
const diff = firstUnpinnedCell.nativeElement.getBoundingClientRect().left -
2183-
grid.pinnedWidth - grid.tbody.nativeElement.getBoundingClientRect().left;
2183+
grid.pinnedStartWidth - grid.tbody.nativeElement.getBoundingClientRect().left;
21842184
expect(diff).toBe(0);
21852185

21862186
// TODO: Rest of the test needs to be finished

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,23 +25,23 @@
2525

2626

2727
@if (!grid.hasColumnLayouts) {
28-
@if (pinnedColumns.length > 0 && grid.isPinningToStart) {
29-
@for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
28+
@if (pinnedStartColumns.length > 0) {
29+
@for (col of pinnedStartColumns | igxNotGrouped; track trackPinnedColumn(col)) {
3030
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
3131
}
3232
}
3333
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
3434
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
3535
</ng-template>
36-
@if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
37-
@for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) {
36+
@if (pinnedEndColumns.length > 0) {
37+
@for (col of pinnedEndColumns | igxNotGrouped; track trackPinnedColumn(col)) {
3838
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
3939
}
4040
}
4141
}
4242

4343
@if (grid.hasColumnLayouts) {
44-
@if (pinnedColumns.length > 0 && grid.isPinningToStart) {
44+
@if (pinnedStartColumns.length > 0) {
4545
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
4646
}
4747
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
@@ -54,7 +54,7 @@
5454
}
5555
</div>
5656
</ng-template>
57-
@if (pinnedColumns.length > 0 && !grid.isPinningToStart) {
57+
@if (pinnedEndColumns.length > 0) {
5858
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
5959
}
6060
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class IgxGridRowComponent extends IgxRowDirective {
2828

2929
public get mrlRightPinnedOffset(): string {
3030
return !this.grid.isPinningToStart ?
31-
- this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
31+
- this.grid.pinnedStartWidth - this.grid.headerFeaturesWidth + 'px' :
3232
null;
3333
}
3434

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
@if (moving && columnInDrag && pinnedColumns.length > 0) {
4444
<span
4545
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
46-
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
46+
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
4747
}
4848
<ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
4949
</ng-container>
@@ -181,12 +181,12 @@
181181
</div>
182182

183183
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
184-
<div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div>
184+
<div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
185185
<div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
186186
<ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
187187
</ng-template>
188188
</div>
189-
<div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
189+
<div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
190190
</div>
191191

192192
<div class="igx-grid__footer" #footer>

‎projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3267,7 +3267,7 @@ describe('IgxGrid - GroupBy #grid', () => {
32673267
// verify width is recalculated
32683268
const indentation = fix.debugElement.query(By.css('.igx-grid__header-indentation'));
32693269

3270-
expect(grid.pinnedWidth).toEqual(parseInt(window.getComputedStyle(indentation.nativeElement).width, 10));
3270+
expect(grid.pinnedStartWidth).toEqual(parseInt(window.getComputedStyle(indentation.nativeElement).width, 10));
32713271
expect(grid.unpinnedWidth).toEqual(400 - parseInt(window.getComputedStyle(indentation.nativeElement).width, 10) - grid.scrollSize);
32723272

32733273
grid.clearGrouping();
@@ -3281,7 +3281,7 @@ describe('IgxGrid - GroupBy #grid', () => {
32813281
- parseInt(window.getComputedStyle(gridScroll.nativeElement).height, 10);
32823282

32833283
expect(grid.calcHeight).toEqual(expectedHeight);
3284-
expect(grid.pinnedWidth).toEqual(0);
3284+
expect(grid.pinnedStartWidth).toEqual(0);
32853285
const expectedWidth = parseInt(grid.width, 10) - grid.scrollSize;
32863286
expect(grid.unpinnedWidth).toEqual(expectedWidth);
32873287
}));

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66

77
<!-- Left column moving area -->
88
@if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {
9-
<span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedWidth"
9+
<span id="left" class="igx-grid__scroll-on-drag-left" droppable="true" [style.left.px]="grid.pinnedStartWidth"
1010
[igxColumnMovingDrop]="headerContainer"></span>
1111
}
1212
@if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {
13-
<span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedWidth"
13+
<span id="left" class="igx-grid__scroll-on-drag-pinned" droppable="true" [style.left.px]="grid.pinnedStartWidth"
1414
[igxColumnMovingDrop]="headerContainer"></span>
1515
}
1616

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
@if (moving && columnInDrag && pinnedColumns.length > 0) {
3030
<span
3131
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
32-
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
32+
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedStartWidth"></span>
3333
}
3434
<ng-template #pinnedRecordsTemplate>
3535
@if (data
@@ -151,12 +151,12 @@
151151
</div>
152152

153153
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
154-
<div class="igx-grid__scroll-start" [style.width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth" [style.min-width.px]="isPinningToStart ? pinnedWidth : headerFeaturesWidth"></div>
154+
<div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
155155
<div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
156156
<ng-template igxGridFor [igxGridForOf]="[]" #scrollContainer>
157157
</ng-template>
158158
</div>
159-
<div class="igx-grid__scroll-end" [style.width.px]="pinnedWidth" [style.min-width.px]="pinnedWidth" [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
159+
<div class="igx-grid__scroll-end" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
160160
</div>
161161

162162
<div class="igx-grid__footer" #footer>

0 commit comments

Comments
 (0)