Custom Setting Cell Font Colour

[James]

Sir, using your example of cell customisation here https://ej2.syncfusion.com/angular/documentation/grid/cell/cell/#cell-customization

I add a new class "z-row-added" to a cell.  The scss style in my components scss file attempts to set the font colour of the cell as such

.e-rowcell.z-row-added{

    color: #FF0000;

    background-color: rgb(168, 207, 108);

}

The background colour works as expected. Hover the 'color' does not. Looking at the browser inspect of 'Elements' I can see that your Syncfusion scss file webpack:///node_modules/@syncfusion/ej2-grids/styles/grid/_theme.scss is applied AFTER my local SCSS file. Thus overwriting my class settings. See attached screen show. In this case there does not appear to be anyway that I can change the colour, as I can not seem to cause any of my SCSS files to be applied after your _theme.scss.

How can I change the colour of one cell only?

James

[James]

Why does your file upload not allow me to upload a jpg or png?

[Rajapandi Ravi]

Hi James,

Greetings from Syncfusion support

We have checked your shared information and we could see that you are applying background color and like to change the color of the text. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

Index.html

 

<style>

.e-grid .e-rowcell.e-attr {

  background: #d7f0f4;

  color: #FF0000 !important;

}

    </style>

 

App.component.ts

 

<ejs-grid [dataSource]='data' locale='en-US' allowPaging='true' height=365 [pageSettings]='initialPage'>

        <e-columns>

            .  .  .  .  .  .  .  .

            .  .  .  .  .  .  .  .

            <e-column field='ShipCountry' headerText='Ship Country' [customAttributes]="{class: 'e-attr'}" width='170'></e-column>

        </e-columns>

    </ejs-grid>

 

Sample: https://stackblitz.com/edit/angular-1nebrf?file=app.component.ts,app.component.html,index.html

Screenshot:

Regards,

Rajapandi R

[James]

Thankyou Rajapandi for your reply. However, it appears you have misunderstood.

Setting the font colour for the entire column is easy and works, as your stackblitz shows.

What doesn't work is setting the font colour for a specific cell. Please have a look at your example here   https://ej2.syncfusion.com/angular/documentation/grid/cell/cell/#cell-customization and try and set the font colour differently for each cell, instead of the cell background, which the example currently does

[Rajapandi Ravi]

Hi James,

Thanks for your update

Based on your query we could see that you like to apply the font color for the specific cell. So based on your query we have modified the previously shared sample and you can achieve it by using queryCellInfo event of Grid. Please refer the below code example and sample for more information.

App.component.ts

 

queryCellInfo(args) {

        if(args.column.field === 'ShipCountry' && args.data.ShipCountry === 'France') {

            args.cell.classList.add('e-attr');

        }

        if(args.column.field === 'ShipCountry' && args.data.ShipCountry === 'Brazil') {

            args.cell.classList.add('e-green');

        }

    }

 

Index.html

 

<style>

.e-grid .e-rowcell.e-attr {

  color: #FF0000 !important;

}

.e-grid .e-rowcell.e-green {

  color: #008000 !important;

}

    </style>

Sample: https://stackblitz.com/edit/angular-1nebrf-biwlac?file=app.component.ts,app.component.html,index.html

API: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo

Screenshot:

Regards,

Rajapandi R

[James]

Thakyou Rajapandi,

It seems the solution is to use the "!important", to overrule the Syncfusion Style, which overrules the local css settings. While this works, the code base should not apply the syncfusion style as defined in node_modules over the styles defined in the local css class.

But that is something for Syncfusion to think about. At the moment I  will go with your solution. Thankyou

[Rajapandi Ravi]

Hi James,

We are happy to hear that our provided solution was working fine at your end.

Please get back to us if you require any further assistance with this.

Regards,

Rajapandi R