Change the color of the font within the column header

[ADrew2Participant]

Within my Angular Grid, I would like to change the color of the text within the column header row.

Here is the creation of the columns:

columns: any[] =
    [
        {
            text: '', 
            columngroup: 'ProductDetails',
            datafield: 'EditTemp', 
            width: "5%",
            minwidth: 100, 
            
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                return glyphiconGridButton('edit-prospect', 'Edit temp', 'edit', row);
            }
            cellsalign: 'center', align: 'center'
            
        },
        {
            text: 'Employee #', columngroup: 'ProductDetails',
            datafield: 'EmployeeNum', width: "14.2%", minwidth: 100, 
            
        },
        {
            text: 'Name', columngroup: 'ProductDetails',
            datafield: 'FullName', width: "20%", minwidth: 100
        },
        {
            text: 'M/C', columngroup: 'ProductDetails', 
            datafield: 'MarketCenter', width: "15%", minwidth: 100
        },
        {
            text: 'Function', columngroup: 'ProductDetails',
            datafield: 'FunctionTitle', width: "15%", minwidth: 100
        },
        {
            text: 'Hire Date', columngroup: 'ProductDetails',
            datafeild: 'HireDate', width: "15%", minwidth: 100
        },
        {
            text: 'Term Date', columngroup: 'ProductDetails',
            datafeild: 'TermDate', width: "15%", minwidth: 100
        }
    ];

Also creation of the grid itself

<jqxGrid
[width]="'100%'" [theme]='"energyblue"' [source]='dataAdapter' [pageable]='true' [height]='500' [altrows]='true'
[editable]='false' [columns]='columns' [sortable]='true'>
</jqxGrid>

`

I would like ‘Employee #’, ‘Name’, ‘M/C’, etc to be set as color: white.
How can I do this? Thanks

[ADrew2Participant]

Got it!

Here is the code for the column:

{
            text: 'Employee #', 
            columngroup: 'ProductDetails',
            datafield: 'EmployeeNum',
            width: "14.2%", 
            
            rendered: changeColor,
            
            minwidth: 100
            //centers the column header and column cells
              //cellsalign: 'center', align: 'center'
            
        },

Then set the function using a font-weight, font-style, color, etc:

function changeColor (header){
  header.css('font-weight', 'bold');
  header.css('color','#ffffff');
};

This styles the text within the header column only

[Author]

Posts