kendo ui grid - header in the bold ?.

[alex]

Hello,

 

I tried to add this style but do not see any change. How to have the header for the grid in bold.

.k-grid-header {
    font-weight: bold!important;    
}

thanks

alexsunny

[Lance | Senior Manager Technical Support]

Alex, your account has edited this question to include hyperlinks to spam/malicious sites. I have deactivated your account to prevent further malicious behavior. If this was not done by you, please update your Telerik account credentials and contact us at telerik.com/contact to have it reactivated.

[Hetali]

Hi Alex,

In order to style the Kendo UI Grid Header, you can use either of the following methods:

1. headerStyle property

<kendo-grid [data]="gridData">
  <kendo-grid-column field="ProductID" [headerStyle]="{ 'font-weight': 'bold' }">
  </kendo-grid-column>
</kendo-grid>

2. headerClass property

<kendo-grid [data]="gridData">
  <kendo-grid-column field="ProductID" [headerClass]="{ gridHeader: true }">
  </kendo-grid-column>
</kendo-grid>

tr .gridHeader {
  font-weight: bold;
}

3. k-grid-header class - To style the header locally, please make sure to set the encapsulation to ViewEncapsulation.None.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  styles: [`
    .k-grid-header {
      font-style: italic;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

In this StackBlitz example, I have styled the Kendo UI Grid Header using the above three methods.

I hope this information helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik