Column Header alignment

[Troy]

How can I center align the text in my column headers?

[Iliana Dyankova]

Hello Troy,

You could use a CSS selector with the widget’s specific CSS class for customizing the appearance of any particular widget. The needed CSS classes are listed in this topic from our online documentation. For example this snippet can be used for centering the text in the grid column headers: 

.k-header .k-link{
   text-align: center;
}

I hope this information helps.
 

Greetings,
Iliana Nikolova
the Telerik team

[Troy]

Thanks so much!

[Mark]

What if you only want to align certain column  headers, not all of them...???  Thanks

[Ivan Zhekov]

Mark,

you can easily do so by specifying the "headerAtrributes" of the desired columns, just like in this example: http://dojo.telerik.com/@joneff/aQImE.

Note that due to CSS specificity, if you use a single class name, you will need to have !important rule, or alternatively a more specific selector.

If you use inline styles, you don't have to worry about specificity.

Regards,
Ivan Zhekov
Telerik

 

 

[Mark]

Perfect, thanks!

[Daniel]

How do you format groupColumnHeaders? The example below shows the  overall headers being modified with headerAttributes but not the headers of each group.
Kendo UI Snippet | Kendo UI Dojo (telerik.com)

[Georgi Denchev]

Hi, Daniel,

Thank you for the provided Dojo.

There's no built-in configuration that can manipulate the attributes of the groupHeaders like there is one for the Grid header. You can use the dataBound event to update the attributes of the <td> element of the particular group header.

   dataBound: function() {
     let groupHeaders = this.element.find(".k-grouping-row");
     groupHeaders.each(function(i, header) {
       // add an attribute to the second cell of each group header.
       $(header).find("td:eq(1)").attr("style", "font-weight: bold; text-align:right");
     });
   }

Updated Dojo:

https://dojo.telerik.com/@gdenchev/iyUnAyon 

[Stoyan]

Hi all,

I'd like to point out that with the updated rendering from R1 2022 the display property of the Grid's header has changed to flexbox (was block previously). Therefore to align the text of the header you need to use  the justify-content property:

.k-header .k-link{
   justify-content: center;
}

 

Regards,
Stoyan
Progress Telerik