Skip to content

Commit 45b7baa

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Fix mrl scenarios with both pin.
1 parent 71dec02 commit 45b7baa

File tree

6 files changed

+24
-34
lines changed

6 files changed

+24
-34
lines changed

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

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from '@angular/core';
99
import { IgxColumnComponent } from './column.component';
1010
import { IgxColumnGroupComponent } from './column-group.component';
11+
import { ColumnPinningPosition } from 'igniteui-angular';
1112

1213
/* blazorIndirectRender */
1314
/* blazorElement */
@@ -82,15 +83,10 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
8283
}
8384

8485
const unpinnedColumns = this.grid.unpinnedColumns.filter(c => c.columnLayout && !c.hidden);
85-
const pinnedColumns = this.grid.pinnedColumns.filter(c => c.columnLayout && !c.hidden);
86-
let vIndex = -1;
87-
88-
if (!this.pinned) {
89-
const indexInCollection = unpinnedColumns.indexOf(this);
90-
vIndex = indexInCollection === -1 ? -1 : pinnedColumns.length + indexInCollection;
91-
} else {
92-
vIndex = pinnedColumns.indexOf(this);
93-
}
86+
const pinnedStart = this.grid.pinnedStartColumns.filter(c => c.columnLayout && !c.hidden);
87+
const pinnedEndColumns = this.grid.pinnedEndColumns.filter(c => c.columnLayout && !c.hidden);
88+
const ordered = pinnedStart.concat(unpinnedColumns).concat(pinnedEndColumns);
89+
let vIndex = ordered.indexOf(this);
9490
this._vIndex = vIndex;
9591
return vIndex;
9692
}
@@ -158,18 +154,14 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
158154
public override populateVisibleIndexes() {
159155
this.childrenVisibleIndexes = [];
160156
const columns = this.grid?.pinnedColumns && this.grid?.unpinnedColumns
161-
? this.grid.pinnedColumns.concat(this.grid.unpinnedColumns)
157+
? this.grid.pinnedStartColumns.concat(this.grid.unpinnedColumns).concat(this.grid.pinnedEndColumns)
162158
: [];
163159
const orderedCols = columns
164160
.filter(x => !x.columnGroup && !x.hidden)
165-
.sort((a, b) => a.rowStart - b.rowStart || columns.indexOf(a.parent) - columns.indexOf(b.parent) || a.colStart - b.colStart);
161+
.sort((a, b) => columns.indexOf(a.parent) - columns.indexOf(b.parent) || a.rowStart - b.rowStart || a.colStart - b.colStart);
166162
this.children.forEach(child => {
167-
const rs = child.rowStart || 1;
168163
let vIndex = 0;
169-
// filter out all cols with larger rowStart
170-
const cols = orderedCols.filter(c =>
171-
!c.columnGroup && (c.rowStart || 1) <= rs);
172-
vIndex = cols.indexOf(child);
164+
vIndex = orderedCols.indexOf(child);
173165
this.childrenVisibleIndexes.push({ column: child, index: vIndex });
174166
});
175167
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2231,11 +2231,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
22312231
if (this.parent && !this.parent.pinned) {
22322232
return this.topLevelParent.pin(index, pinningPosition);
22332233
}
2234-
const pinningVisibleCollection = (pinningPosition || this.pinningPosition) === ColumnPinningPosition.Start ?
2234+
const targetPinPosition = pinningPosition !== null && pinningPosition !== undefined ? pinningPosition : this.pinningPosition;
2235+
const pinningVisibleCollection = targetPinPosition === ColumnPinningPosition.Start ?
22352236
grid.pinnedStartColumns : grid.pinnedEndColumns;
2236-
const pinningCollection = (pinningPosition || this.pinningPosition) === ColumnPinningPosition.Start ?
2237+
const pinningCollection = targetPinPosition === ColumnPinningPosition.Start ?
22372238
grid._pinnedStartColumns : grid._pinnedEndColumns;
2238-
const hasIndex = index !== undefined;
2239+
const hasIndex = index !== undefined && index !== null;
22392240
if (hasIndex && (index < 0 || index > pinningVisibleCollection.length)) {
22402241
return false;
22412242
}
@@ -2302,7 +2303,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
23022303
}
23032304

23042305
if (this.columnGroup) {
2305-
this.allChildren.forEach(child => child.pin(null, pinningPosition));
2306+
this.allChildren.forEach(child => child.pin(null, targetPinPosition));
23062307
grid.reinitPinStates();
23072308
}
23082309

