RowDetailsTemplate and Text Wrapping

[James]

Hello

I'm using a details template for a row as follows:

<DataTemplate x:Key="DiscussionDetailsTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="Discussion Text: " Margin="12,0,0,0" FontSize="13" FontWeight="Bold" />
                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding mNotes}" TextWrapping="Wrap" FontSize="13" Margin="12,0,0,0" HorizontalAlignment="Left" />
            </Grid>
        </DataTemplate>

Basically, the details template shows a potentially long message in a discussion.  Here's the code for the grid using the template:

<telerik:RadGridView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Name="DiscussionListGridView" Style="{DynamicResource DefaultGrid}"
                                 ItemsSource="{Binding DiscussionList}" SelectedItem="{Binding SelectedDiscussion}" AutoGenerateColumns="False"
                                 ScrollMode="RealTime" DataLoadMode="Synchronous" CanUserSortColumns="True"
                                 RowDetailsVisibilityMode="VisibleWhenSelected" RowDetailsTemplate="{StaticResource DiscussionDetailsTemplate}"
                                 >
                <telerik:RadGridView.Resources>
                    <Style TargetType="telerik:RadGridView">
                        <Setter Property="ShowGroupPanel" Value="False"/>
                    </Style>
                </telerik:RadGridView.Resources>

                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn Width="Auto" Header="From" Name="AuthorName" IsReadOnly="True" DataMemberPath="sgAuthorName"
                                                TextWrapping="Wrap"  />
                    <telerik:GridViewDataColumn Width="*" Header="Subject" Name="Subject" IsReadOnly="True" DataMemberPath="sgDescription"
                                                TextWrapping="Wrap" />
                    <telerik:GridViewDataColumn Width="Auto" DataFormatString="{}{0:dd/MM/yyyy}" Header="Date" Name="StatusDateDue"
                                                IsReadOnly="True" DataMemberPath="dtDateCreated" TextWrapping="Wrap"  />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>

The problem that I'm having is that if the text is particularly long in the row details view, it won't wrap automatically.  Instead it forces a scrollbar at the bottom of the grid and makes the user manually scoll - this isn't my desired behaviour.

Any tips on how to cause the text to wrap correctly?

[Rossen Hristov]

Hello James,

Currently, the grid rows are measured with Infinity in order to be able to calculate the horizontal scroll-bar correctly and that is why you will not be able to achieve the width-of-my-container semantics with the current version.

With the Q3 Release we will introduce an attached property called ScrollViewer.HorizontalScrollBarVisibility.

When it is set to Disabled for the grid, the grid rows will be measured with whatever width the grid has. Then you should be able to get the TextBlock wrapping since the width will be a fixed number and not Infinity.

Something like this:

<Window x:Class="RowDetailsTextWrapping_WPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="Window1" Height="700" Width="600">
  <Grid>
    <telerik:RadGridView
            Name="clubsGrid"
            Width="300"
            RowDetailsVisibilityMode="VisibleWhenSelected"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
      <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
          <TextBlock TextWrapping="Wrap">
            Pearson's return to the club for a second spell had been widely anticipated after the resignation of Paul Duffen last week and the former Derby chairman takes charge with the club in a difficult situation both on and off the field. Saturday's 2-0 defeat at Burnley left the team 18th in the Premier League - amid a run of just three wins in 33 games - while financial results published last week revealed serious concerns over the club's viability. Pearson said: "I am delighted to be back at Hull City as chairman. Hull City is a club I know well and care passionately about.
          </TextBlock>
        </DataTemplate>
      </telerik:RadGridView.RowDetailsTemplate>
    </telerik:RadGridView>
  </Grid>
</Window>

This would wrap the very long text and the details will grow vertically as much as needed.

Until then, the only possible workaround would be to define an explicit width for the layout root (Grid) of your RowDetailsTemplate.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James]

Thanks Ross!  Can't wait for the release.

[James]

Just a follow up - this works well, thanks again for the excellent support!