Font colors grid groupheadercell

[Walter Cook]

I cannot get the font color to change in the groupheadercell.

"@syncfusion/ej2-angular-grids": "^19.4.56"

I've read all the various css style guides and I am calling them correctly since I CAN get the backgrounds to change. See screenshots.

from styles.css
(There is no code in component.css)

.e-grid .e-groupheadercell{

  color: white !important;; /* does not change the font color. still black*/

  background-color:white !important; /* is white in screen shot */

}

.e-grid .e-groupheadercell:hover {

  background: pink !important ; /* is pink in screen shot */

  color: white !important; /* does not change the font color. still black*/ 

}

How do I change the font color?

Further, how do I change the width to prevent the field name from truncating?

Thanks

Walter

 

Attachment: grid_headers_9a2b79d6.zip

[Joseph Christ Nithin Issack]

Hi Walter,

  Greetings from Syncfusion support.

Query1:  How do I change the font color?

  Based on the provided information we have prepared a sample but we were able to change the font color using the same CSS you have shared. Please find the below sample for reference. Please share the following details so that we may be able to provide a better solution ASAP.

• Please share the complete grid rendering code.
• Please try to replicate the issue in the sample provided or share the issue replicating sample.
• Have you used any custom theme for the grid component.

Sample: https://stackblitz.com/edit/angular-7ng1ae?file=app.component.css

Query 2: how do I change the width to prevent the field name from truncating

  Based on your query, you want to change the width of the group header cell so that the filed name will be fully displayed. Your requirement can be achieved by changing the width of the group header cell based on the width of the header text, in the `actionComplete` event of the EJ2 Grid.

Please refer the below code example.

 

actionComplete(args) {

    if (args.requestType == 'grouping') {

      var groupHeaderElems = document.getElementsByClassName('e-grouptext');

      for (let i = 0; i < groupHeaderElems.length; i++) {

        if (

          (groupHeaderElems[i] as any).innerText ==

          this.grid.getColumnByField(args.columnName).headerText

        ) {

          (groupHeaderElems[i] as any).style.width =

            this.displayTextWidth((groupHeaderElems[i] as any).innerText) +

            'px';

        }

      }

    }

  }

  displayTextWidth(txt) {

    var element = document.createElement('canvas');

    var context = element.getContext('2d');

    context.font = getComputedStyle(document.body).font;

    return context.measureText(txt).width;

  }

 

 

Sample: https://stackblitz.com/edit/angular-7ng1ae?file=app.component.ts

Please get back to us for further details.

Regards,

Joseph I.

[Walter Cook]

Thanks for the code.

Even upgrading to 20.1.47 doesn't solve it.
I can change the background color but the font does not.
Any thoughts as to why that may be happening?

Thanks

[Joseph Christ Nithin Issack]

Hi Walter,

  Thanks for your update.

  Before proceeding to the solution we would like you to share the details we have requested in the previous update, without which we will be not able to proceed further. Please share the following details so that we may be able to provide a better solution ASAP.

• Please share the complete grid rendering code.
• Please try to replicate the issue in the sample provided or share the issue replicating sample.
• Have you used any custom theme for the grid component.

Sample: https://stackblitz.com/edit/angular-7ng1ae?file=app.component.css

Please get back to us for further details so that we will be able to proceed further.

Regards,

Joseph I.