Cant seem to apply any css override styles to the KendoGrid header

[Cedric Gaines]

Maybe I'm overlooking something easy, but I can't seem to simply change the background color of my kendo grid header.

 

This is what I have, (it everything runs, but the base theme never changes)... (no centering, no bg color change).  What am I missing?

CSS

.k-header{
text-align: center;
background-color: #ff0099;
}

 

JS

$("#agencyListGrid").kendoGrid({
columns: [{
field: "agencyName",
title: "Agency"
},
{
field: "agencyID",
title: "View",
width: 100
},
{
field: "agencyID",
title: "Archive",
width: 100
}],
dataSource: {
data: this.agencyList.agencies,
pageSize: 15
},
height: 500,
pageable: {
pageSizes: true,
buttonCount: 5
}
});

[Preslav]

Hello Cedric,

A possible solution to achieve the desired result might be using a CSS code similar to this one:

<style>
  .k-grid-header th.k-header{
    text-align: center;
    background-color: #ff0099;
  }
</style>

For a runnable example, check my testing Dojo: http://dojo.telerik.com/ULUDe

Additionally, if you are interested in my workflow how I am finding the required CSS selectors, I recorded a short video for your reference:

• https://www.screencast.com/t/GPcnweg4U

I hope this helps.
 

Regards,
Preslav
Progress Telerik

[Cedric Gaines]

Awesome, this helped me A LOT!!!

Thanks!