We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change the orientation of the header text of column?

Here are screenshots

Attachment: Archive_5e5cf919.zip

7 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team August 2, 2019 11:09 AM UTC

Hi Hassan Tariq, 
Thank you for contacting Syncfusion support. 
We don’t have direct support for your requirement of changing orientation of DataGrid Header Text and it can be achieved using “HeaderTemplate” support in each DataColumn in SfDataGrid. By defining the label as the header template as a DataTemplate and set the rotation property value “-90” or “90” to make a rotation. You can change the rotation value based on your requirement. However we need to manual define the header row height to avoid text clipping in view, because we didn’t have the support for “DataTemplate” auto sizing the height. 
Please refer the following code snippet, 
<dataGrid:SfDataGrid HeaderRowHeight="100"> 
    <dataGrid:SfDataGrid.Columns  x:TypeArguments="syncfusion:Columns"> 
                <Label Text="OrderID"  
We have attached the sample
for your reference, 
We hope that this helps, please let us know if you would require any assistance. 
Subburaj Pandian V  

ED Eddy November 11, 2020 03:37 PM UTC

Is there a way to control the width of the columns? The column's width seems to match the label width as if it wasn't rotated. I tried setting ColumnSizer="None" but then my label text gets wrapped to a second and 3rd line if they're too long. If I set LineBreakMode="NoWrap" then the text gets truncated. This is what I'm trying to achieve:

KK Karthikraja Kalaimani Syncfusion Team November 12, 2020 12:40 PM UTC

Hi Eddy,

Please set the columnsizer as Auto, so it will set the column width based on content width. Please refer the below UG document.


Karthik Raja

BM Björn Möller August 28, 2023 09:48 AM UTC

I would like to join here. I can't get the width of the column to display correctly either.

My headings are mostly 2 lines. This makes it necessary to set the label to MaxLines = 2 and NoWrap.

But the width of the column always looks way too wide as soon as it is 2 line headings.

One line in the label takes about 48px and then the column takes about 122px. That would be nice if the width of the column was already narrower.

But with 2 line labels (96px) the column becomes about 238px wide.

I have also attached my extended test project, in which our requirements are shown approximately. If I create a CustomColumnSizer, then the text in the labels is cut off again.

Attachment: SupportXForms_37a0e629.zip

DV Diwakar Venkatesan Syncfusion Team August 29, 2023 02:12 PM UTC

Hi Björn Möller,

We have analyzed your query. We would like to let you know that, In sfdatagrid, when using ColumnSizer.Auto, it means that the width of a column will be determined by the cell containing the longest sentence or word. In your specific case, if the second line of the heading label has a longer sentence, the width of the respective column will be adjusted accordingly based on that length. This behavior remains consistent even if you rotate the header content (Label).

If you manually modify the rotated height to become the width of a particular column, it will impact the content height (Label) and adjust it to the entered width. This behavior is inherent to the default functionality of SfDataGrid.

To illustrate, consider a Label with a height of 50 and width of 100. When rotated to 90 or -90 degrees and you manually set the column width to 50 after rotation, the label's dimensions adjust as follows: the width becomes 50 and the height becomes 100 in 90-degree rotation. In your sample, if you set MaxLines to a value between 5 - 7, you will be able to view the remaining text, but this adjustment won't impact the column width. Please refer the below screenshot for more details.


Diwakar V

BM Björn Möller August 31, 2023 10:13 AM UTC

Hello Diwakar,

thank you for the detailed answer. I encountered exactly this problem and could not solve it. Either the label was too small after rotation, or the column was too large. There doesn't seem to be an acceptable solution for this.

I have now worked around it by building my own "Label" control from an SKCanvasView. Then the column width is fixed and I just draw the text with the -90 degree rotation.

Cumbersome, but works. Thanks for the help though.

Many greetings from Cologne,


DV Diwakar Venkatesan Syncfusion Team September 1, 2023 10:58 AM UTC


Glad that your issue is resolved!! Please let us know if you have any further queries on this. We are happy to help.

Live Chat Icon For mobile
Up arrow icon