Merge pull request #10022 from IgniteUI/ddincheva/rowStyling

Introduce conditional rowClasses and rowStyles

Author: zdrawku

CHANGELOG.md

@@ -2,7 +2,11 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-## 12.1.6
+## 12.2.0
+
+### General
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
 
 ### New Features
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
@@ -19,6 +23,7 @@ All notable changes for each version of this project will be documented in this
         this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
         ```
     - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
+    - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
 
 ## 12.1.3
 

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

@@ -20,6 +20,8 @@ import {
     IgxSummaryFormatterPipe,
     IgxGridAddRowPipe,
     IgxHeaderGroupWidthPipe,
+    IgxGridRowClassesPipe,
+    IgxGridRowStylesPipe,
     IgxHeaderGroupStylePipe
 } from './pipes';
 
@@ -44,6 +46,8 @@ import {
         IgxColumnFormatterPipe,
         IgxSummaryFormatterPipe,
         IgxHeaderGroupWidthPipe,
+        IgxGridRowClassesPipe,
+        IgxGridRowStylesPipe,
         IgxHeaderGroupStylePipe
     ],
     exports: [
@@ -66,6 +70,8 @@ import {
         IgxColumnFormatterPipe,
         IgxSummaryFormatterPipe,
         IgxHeaderGroupWidthPipe,
+        IgxGridRowClassesPipe,
+        IgxGridRowStylesPipe,
         IgxHeaderGroupStylePipe
     ],
     imports: [

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

@@ -7,8 +7,16 @@ import { GridType } from './grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
-import { IgxSummaryOperand, IgxSummaryResult } from '../grid/public_api';
 import { IgxAddRow } from './crud.service';
+import { IgxGridRow } from '../grid-public-row';
+import { IgxTreeGridRowComponent } from '../tree-grid/tree-grid-row.component';
+import { IgxGridRowComponent } from '../grid/grid-row.component';
+import { IgxHierarchicalRowComponent } from '../hierarchical-grid/hierarchical-row.component';
+import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
+
+interface CSSProp {
+    [prop: string]: any;
+}
 
 /**
  * @hidden
@@ -19,7 +27,7 @@ import { IgxAddRow } from './crud.service';
 })
 export class IgxGridCellStyleClassesPipe implements PipeTransform {
 
-    public transform(cssClasses: { [prop: string]: any }, _: any, data: any, field: string, index: number, __: number): string {
+    public transform(cssClasses: CSSProp, _: any, data: any, field: string, index: number, __: number): string {
         if (!cssClasses) {
             return '';
         }
@@ -48,8 +56,7 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform {
 })
 export class IgxGridCellStylesPipe implements PipeTransform {
 
-    public transform(styles: { [prop: string]: any }, _: any, data: any, field: string, index: number, __: number):
-     { [prop: string]: any } {
+    public transform(styles: CSSProp, _: any, data: any, field: string, index: number, __: number): CSSProp {
         const css = {};
         if (!styles) {
             return css;
@@ -64,6 +71,87 @@ export class IgxGridCellStylesPipe implements PipeTransform {
     }
 }
 
+type _RowType = IgxGridRowComponent | IgxTreeGridRowComponent | IgxHierarchicalRowComponent;
+
+/**
+ * @hidden
+ * @internal
+ */
+@Pipe({ name: 'igxGridRowClasses' })
+export class IgxGridRowClassesPipe implements PipeTransform {
+    public row: IgxGridRow;
+
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) {
+        this.row = new IgxGridRow(this.gridAPI.grid as any, -1, {});
+    }
+
+    public transform(
+        cssClasses: CSSProp,
+        row: _RowType,
+        editMode: boolean,
+        selected: boolean,
+        dirty: boolean,
+        deleted: boolean,
+        dragging: boolean,
+        index: number,
+        mrl: boolean,
+        filteredOut: boolean,
+        _: number
+    ) {
+        const result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
+        const mapping = [
+            [selected, 'igx-grid__tr--selected'],
+            [editMode, 'igx-grid__tr--edit'],
+            [dirty, 'igx-grid__tr--edited'],
+            [deleted, 'igx-grid__tr--deleted'],
+            [dragging, 'igx-grid__tr--drag'],
+            [mrl, 'igx-grid__tr--mrl'],
+            // Tree grid only
+            [filteredOut, 'igx-grid__tr--filtered']
+        ];
+
+        for (const [state, _class] of mapping) {
+            if (state) {
+                result.add(_class as string);
+            }
+        }
+
+        for (const cssClass of Object.keys(cssClasses ?? {})) {
+            const callbackOrValue = cssClasses[cssClass];
+            this.row.index = index;
+            (this.row as any)._data = row.rowData;
+            const apply = typeof callbackOrValue === 'function' ? callbackOrValue(this.row) : callbackOrValue;
+            if (apply) {
+                result.add(cssClass);
+            }
+        }
+        return result;
+    }
+}
+
+/**
+ * @hidden
+ * @internal
+ */
+@Pipe({ name: 'igxGridRowStyles' })
+export class IgxGridRowStylesPipe implements PipeTransform {
+
+    constructor(private gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>) { }
+
+    public transform(styles: CSSProp, rowData: any, index: number, __: number): CSSProp {
+        const css = {};
+        if (!styles) {
+            return css;
+        }
+        for (const prop of Object.keys(styles)) {
+            const cb = styles[prop];
+            const row = new IgxGridRow((this.gridAPI.grid as any), index, rowData);
+            css[prop] = typeof cb === 'function' ? cb(row) : cb;
+        }
+        return css;
+    }
+}
+
 /**
  * @hidden
  * @internal
@@ -341,7 +429,7 @@ export class IgxGridAddRowPipe implements PipeTransform {
 @Pipe({ name: 'igxHeaderGroupWidth' })
 export class IgxHeaderGroupWidthPipe implements PipeTransform {
 
-    public transform(width: any, minWidth: any, hasLayout: boolean ) {
+    public transform(width: any, minWidth: any, hasLayout: boolean) {
         return hasLayout ? '' : `${Math.max(parseFloat(width), minWidth)}px`;
     }
 }

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

@@ -343,6 +343,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-even-class'" [autoGenerate]="true"></igx-grid>
      * ```
      */
