RadGridView stretch width of RowDetails

[Thomas]

Hi,

I want to show a simple databound textblock in the RowDetails of a RadGridView, that should be trimmed (using TextTrimming="WordEllipsis") - but so far without luck.
I also read the thread http://www.telerik.com/community/forums/silverlight/gridview/rowdetailstemplate-horizontal-stretch.aspx

This is my xaml (using Silverlight 5 beta):

<telerik:RadGridView x:Name="ContentItemsGrid"
                     ColumnWidth="Auto"
                     AutoExpandGroups="True"
                     AutoGenerateColumns="False"
                     FrozenColumnCount="2"
                     RowIndicatorVisibility="Collapsed"
                     GridLinesVisibility="Horizontal"
                     SelectionMode="Extended"
                     RowDetailsVisibilityMode="Visible"
                     Loaded="ContentItemsGrid_Loaded">

    <telerik:RadGridView.Columns>
        <telerik:GridViewSelectColumn />
        <telerik:GridViewImageColumn DataMemberBinding="{Binding Image}" />
        <telerik:GridViewImageColumn DataMemberBinding="{Binding ContentStateIcon}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Caption}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding Created, StringFormat=d}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding CreatedUser}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding LastChanged, StringFormat=d}" />
        <telerik:GridViewDataColumn DataMemberBinding="{Binding ChangedUser}" />
    </telerik:RadGridView.Columns>

    <telerik:RadGridView.RowDetailsStyle>
        <Style TargetType="telerik:DetailsPresenter">
            <Setter Property="HorizontalContentAlignment"
                    Value="Stretch" />
        </Style>
    </telerik:RadGridView.RowDetailsStyle>

    <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
            <Grid Background="White">
                <TextBlock Text="{Binding Preview}"
                           Margin="30 0 5 0"
                           TextTrimming="WordEllipsis" />
            </Grid>
        </DataTemplate>
    </telerik:RadGridView.RowDetailsTemplate>

</telerik:RadGridView>

I tried a lot of different things in the DataTemplate: StackPanel, Grid, Grid.ColumnDefinition="*" etc.
But the result always looks like in the screenshot.

Any ideas, please?

cheers
Thomas 

[Vanya Pavlova]

Hello Thomas Mutzl,

 

RadGridView's RowDetails are measured with infinity, which leads to ignoring properties such as TextTrimming, TextWrapping etc. Generally, no matter that you are setting the TextTrimming property of the TextBlock, it does not know till what sizes it needs to trim it. What you may do is to set the Width/ MaxWidth either of the Grid or of the TextBlock element. Then these properties should work as expected. 


 

Regards,
Vanya Pavlova
the Telerik team

[Thomas]

Vanya,

Thanks for your very fast response!

Setting the width to a fixed size isn't an acceptable solution in our case.
I just tried to bind the width of the textblock to the the width of the outer RadGridView, but that didn't work either.

Any idea for a workaround??

cheers,
Thomas

[Maya]

Hi Thomas Mutzl,

If you do not want to set a fixed size for the row details, you may bind its Width property to the one of the parent grid. However, in this case you need to expose a new class handling this specific binding. I am sending you a sample project illustrating the suggested approach
 

Best wishes,
Maya
the Telerik team

[Vit100]

This approach is not very good - child width is calculated during initial opening and is fixed even after parent width is changing.

What people want to have child grid have same width as parent grid. In this case child's width will be dynamic.

[Jonx]

Hello Maya,
Vit100 is right. What I want is a perfect match even when the grid is resized. Would it be possible for you Maya to modify your sample so that the grid size fills the entire RowDetails space? Like that, it does not correspond to my needs... 
Thanks a lot for your help.
John.

[Michael]

I had the same issue.  I am missing something on the binding, it seems like the binding is not two way, though I added that to the width proxy.

so, this is a very cheezy hack will get you a dynamic re-size handler.  since you have the source and now the new details element, you can attach to the re-size event of the grid.

seems to work fine so far, but i am not sure how it will handle a large number of items or dynamic reloading of the grid binding.  give it a whirl, let me know if anyone has luck with it.

private void gridView_LoadingRowDetails(object sender, Telerik.Windows.Controls.GridView.GridViewRowDetailsEventArgs e)
{
            const int buffer = 50;  // add a bit for cols or scroll bar.  need a better way than this.
 
            FrameworkElement details = e.DetailsElement as FrameworkElement;
            RadGridView gridView = sender as RadGridView;
            e.DetailsElement.Width = gridView.ActualWidth - buffer;
            gridView.SizeChanged += new SizeChangedEventHandler((object obj, SizeChangedEventArgs args) => e.DetailsElement.Width = gridView.ActualWidth - buffer);

}

[Joe]

I dont really want to bump this question, but as it's exactly the issue i'm facing and there's no answer to what everyones plea is and i've been unable to find any other threads... is there any answer to all the voiced requests