Skip to content

Commit 407357f

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Re-use cell templates.
1 parent 1361952 commit 407357f

File tree

11 files changed

+39
-57
lines changed

11 files changed

+39
-57
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
115115
dragging: boolean,
116116
index: number,
117117
mrl: boolean,
118+
merged: boolean,
118119
filteredOut: boolean,
119120
_rowData: any,
120121
_: number
@@ -126,7 +127,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
126127
[dirty, 'igx-grid__tr--edited'],
127128
[deleted, 'igx-grid__tr--deleted'],
128129
[dragging, 'igx-grid__tr--drag'],
129-
[mrl || _rowData.cellMergeMeta, 'igx-grid__tr--mrl'],
130+
[mrl || merged, 'igx-grid__tr--mrl'],
130131
// Tree grid only
131132
[filteredOut, 'igx-grid__tr--filtered']
132133
];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3662,7 +3662,7 @@ export abstract class IgxGridBaseDirective implements GridType,
36623662
* @internal
36633663
*/
36643664
public isRecordMerged(rec) {
3665-
return rec.cellMergeMeta;
3665+
return rec?.cellMergeMeta;
36663666
}
36673667

36683668
public getMergeCellOffset(rec) {

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

Lines changed: 6 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@
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
@if (this.hasMergedCells) {
35-
<div [style.height.px]=" this.data.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
35+
<div [style.height.px]=" this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
3636
class="igx-grid__mrl-block"
37-
[style.visibility]="this.data.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
37+
[style.visibility]="this.metaData.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
3838
[ngStyle]="{
39-
'grid-template-rows': this.data.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
39+
'grid-template-rows': this.metaData.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
4040
}">
41-
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : mergedCellTemplate; context: getContext(col, this)"></ng-container>
41+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : cellTemplate; context: getContext(col, this)"></ng-container>
4242
</div>
4343
}
4444
@else {
@@ -108,6 +108,7 @@
108108

109109
<ng-template #cellTemplate let-col>
110110
<igx-grid-cell
111+
[class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
111112
class="igx-grid__td igx-grid__td--fw"
112113
[class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
113114
[class.igx-grid__td--pinned]="col.pinned"
@@ -142,6 +143,7 @@
142143

143144
<ng-template #expandableCellTemplate let-col>
144145
<igx-expandable-grid-cell
146+
[class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
145147
[class.igx-grid__td--pinned]="col.pinned"
146148
class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
147149
[class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
@@ -171,38 +173,6 @@
171173
</igx-expandable-grid-cell>
172174
</ng-template>
173175

174-
<ng-template #mergedCellTemplate let-col>
175-
<igx-grid-cell
176-
class="igx-grid__td igx-grid__td--fw"
177-
[class.igx-grid__td--merged]="data.cellMergeMeta.get(col.field)?.rowSpan > 1"
178-
[class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
179-
[class.igx-grid__td--pinned]="col.pinned"
180-
[class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
181-
[ngClass]="col.cellClasses | igxCellStyleClasses:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
182-
[ngStyle]="col.cellStyles | igxCellStyles:data[col.field]:data:col.field:viewIndex:grid.pipeTrigger"
183-
[editMode]="col.editable && this.grid.crudService.targetInEdit(index, col.index)"
184-
[column]="col"
185-
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
186-
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
187-
[formatter]="col.formatter"
188-
[intRow]="this"
189-
[rowData]="data.recordRef"
190-
[visibleColumnIndex]="col.visibleIndex"
191-
[value]="data.recordRef | dataMapper:col.field:grid.pipeTrigger:data.recordRef[col.field]:col.hasNestedPath"
192-
[cellTemplate]="col.bodyTemplate"
193-
[cellValidationErrorTemplate]="col.errorTemplate"
194-
[lastSearchInfo]="grid.lastSearchInfo"
195-
[active]="isCellActive(col.visibleIndex)"
196-
[cellSelectionMode]="grid.cellSelection"
197-
[displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
198-
[style.min-width]="col.resolvedWidth"
199-
[style.max-width]="col.resolvedWidth"
200-
[style.flex-basis]="col.resolvedWidth"
201-
[width]="col.getCellWidth()"
202-
#cell>
203-
</igx-grid-cell>
204-
</ng-template>
205-
206176
<ng-template #mrlCellTemplate let-col>
207177
<igx-grid-cell
208178
class="igx-grid__td igx-grid__td--fw"

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050

5151

5252
@for (rowData of mergedData; track rowData; let rowIndex = $index) {
53-
<igx-grid-row [style.background]="'red'" [style.position]="'absolute'" [gridID]="id" [index]="rowIndex" [data]="rowData" [style.top.px]="getMergeCellOffset(rowData)"
54-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
53+
<igx-grid-row [style.position]="'absolute'" [gridID]="id" [index]="rowIndex" [data]="rowData.recordRef" [metaData]="rowData" [style.top.px]="getMergeCellOffset(rowData)"
54+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):false:rowData:pipeTrigger"
5555
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
5656
</igx-grid-row>
5757
}
@@ -105,15 +105,15 @@
105105
</ng-template>
106106
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
107107
</ng-container>
108-
<ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
109-
<igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData" [disabled]="disabledRow"
110-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
108+
<ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled" let-metaData="metaData">
109+
<igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData" [disabled]="disabledRow" [metaData]="metaData"
110+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger"
111111
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
112112
</igx-grid-row>
113113
</ng-template>
114-
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
114+
<ng-template #pinned_record_template let-rowIndex="index" let-rowData let-metaData="metaData">
115115
<igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData"
116-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
116+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger"
117117
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
118118
</igx-grid-row>
119119
</ng-template>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -960,13 +960,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
960960
}
961961
}
962962
return {
963-
$implicit: this.isGhostRecord(rowData) ? rowData.recordRef : rowData,
963+
$implicit: this.isGhostRecord(rowData) || this.isRecordMerged(rowData) ? rowData.recordRef : rowData,
964964
index: this.getDataViewIndex(rowIndex, pinned),
965965
templateID: {
966966
type: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
967967
id: null
968968
},
969-
disabled: this.isGhostRecord(rowData)
969+
disabled: this.isGhostRecord(rowData),
970+
metaData: rowData
970971
};
971972
}
972973

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,14 +75,14 @@
7575
</ng-template>
7676
<ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
7777
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [data]="rowData"
78-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
78+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):false:rowData:pipeTrigger"
7979
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
8080
</igx-hierarchical-grid-row>
8181
</ng-template>
8282

8383
<ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
8484
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData"
85-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
85+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):false:rowData:pipeTrigger"
8686
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row #pinnedRow>
8787
</igx-hierarchical-grid-row>
8888
</ng-template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
</ng-template>
5353
<ng-template #record_template let-rowIndex="index" let-rowData>
5454
<igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData"
55-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
55+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):false:rowData:pipeTrigger"
5656
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
5757
</igx-pivot-row>
5858
</ng-template>

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,12 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
4545
@HostBinding('attr.role')
4646
public role = 'row';
4747

48+
/**
49+
* @hidden
50+
*/
51+
@Input()
52+
public metaData: any;
53+
4854
/**
4955
* The data passed to the row component.
5056
*
@@ -118,7 +124,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
118124
}
119125

120126
public get hasMergedCells(): boolean {
121-
return this.grid.isRecordMerged(this.data);
127+
return this.grid.isRecordMerged(this.metaData);
122128
}
123129

124130
/**
@@ -597,7 +603,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
597603
}
598604

599605
protected getMergeCellSpan(col: ColumnType){
600-
const rowCount = this.data.cellMergeMeta.get(col.field).rowSpan;
606+
const rowCount = this.metaData.cellMergeMeta.get(col.field).rowSpan;
601607
let sizeSpans = "";
602608
for (let index = this.index; index < this.index + rowCount; index++) {
603609
const size = this.grid.verticalScrollContainer.getSizeAt(index);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,13 @@
7878
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
7979
<ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
8080
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow"
81-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
81+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
8282
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
8383
</igx-tree-grid-row>
8484
</ng-template>
8585
<ng-template #pinned_record_template let-rowIndex="index" let-rowData>
8686
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData"
87-
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
87+
[ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
8888
[ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
8989
</igx-tree-grid-row>
9090
</ng-template>

‎src/app/grid-cellMerging/grid-cellMerging.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h4 class="sample-title">Grid with cell merge</h4>
2-
<igx-grid [data]="data" width="800px" height="550px" [moving]="true" [cellMergeMode]="'always'" >
2+
<igx-grid [data]="data" width="800px" height="550px" [primaryKey]="'ProductID'" [moving]="true" [cellMergeMode]="'always'" >
33
<igx-column field="ProductID" header="Product ID" width="200px">
44
<ng-template igxCell let-cell="cell" let-val>
55
<div>
@@ -12,12 +12,14 @@ <h4 class="sample-title">Grid with cell merge</h4>
1212
</div>
1313
</ng-template>
1414
</igx-column>
15-
<igx-column field="ReorderLevel" width="200px" [merge]="true">
15+
<igx-column field="ReorderLevel" width="200px" [merge]="true" editable="true">
1616
</igx-column>
1717
<igx-column required field="ProductName" width="200px" [merge]="true">
1818
</igx-column>
1919
<igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [merge]="true">
2020
</igx-column>
2121
<igx-column field="OrderDate" width="200px">
2222
</igx-column>
23+
<igx-paginator [perPage]="20">
24+
</igx-paginator>
2325
</igx-grid>

0 commit comments

Comments
 (0)