+    @DeprecateProperty('`evenRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
     @Input()
     public evenRowCSS = 'igx-grid__tr--even';
 
@@ -354,9 +355,47 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * <igx-grid #grid [data]="Data" [evenRowCSS]="'igx-grid--my-odd-class'" [autoGenerate]="true"></igx-grid>
      * ```
      */
+    @DeprecateProperty('`oddRowCSS` is deprecated. We suggest using `rowClasses` property instead.')
     @Input()
     public oddRowCSS = 'igx-grid__tr--odd';
 
+    /**
+     * Sets a conditional class selector to the grid's row element.
+     * Accepts an object literal, containing key-value pairs,
+     * where the key is the name of the CSS class and the value is
+     * either a callback function that returns a boolean, or boolean, like so:
+     * ```typescript
+     * callback = (row: RowType) => { return row.selected > 6; }
+     * rowClasses = { 'className' : this.callback };
+     * ```
+     * ```html
+     * <igx-grid #grid [data]="Data" [rowClasses] = "rowClasses" [autoGenerate]="true"></igx-grid>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    public rowClasses: any;
+
+    /**
+     * Sets conditional style properties on the grid row element.
+     * It accepts an object literal where the keys are
+     * the style properties and the value is an expression to be evaluated.
+     * ```typescript
+     * styles = {
+     *  background: 'yellow',
+     *  color: (row: RowType) => row.selected : 'red': 'white'
+     * }
+     * ```
+     * ```html
+     * <igx-grid #grid [data]="Data" [rowStyles]="styles" [autoGenerate]="true"></igx-grid>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    public rowStyles = null;
+
     /**
      * Gets/Sets the primary key.
      *

projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts

@@ -10,13 +10,12 @@ import { IPinningConfig } from '../grid.common';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SortingDirection } from '../../data-operations/sorting-expression.interface';
-import { IgxGridTransaction } from '../tree-grid/public_api';
-import { IgxTransactionService } from '../../services/public_api';
 import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { IgxPaginatorComponent } from '../../paginator/paginator.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
+import { GridRowConditionalStylingComponent } from '../../test-utils/grid-base-components.spec';
 
 describe('Row Pinning #grid', () => {
     const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned ';
@@ -33,7 +32,8 @@ describe('Row Pinning #grid', () => {
                 GridRowPinningWithMRLComponent,
                 GridRowPinningWithMDVComponent,
                 GridRowPinningWithTransactionsComponent,
-                GridRowPinningWithInitialPinningComponent
+                GridRowPinningWithInitialPinningComponent,
+                GridRowConditionalStylingComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -1265,6 +1265,50 @@ describe('Row Pinning #grid', () => {
             expect(grid.hasPinnedRecords).toBeTrue();
         });
     });
+
+    describe('Conditional row styling', () => {
+
+        beforeEach(fakeAsync(() => {
+            fix = TestBed.createComponent(GridRowConditionalStylingComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+            tick();
+            fix.detectChanges();
+        }));
+
+        it('Shoud be able to conditionally style rows. Check is the class present in the row native element class list', () => {
+            fix.detectChanges();
+            const firstRow = grid.gridAPI.get_row_by_index(0);
+            const fourthRow = grid.gridAPI.get_row_by_index(3);
+
+            expect(firstRow).toBeDefined();
+            expect(firstRow.element.nativeElement.classList.contains('eventRow')).toBeTrue();
+            expect(firstRow.element.nativeElement.classList.contains('oddRow')).toBeFalse();
+            expect(fourthRow.element.nativeElement.classList.contains('eventRow')).toBeFalse();
+            expect(fourthRow.element.nativeElement.classList.contains('oddRow')).toBeTrue();
+        });
+
+        it('Should apply custom CSS bindings to the grid cells/rows. Check the style attribute to match each binding', () => {
+            const  evenColStyles = {
+                background: (row) => row.index % 2 === 0 ? 'gray' : 'white',
+                animation: '0.75s popin'
+            };
+
+            fix.detectChanges();
+            grid.rowStyles = evenColStyles;
+            grid.notifyChanges(true);
+            fix.detectChanges();
+            const firstRow = grid.gridAPI.get_row_by_index(0);
+            const fourthRow = grid.gridAPI.get_row_by_index(3);
+
+            const expectedEvenStyles = 'background: gray; animation: 0.75s ease 0s 1 normal none running popin;';
+            const expectedOddStyles = 'background: white; animation: 0.75s ease 0s 1 normal none running popin;';
+
+            expect(firstRow.element.nativeElement.style.cssText).toEqual(expectedEvenStyles);
+            expect(fourthRow.element.nativeElement.style.cssText).toEqual(expectedOddStyles);
+        });
+
+    });
 });
 
 @Component({

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

@@ -1,4 +1,4 @@
-import { Component, forwardRef, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, forwardRef, ChangeDetectionStrategy } from '@angular/core';
 import { IgxGridComponent } from './grid.component';
 import { IgxRowDirective } from '../row.directive';
 
@@ -10,11 +10,6 @@ import { IgxRowDirective } from '../row.directive';
 })
 export class IgxGridRowComponent extends IgxRowDirective<IgxGridComponent> {
 
-    @HostBinding('class.igx-grid__tr--mrl')
-    public get hasColumnLayouts(): boolean {
-        return this.grid.hasColumnLayouts;
-    }
-
     public getContext(col, row) {
         return {
             $implicit: col,

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

@@ -93,11 +93,15 @@
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null">
         </ng-container>
         <ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
-            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow" #row>
+            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" [disabled]="disabledRow"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-grid-row>
         </ng-template>
         <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
-            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
+            <igx-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-grid-row>
         </ng-template>
         <ng-template #group_template let-rowIndex="index" let-rowData>

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

@@ -67,12 +67,16 @@
             <!-- <ng-container *igxTemplateOutlet="(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)"></ng-container> -->
         </ng-template>
         <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
-            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData" #row>
+            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [rowData]="rowData"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-hierarchical-grid-row>
         </ng-template>
 
         <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
-            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData" #row #pinnedRow>
+            <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [rowData]="rowData"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row #pinnedRow>
             </igx-hierarchical-grid-row>
         </ng-template>
         <ng-template #child_record_template let-rowIndex="index" let-rowData>