Column Header alignment

3 Answers 4291 Views
Grid
Troy
Top achievements
Rank 1
Troy asked on 27 Jun 2012, 08:18 PM
How can I center align the text in my column headers?

3 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 28 Jun 2012, 04:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Troy
Top achievements
Rank 1
commented on 28 Jun 2012, 04:53 PM

Thanks so much!
Mark
Top achievements
Rank 1
commented on 26 Apr 2016, 05:04 PM

What if you only want to align certain column  headers, not all of them...???  Thanks
0
Ivan Zhekov
Telerik team
answered on 29 Apr 2016, 11:48 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Mark
Top achievements
Rank 1
commented on 29 Apr 2016, 03:52 PM

Perfect, thanks!
Daniel
Top achievements
Rank 1
commented on 14 Jan 2022, 08:35 PM | edited

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
Telerik team
commented on 19 Jan 2022, 09:58 AM

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 

0
Stoyan
Telerik team
answered on 21 Mar 2022, 01:09 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Troy
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Ivan Zhekov
Telerik team
Stoyan
Telerik team
Share this question
or