I have updated based on what you showed in the sample, but for some reason I'm not getting any coloring at all in the grid. Maybe you can see what I'm doing wrong?

Grid declaration:

        <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 133}}px" width="{{width - 440}}px">
            <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width" [cellClasses]="stitchClasses"></igx-column>
        </igx-grid>

CSS (not SCSS):

.actualData { background-color: #ffe07a; }

.negativeDiff { color: darkred; }

.positiveDiff { color: darkgreen; }

And the logic for deciding on the colors:

  public stitchClasses = {
    actualData: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      let scenIndex: number = this.scenarioNames.indexOf(rowData.Scenario),
        stitched: boolean =
          scenIndex === 0 ? this.scenario1Stitch : this.scenario2Stitch,
        end: string =
          scenIndex === 0 ? this.scen1StartWw.name : this.scen2StartWw.name;
      console.log(
        `in horizon? ${
          columnKey >= this.actualStartWw.name && columnKey <= end
        }`
      );
      return (
        stitched && columnKey >= this.actualStartWw.name && columnKey <= end
      );
    },
    negativeDiff: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      return rowData.Scenario === 'Diff' && cellValue < 0;
    },
    positiveDiff: (
      rowData: any,
      columnKey: string,
      cellValue: any,
      rowIndex: number
    ) => {
      return rowData.Scenario === 'Diff' && cellValue > 0;
    },
  };

Let me know what you think I'm missing or doing wrong here.

Hello Chris,

Thank you for following up!

I am glad that you find my suggestion helpful.

After reviewing your second question what I could say is that the two possible scenarios in which custom styling is not being applied is either none of the cells meets the specific condition or the component is using an Emulated ViewEncapsulation. Additionally, in order to force the custom styles down through the current component and its children you should either penetrate this encapsulation using ::ng-deep or set it to None.

Through ViewEncapsulation in .ts file:

@Component({
    selector: 'app-my-component',
    ...
    encapsulation: ViewEncapsulation.None,
})

Through ::ng-deep in .scss/.css file:

::ng-deep {
    .custom-background {
        background-color: #68e684;
    }
}

Please test these approaches on your side and let me know if you need any further assistance.

Looking forward to your reply.

Sincerely,
Riva Ivanova
Entry Level Software Developer

Ugh, incompleteness on my part and simple mistakes. I forgot to change the name in the HTML template, as the grid was good enough to simply copy over from a previous component.

However, I do not think adding to the GitHub repo will do anything, as the last suggestion I put there (dotted lines in charts) was closed without attempt at implementation, despite being highest user-voted new feature.

Unfortunately, I feel I must bother you again. The download (export to Excel) feature seems to be broken with the coloring applied. Here is the complete output:

ERROR TypeError: Cannot read properties of undefined (reading 'columnList')
    at IgxExcelExporterService.export (main.js:126115:24)
    at StitchComponent.download (main.js:1293921:37)
    at StitchComponent_div_18_button_2_Template_button_click_0_listener (main.js:1293589:23)
    at executeListenerWithErrorHandling (main.js:35182:12)
    at wrapListenerIn_markDirtyAndPreventDefault (main.js:35233:16)
    at HTMLButtonElement.<anonymous> (main.js:67185:34)
    at ZoneDelegate.invokeTask (polyfills.js:11323:173)
    at Object.onInvokeTask (main.js:50995:25)
    at ZoneDelegate.invokeTask (polyfills.js:11323:56)
    at Zone.runTask (polyfills.js:11073:39)
defaultErrorLogger @ main.js:24740
handleError @ main.js:24793
handleError @ main.js:30164
executeListenerWithErrorHandling @ main.js:35184
wrapListenerIn_markDirtyAndPreventDefault @ main.js:35233
(anonymous) @ main.js:67185
ZoneDelegate.invokeTask @ polyfills.js:11323
onInvokeTask @ main.js:50995
ZoneDelegate.invokeTask @ polyfills.js:11323
Zone.runTask @ polyfills.js:11073
ZoneTask.invokeTask @ polyfills.js:11418
invokeTask @ polyfills.js:12863
globalZoneAwareCallback @ polyfills.js:12894

It basically breaks at this point in my code (specifically on the export line), which is no different from other pages which do not produce this error:

  download() {
    let param:parameter = parameters.filter(p => p.name === this.uomParam)[0], name:string = `${param ? param.short : this.uomParam}`;
    name += this.scenario1Name === this.scenario2Name ? '' : `-${this.scenario2Name.slice(0, this.scenario2Name.length < 20 ? this.scenario2Name.length : 20)}`;
    name += `-${this.scenario1Name.slice(0, this.scenario1Name.length < 20 ? this.scenario1Name.length : 20)}`
    name += `-${this.rollup}-${new Date().getTime().toString().slice(8,13)}`;
    console.log(`Exporting stitch ${name} to Excel.`);
    this.excelExportService.export(this.stitchGrid, new IgxExcelExporterOptions(name));
  };

Users would like to see the coloring applied to the Excel sheet which is produced, if possible. Otherwise, it seems there should be a way to reverse the coloring to make it exportable.

Hello Chris,

I am glad that you find my suggestion helpful and managed to achieve your requirement.

Thank you for using Infragistics components. 

Regards,
Riva Ivanova
Entry Level Software Developer

The ViewEncapsulation.none solution worked for me. With CSS, you have to designate an element to ::ng-deep on, otherwise it breaks with "bad" code.

Thanks for your help!