Rotated text in column header

8 posts, 0 answers
  1. Björn Metzinger
    Björn Metzinger avatar
    10 posts
    Member since:
    Aug 2009

    Posted 04 May 2010 Link to this post

    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
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 05 May 2010 Link to this post

    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.
  3. Björn Metzinger
    Björn Metzinger avatar
    10 posts
    Member since:
    Aug 2009

    Posted 06 May 2010 Link to this post

    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
  4. R
    R avatar
    3 posts
    Member since:
    Dec 2012

    Posted 15 May 2013 Link to this post

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

    Posted 17 May 2013 Link to this post

    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.

  6. KWUN WA
    KWUN WA avatar
    10 posts
    Member since:
    Aug 2015

    Posted 15 Feb 2017 in reply to Pavel Pavlov Link to this post

    How to achieve the same programmatically (with AutoGeneratingColumn)?
  7. KWUN WA
    KWUN WA avatar
    10 posts
    Member since:
    Aug 2015

    Posted 15 Feb 2017 in reply to KWUN WA Link to this post

    nevermind I found another way using Style

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

  8. nivas
    nivas avatar
    2 posts
    Member since:
    Dec 2017

    Posted 22 Dec 2017 Link to this post

    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>

Back to Top