@@ -2338,7 +2339,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
23382339
if (this.parent && this.parent.pinned) {
23392340
return this.topLevelParent.unpin(index);
23402341
}
2341-
const hasIndex = index !== undefined;
2342+
const hasIndex = index !== undefined && index !== null;
23422343
if (hasIndex && (index < 0 || index > grid._unpinnedColumns.length)) {
23432344
return false;
23442345
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343
@if (grid.hasColumnLayouts) {
4444
@if (pinnedStartColumns.length > 0) {
45-
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
45+
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedStartColumns, 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>
4848
<div class="igx-grid__mrl-block" [ngStyle]="{
@@ -55,7 +55,7 @@
5555
</div>
5656
</ng-template>
5757
@if (pinnedEndColumns.length > 0) {
58-
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
58+
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedEndColumns, this)"></ng-container>
5959
}
6060
}
6161
</ng-template>
@@ -65,7 +65,7 @@
6565
<div class="igx-grid__mrl-block"
6666
[class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
6767
[class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
68-
[style.left]="mrlRightPinnedOffset"
68+
[style.left]="col.rightPinnedOffset"
6969
[ngStyle]="{
7070
'grid-template-rows':col.getGridTemplate(true),
7171
'grid-template-columns':col.getGridTemplate(false),

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,6 @@ export class IgxGridRowComponent extends IgxRowDirective {
2626
};
2727
}
2828

29-
public get mrlRightPinnedOffset(): string {
30-
return this.grid.pinnedStartColumns.length > 0 ?
31-
- this.grid.pinnedStartWidth - this.grid.headerFeaturesWidth + 'px' :
32-
null;
33-
}
3429

3530
public getContextMRL(pinnedCols, row) {
3631
return {

‎src/app/grid-multi-row-layout/grid-mrl.sample.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<igx-buttongroup [values]="sizes" (selected)="selectDensity($event)" style="display: block; width: 500px"></igx-buttongroup>
44
</div>
55
<igx-grid #grid [data]="data" [rowEditable]="true" [rowSelection]="selectionMode"
6-
primaryKey="PostalCode" [width]="'100%'" [height]="'500px'">
6+
primaryKey="PostalCode" [width]="'100%'" [height]="'500px'" [moving]="true">
77
<igx-grid-toolbar>
88
<igx-grid-toolbar-actions>
99
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
@@ -13,17 +13,17 @@
1313
<igx-column-layout field='group1'>
1414
<igx-column [groupable]="true" [rowStart]="1" [colStart]="1" [rowEnd]="4" field="ID" [width]="'20%'" [resizable]="true" [minWidth]="'10%'" [maxWidth]="'30%'"></igx-column>
1515
</igx-column-layout>
16-
<igx-column-layout field='group2'>
16+
<igx-column-layout field='group2' [pinningPosition]="pinPos">
1717
<igx-column [editable]="true" [rowStart]="1" [colStart]="1" [colEnd]="3" field="CompanyName" [width]="'300px'" [resizable]="true"></igx-column>
1818
<igx-column [rowStart]="2" [colStart]="1" field="ContactName" [width]="'100px'" [resizable]="true"></igx-column>
1919
<igx-column [rowStart]="2" [colStart]="2" field="ContactTitle" [width]="'200px'" [resizable]="true"></igx-column>
2020
<igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" field="Address" [width]="'300px'" [resizable]="true"></igx-column>
2121
</igx-column-layout>
22-
<igx-column-layout>
22+
<igx-column-layout field="group3">
2323
<igx-column [rowStart]="1" [colStart]="1" [colEnd]="3" [rowEnd]="3" field="City" [width]="'300px'"></igx-column>
2424
<igx-column [rowStart]="3" [colStart]="1" [colEnd]="3" [sortable]="true" field="Region" [width]='"300px"'></igx-column>
2525
</igx-column-layout>
26-
<igx-column-layout>
26+
<igx-column-layout field="group4" [pinningPosition]="pinPos">
2727
<igx-column [rowStart]="1" [width]="'10%'" [resizable]="true" [colStart]="1" field="Country" [groupable]="true"></igx-column>
2828
<igx-column [rowStart]="1" [width]="'10%'" [resizable]="true" [colStart]="2" [sortable]="true" field="Phone"></igx-column>
2929
<igx-column [rowStart]="2" [resizable]="true" [colStart]="1" [colEnd]="3" [rowEnd]="4" [sortable]="true" field="Fax"></igx-column>

‎src/app/grid-multi-row-layout/grid-mrl.sample.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, HostBinding, ViewChild } from '@angular/core';
2-
import { GridSelectionMode, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxColumnComponent, IgxColumnLayoutComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular';
2+
import { ColumnPinningPosition, GridSelectionMode, IgxActionStripComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxColumnComponent, IgxColumnLayoutComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular';
33

44

55
@Component({
@@ -15,6 +15,8 @@ export class GridMRLSampleComponent {
1515
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
1616
private grid: IgxGridComponent;
1717

18+
public pinPos = ColumnPinningPosition.End;
19+
1820
public width = null;
1921
public cols: Array<any> = [
2022
{ field: 'ID', rowStart: 1, colStart: 1},

0 commit comments

Comments
 (0)