This is a migrated thread and some comments may be shown as answers.

Rotated text in column header

7 Answers 110 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Björn Metzinger
Top achievements
Rank 1
Björn Metzinger asked on 04 May 2010, 06:15 PM
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

7 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 05 May 2010, 01:12 PM
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.
0
Björn Metzinger
Top achievements
Rank 1
answered on 06 May 2010, 08:23 AM
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
0
R
Top achievements
Rank 1
answered on 15 May 2013, 02:56 PM
My column headers have longer text and they are being truncated. It is not clear which dimension/setting to increase to compensate for this.
0
Yoan
Telerik team
answered on 17 May 2013, 02:33 PM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
KWUN WA
Top achievements
Rank 1
answered on 15 Feb 2017, 10:00 PM
How to achieve the same programmatically (with AutoGeneratingColumn)?
0
KWUN WA
Top achievements
Rank 1
answered on 15 Feb 2017, 10:08 PM

nevermind I found another way using Style

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

0
nivas
Top achievements
Rank 1
answered on 22 Dec 2017, 06:43 AM

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>

Tags
GridView
Asked by
Björn Metzinger
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Björn Metzinger
Top achievements
Rank 1
R
Top achievements
Rank 1
Yoan
Telerik team
KWUN WA
Top achievements
Rank 1
nivas
Top achievements
Rank 1
Share this question
or