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

[Hassan Tariq]

Here are screenshots

Attachment: Archive_5e5cf919.zip

[Subburaj Pandian Veluchamy]

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, 

  

[Xaml]  

  

<dataGrid:SfDataGrid HeaderRowHeight="100"> 

    <dataGrid:SfDataGrid.Columns  x:TypeArguments="syncfusion:Columns"> 

        <dataGrid:GridTextColumn  

                                             MappingName="OrderID" 

                                             Padding="0,0,0,0"> 

            <dataGrid:GridTextColumn.HeaderTemplate> 

               <DataTemplate> 

                <Label Text="OrderID"  

                       HorizontalOptions="Center" 

                       VerticalOptions="Center" 

                       Rotation="90" 

                       LineBreakMode="WordWrap" 

                       TextColor="Black"/> 

                </DataTemplate> 

            </dataGrid:GridTextColumn.HeaderTemplate> 

        </dataGrid:GridTextColumn> 

   </dataGrid:SfDataGrid.Columns> 

</dataGrid:SfDataGrid> 

             

 
We have attached the sample for your reference, 

 

SampleLink: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SupportXForms143753344 

  

  

We hope that this helps, please let us know if you would require any assistance. 

 

Regards,
Subburaj Pandian V  

[Eddy]

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:

[Karthikraja Kalaimani]

 

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.

https://help.syncfusion.com/xamarin/datagrid/column-sizer#columnsizerauto


Regards,
Karthik Raja 

[Björn Möller]

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

[Diwakar Venkatesan]

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.

Regards,

Diwakar V

[Björn Möller]

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,

Björn

[Diwakar Venkatesan]

Björn

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