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

How do I create a vertical column header that supports wrapping and resizing

1 Answer 143 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Jerry Kurata
Top achievements
Rank 1
Jerry Kurata asked on 25 May 2011, 04:29 PM
Hi,

I need to have vertical headers in some of my columns.  I have found some examples that use a transform to rotate the text, but they all seem to have  the following issues:
  1. Staying centered. As the user changes the width of columns the header needs to stay in the center.
  2. Text disappearing when it is too long and needs to be wrapped.

Here is a grid showing the issues.  While one can solve some of the issue with margins on the textbox this not dynamic and thus cannot be used for production.

<Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadGridView HorizontalAlignment="Left" Margin="43,40,0,0" Name="radGridView1" VerticalAlignment="Top" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewColumn>
                    <telerik:GridViewColumn.Header>
                        <Border Height="90" Margin="1,0,-151,0" >
                            <TextBlock  Text="long column header that will wrap" HorizontalAlignment="Left" 
                                        FontSize="11" FontWeight="Normal" Height="auto" Width="90"
                                        TextAlignment="Center"  VerticalAlignment="Bottom"
                                        UseLayoutRounding="True" TextWrapping="Wrap" TextTrimming="None" Margin="9,0,0,0">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="270" />
                                </TextBlock.RenderTransform>
                            </TextBlock>
                        </Border>
                    </telerik:GridViewColumn.Header>
                </telerik:GridViewColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

1 Answer, 1 is accepted

Sort by
0
Ivan Ivanov
Telerik team
answered on 30 May 2011, 04:53 PM
Hello Jerry Kurata,

I have prepared a sample project for you. One of the main differences in my approach is fixing the TextBlock's measures and defining some kind of view port for the content. In this way you could prevent the TextBlock from moving vertically when you resize the header cell. If you need a larger "view port" you should tune the margins a bit.

Best wishes,
Ivan Ivanov
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
Tags
GridView
Asked by
Jerry Kurata
Top achievements
Rank 1
Answers by
Ivan Ivanov
Telerik team
Share this question
or