Skip to content

Commit 8f4a6ed

Browse files
ddinchevaddincheva
committed
feat(*): add rowClasses and rowStyles properties to the data row element #9969 
1 parent 021540a commit 8f4a6ed

File tree

6 files changed

+72
-7
lines changed

6 files changed

+72
-7
lines changed

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,15 @@
9393
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
9494
</ng-container>
9595
<ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled" let-isAddRow="addRow">
96-
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
96+
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" [addRow]="isAddRow"
97+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
98+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger" #row>
9799
</igx-grid-row>
98100
</ng-template>
99101
<ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
100-
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
102+
<igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow"
103+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
104+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger" #row #pinnedRow>
101105
</igx-grid-row>
102106
</ng-template>
103107
<ng-template #group_template let-rowIndex="index" let-rowData>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,16 @@
6767
<!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
6868
</ng-template>
6969
<ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData let-isAddRow="addRow">
70-
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" [addRow]="isAddRow" #row>
70+
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" [addRow]="isAddRow"
71+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
72+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger" #row>
7173
</igx-hierarchical-grid-row>
7274
</ng-template>
7375

7476
<ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
75-
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow" #row #pinnedRow>
77+
<igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [addRow]="isAddRow"
78+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
79+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger" #row #pinnedRow>
7680
</igx-hierarchical-grid-row>
7781
</ng-template>
7882
<ng-template #child_record_template let-rowIndex="index" let-rowData>

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,15 @@
6969
</ng-template>
7070
<ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
7171
<ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData let-isAddRow="addRow">
72-
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" [addRow]="isAddRow" #row>
72+
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow" [addRow]="isAddRow"
73+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
74+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger" #row>
7375
</igx-tree-grid-row>
7476
</ng-template>
7577
<ng-template #pinned_record_template let-rowIndex="index" let-rowData let-isAddRow="addRow">
76-
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [addRow]="isAddRow" #row #pinnedRow>
78+
<igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [addRow]="isAddRow"
79+
[ngClass]="rowClasses | igxGridRowClasses:rowIndex:pipeTrigger"
80+
[ngStyle]="rowStyles | igxGridRowStyles:rowIndex:pipeTrigger"#row #pinnedRow>
7781
</igx-tree-grid-row>
7882
</ng-template>
7983
<ng-template #summary_template let-rowIndex="index" let-rowData>

‎src/app/gird-cell-styling/grid-cell-styling.sample.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,35 @@
3131
>
3232
</igx-column>
3333
</igx-grid>
34+
<h3>Grid sample with rowClasses property applied based on row ID</h3>
35+
<igx-grid style="margin-bottom: 10vh;"
36+
[allowFiltering]="true"
37+
filterMode="excelStyleFilter"
38+
#grid1 [data]="data"
39+
primaryKey="ID"
40+
width="80%"
41+
height="600px"
42+
[rowClasses]="rowClasses"
43+
[pinning]='pinningConfig'
44+
(cellClick)="selectedRowId = $event.cell.row.key"
45+
>
46+
<igx-column *ngFor="let c of columns"
47+
[field]="c.field"
48+
[header]="c.field"
49+
[movable]="true"
50+
[groupable]="true"
51+
[resizable]="true"
52+
[sortable]="true"
53+
[editable]="true"
54+
[cellClasses]="c.cellClasses"
55+
[cellStyles]="c.cellStyles"
56+
>
57+
</igx-column>
58+
<igx-action-strip #actionStrip1>
59+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
60+
<igx-grid-editing-actions></igx-grid-editing-actions>
61+
</igx-action-strip>
62+
</igx-grid>
3463
<igx-tree-grid
3564
[allowFiltering]="true"
3665
filterMode="excelStyleFilter"

‎src/app/gird-cell-styling/grid-cell-styling.sample.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,14 @@
3838
font-weight: 900;
3939
background-color: greenyellow;
4040
}
41+
42+
.pinnedClass{
43+
color: #000;
44+
background: #fcc5de;
45+
border: 1px solid black;
46+
}
47+
.selected {
48+
background: #3B3B3B;
49+
border: 2px solid #2874A6;
50+
}
4151
}

‎src/app/gird-cell-styling/grid-cell-styling.sample.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild, OnInit } from '@angular/core';
2-
import { IgxGridComponent } from 'igniteui-angular';
2+
import { IgxGridComponent, IPinningConfig, RowPinningPosition, RowType } from 'igniteui-angular';
33
import { SAMPLE_DATA, HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data';
44

55
@Component({
@@ -22,6 +22,8 @@ export class GridCellStylingSampleComponent implements OnInit {
2222
'text-shadow': '1px 1px 2px rgba(25,25,25,.25)',
2323
animation: '0.25s ease-in-out forwards alternate popin'
2424
};
25+
public selectedRowId = '';
26+
public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Top };
2527

2628
public cellClasses1 = {
2729
test1: this.condition1,
@@ -35,6 +37,14 @@ export class GridCellStylingSampleComponent implements OnInit {
3537
test3: this.condition6
3638
};
3739

40+
public selectedRowCondition = (row: RowType) => row.cells.some(s => s.active);
41+
42+
// eslint-disable-next-line @typescript-eslint/member-ordering
43+
public rowClasses = {
44+
pinnedClass: this.rowCondition,
45+
selected: this.selectedRowCondition
46+
};
47+
3848
public condition(rowData: any): boolean {
3949
return rowData[this.grid1.primaryKey] === 'BLONP';
4050
}
@@ -57,6 +67,10 @@ export class GridCellStylingSampleComponent implements OnInit {
5767
return rowData[columnKey] > 6;
5868
}
5969

70+
public rowCondition(row: RowType) {
71+
return row.pinned;
72+
}
73+
6074
public ngOnInit(): void {
6175
this.columns = [
6276
{ field: 'ID' },

0 commit comments

Comments
 (0)