Rotated text in column header

[Björn Metzinger]

Hello everybody

Maybe this topic has already been there but I didn't find it using the forum search...

How can I use some text that is rotated 90 degrees (i.e. rendered vertically instead of horizontally) in some column of the RadGridView, thus using more vertical but far less horizontal space in the header row? (The content cells would be checkboxes then)

I experimented with setting the header property to a TextBlock with a RotateTransform in it, but the text gets cropped to the length it would have in the header column without being rotated (using Width="Auto" on the column). I could set the Width property to some larger value that allows the entire text to be displayed, but then the column will use this width even when the text is rotated vertically and doesn't need that much space - so that isn't the way I want it, too.

Any suggestions how to get this working?
Thanks
Bjoern

[Pavel Pavlov]

Hello Björn Metzinger,

Please try this XAML and let me know in case it does not solve the issue.

<telerik:RadGridView>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Width="40" >
                    <telerik:GridViewDataColumn.Header>
                        <Border Height="100"  Width="100"  >
                            <TextBlock HorizontalAlignment="Center" MinWidth="100"  VerticalAlignment="Center" Text="test123" >
                            <TextBlock.RenderTransform>
                                <RotateTransform Angle="90" CenterX="20"  />
                            </TextBlock.RenderTransform>
                            </TextBlock>
                        </Border>
                    </telerik:GridViewDataColumn.Header>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

Kind regards,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Björn Metzinger]

Hi Pavel

I had to tweak your example a little bit, but now it works as desired.
Thank you very much!

Best Regards,
Björn

[R]

My column headers have longer text and they are being truncated. It is not clear which dimension/setting to increase to compensate for this.

[Yoan]

Hello,

In order to resolve this issue, you can increase border's Height. Please check the following code snippet for a reference:

<telerik:GridViewDataColumn>
                  <telerik:GridViewDataColumn.Header>
                      <Border Background="Transparent" Height="130" Width="100">
                          <TextBlock  Text="Dynamic Schema"/>

                          <Border.RenderTransform>
                              <RotateTransform Angle="90" CenterY="20"/>
                          </Border.RenderTransform>
                      </Border>
                  </telerik:GridViewDataColumn.Header>
              </telerik:GridViewDataColumn>

I hope this helps.
Regards,
Yoan
the Telerik team

[KWUN WA]

How to achieve the same programmatically (with AutoGeneratingColumn)?

[KWUN WA]

nevermind I found another way using Style

http://www.telerik.com/forums/rotating-gridview-column-header

[nivas]

I have bidden the data dynamically  rad grid view. and tried to rotate the header text and this done as by below to achive this. Now my header text is view partially (attached the image)...

 

Kindly guide how to set the size of header text for dynamic biding data

 

  <telerik:RadGridView Exporting="gvData_Exporting"  AutoGenerateColumns="False" Visibility="Visible" IsReadOnly="True"
        AutoExpandGroups="False" FrozenColumnCount="7" FontSize="10"
        x:Name="grdview" Margin="0,-58,0,53"  Foreground="#FFF3F2F2"    >
                <telerik:RadGridView.Resources>
                    <Style TargetType="telerik1:GridViewHeaderCell"  >
                        <Setter Property="RenderTransform"   >
                            <Setter.Value>
                                <RotateTransform Angle="-90" CenterX="20"  />
                            </Setter.Value>
                        </Setter>
                    </Style>
                                      
                </telerik:RadGridView.Resources>

            </telerik:RadGridView>