RadGridView stretch width of RowDetails

7 posts, 0 answers
  1. Thomas Mutzl
    Thomas Mutzl avatar
    39 posts
    Member since:
    Oct 2006

    Posted 01 Aug 2011 Link to this post

    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 
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 01 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  3. DevCraft banner
  4. Thomas Mutzl
    Thomas Mutzl avatar
    39 posts
    Member since:
    Oct 2006

    Posted 01 Aug 2011 Link to this post

    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
  5. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 02 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  6. Vit100
    Vit100 avatar
    66 posts
    Member since:
    Oct 2012

    Posted 05 Jan 2012 Link to this post

    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.
  7. Jonx
    Jonx avatar
    258 posts
    Member since:
    Jul 2012

    Posted 27 Feb 2012 Link to this post

    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.
  8. Michael
    Michael avatar
    1 posts
    Member since:
    Mar 2011

    Posted 28 May 2012 Link to this post

    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);

    }

Back to Top
DevCraft banner