How to set specific header color using the headerAttributes?

Question

According to Kendo grid documentation, we are able to set the column's header attribute by using the headerAttributes:

$("#grid").kendoGrid({
  columns: [{
    field: "name",
    headerAttributes: {
      style: "text-align: right; font-size: 14px; color: red !important;"
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

It's working for most attributes but not for the color. It does make sence since the color attribute of the link (k-link class) will have priority over the th color attribute.

However, I'm wondering if there's a workaround that would allow me to set the color for a specific header when I initialize the grid. Right now, the only solution I might think of would be to set the link color after the grid is initialized.

Answer 1

Rather than adding the inline styles which will get overridden without a lot of hacking why not use the headerTemplate like this:

  field: "ContactName",
  title: "Contact Name",
  width: 200, 
  headerTemplate:'<label class="greenHeader">Contact Name</label>'

Then have the appropriate css class in your style sheets like:

.greenHeader
    {
     color:green ;
    }

for an example see this dojo:

Example of header template being used.