Group header Text wrapping

[Daní]

Hi,

How can I wrap texts in Group Headers?

Thanks

[Vanya Pavlova]

Hi Dani,

 

The easiest way to achieve this result is to predefine GroupHeaderTemplate to a single column or to the whole RadGridView, as follows:

<telerik:RadGridView  ItemsSource="{Binding Collection}">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Property1}">
                <telerik:GridViewDataColumn.GroupHeaderTemplate>
                    <DataTemplate>
                        <TextBlock Width="100" TextWrapping="Wrap" Text="Wrappppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.GroupHeaderTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

Regards,
Vanya Pavlova
Telerik

[Daní]

I mean Group fo RadTileList, not RadGridView


thanks

[Maya]

Hello Dani,

You can follow the exact same approach - set the TextWrapping property and desired Width to the TextBlock used as GroupTemplate. For example:

<DataTemplate x:Key="groupTemplate">
                    <TextBlock  Text="{Binding}" TextWrapping="Wrap" />
                </DataTemplate>


<telerik:RadTileList x:Name="tileList"
                             GroupTemplate="{StaticResource groupTemplate}" >

 

Regards,
Maya
Telerik

[Daní]

Hi Maya,

I already tried this approach but it's not working. The only way I've found to wrap text in group header is by fixing TextBlock width. I have modified one of your demos to demonstrate the issue:

<UserControl x:Class="RadTileList_Groups.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:my="clr-namespace:RadTileList_Groups"
             mc:Ignorable="d" d:DesignHeight="700" d:DesignWidth="700">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="GroupTemplate">
                    <TextBlock Text="{Binding}"
                               Margin="5,0,0,5"
                               FontWeight="Bold" TextWrapping="Wrap"/>
            </DataTemplate>
            <Style TargetType="telerik:Tile">
                <Setter Property="Margin" Value="5,15,5,0"/>
                <Setter Property="Background" Value="#A500AD"/>
            </Style>
        </Grid.Resources>
        <telerik:RadTileList x:Name="RadTileList"
                             ScrollViewer.HorizontalScrollBarVisibility="Visible"
                             GroupTemplate="{StaticResource GroupTemplate}" >
            <telerik:Tile Group="Continent very large, large large and large, and large, and large and dndnddndn" TileType="Single">
                <TextBlock Text="Europe"/>
            </telerik:Tile>
            <telerik:Tile  Group="Country" TileType="Single">
                <TextBlock Text="Germany"/>
            </telerik:Tile>
            <telerik:Tile Group="Continent" TileType="Single">
                <TextBlock Text="Asia"/>
            </telerik:Tile>
            <telerik:Tile  Group="Country" TileType="Single">
                <TextBlock Text="Italy"/>
            </telerik:Tile>
        </telerik:RadTileList>
    </Grid>
</UserControl>

[Maya]

Hello Dani,

TextWrapping will be applied when the space available for the TextBlock finishes. That being set, if TextBlock can stretch to infinity, the text will never be wrapped. In such cases, you need to set Width/ MaxWidth property. 

Regards,
Maya
Telerik