Resizing a child column width based on a parent width

6 posts, 0 answers
  1. Erez
    Erez avatar
    55 posts
    Member since:
    Jun 2009

    Posted 31 Aug 2009 Link to this post

    Hello,

    I am creating a parent-child grid. The child columns need to be excatly under the columns of the parent
    as they visually share the same columns.

    To support this feature, I need to have a column's width on the child resize as the user resises a parent column.

    I tried using a bind on the child template as shown below
    Width="{Binding ElementName=RadGridView1, Path=ActualWidth}"

    however it does not seem to work.

    Then I tried to manually set the width of the cells on that column (including the headerCell)
    however the splitter line between the column does not resize and setting it manually does not seem to do the trick.

    Any ideas ?


    <telerik:RadGridView Height="286" Name="RadGridView1" Width="720"
                                 AutoGenerateColumns="false"
                                 IsFilteringAllowed="true"
                                 FlowDirection="RightToLeft"
                                 ShowGroupPanel="False"
                                 Loaded="RadGridView1_Loaded">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn UniqueName="ID"
                                                DataMemberBinding="{Binding Path=ID}"
                                                Header="ID"
                                                Width="Auto" />

                </telerik:RadGridView.Columns>
                <telerik:RadGridView.HierarchyChildTemplate>
                    <DataTemplate>
                        <StackPanel DataContext="{x:Null}">
                            <telerik:RadGridView x:Name="gridDetails"
                                                 CanUserReorderColumns="False"
                                                 CanUserFreezeColumns="False"
                                                 ShowGroupPanel="False"
                                                 ColumnsWidthMode="Auto"
                                                 AutoGenerateColumns="False"
                                                 ItemsSource="{Binding}"
                                                 Loaded="OnChildGridLoaded"
                                                 ShowColumnHeaders="True">
                                <telerik:RadGridView.Columns>
                                    <telerik:GridViewDataColumn UniqueName="ID"
                                                                DataMemberBinding="{Binding Path=ID}"
                                                                HeaderText="ID"
                                                                Width="{Binding ElementName=RadGridView1, Path=ActualWidth}"
                                                                />
                                </telerik:RadGridView.Columns>
                            </telerik:RadGridView>
                        </StackPanel>
                    </DataTemplate>
                </telerik:RadGridView.HierarchyChildTemplate>
               
    </telerik:RadGridView>


    Thanks,

    Erez

  2. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 01 Sep 2009 Link to this post

    Hello Erez,
  3. You can do this but only in WPF.
    All you have to do is to remove the Binding in xaml for the inner grid:
    <telerik:RadGridView x:Name="gridDetails"  
                         CanUserReorderColumns="False" 
                         CanUserFreezeColumns="False"  
                         ShowGroupPanel="False" 
                         ColumnsWidthMode="Auto" 
                         AutoGenerateColumns="False" 
                         Loaded="gridDetails_Loaded" 
                         ItemsSource="{Binding}" 
                         ShowColumnHeaders="True"
        <telerik:RadGridView.Columns> 
            <telerik:GridViewDataColumn UniqueName="ID" 
                                        DataMemberBinding="{Binding Path=ID}" 
                                        HeaderText="ID" /> 
        </telerik:RadGridView.Columns> 
    </telerik:RadGridView> 
      

    and set it in the code behind (in gridDetails_Loaded) like this:
    private void gridDetails_Loaded(object sender, RoutedEventArgs e) 
        RadGridView gridDetails = sender as RadGridView; 
        gridDetails.Columns[0].SetBinding(GridViewColumn.WidthProperty, new Binding("ActualWidth"
        { 
            Source = RadGridView1.Columns[0] 
        }); 

    In my code I'm doing it only for the first column but you can use this for all columns.

    I hope this will help you.

    All the best,
    Hristo
    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.
  • Erez
    Erez avatar
    55 posts
    Member since:
    Jun 2009

    Posted 01 Sep 2009 Link to this post

    Thanks allot !!!

    One more question-
    The vertical separator line in the master and details row do not align as you can see in
    the following picture (red circles):
    http://i32.tinypic.com/5n6wax.jpg

    Do you have an idea how to solve this ?


    I am sharing the code I created based on your example:
    * This code assumes that the visible master and details grids have the same column names.

    private void BindDetailsColumnsWidth(RadGridView oDetailsGrid,
                                                                 RadGridView oMasterGrid)
    {
        Telerik.Windows.Controls.GridViewColumn oCol;

        for (int i = 0; i < oDetailsGrid.Columns.Count-1; i++)
        {
            oCol = oDetailsGrid.Columns[i];

            if (oCol.IsVisible == true)
            {
                oCol.SetBinding(Telerik.Windows.Controls.GridViewColumn.WidthProperty,
                                new Binding("ActualWidth")
                                {
                                    Source = oMasterGrid.Columns[i]
                                });
            }
        }
    }

     

    In the Loaded event handler I call the above using:

       RadGridView gridDetails = sender as RadGridView;

       BindDetailsColumnsWidth(rgv, RadGridView1);

  • Kalin Milanov
    Admin
    Kalin Milanov avatar
    447 posts

    Posted 04 Sep 2009 Link to this post

    Hi Erez,

    The adjustment with the 1 pixel should not be too difficult, though it seems you have already tweaked the template of the HierarchyChildPresenter a bit (or maybe it is due to the RTL support).

    Can you please send me a small sample with dummy data so I can be of service for your scenario. Ultimately might want to set a negative margin to the presenter for the child grid which should do the trick.

    Sincerely yours,
    Kalin Milanov
    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.
  • Kyle
    Kyle avatar
    1 posts
    Member since:
    Aug 2017

    Posted 11 Aug in reply to Hristo Link to this post

    Is there a way to do this in the XAML, not in the code-behind file?
  • Stefan
    Admin
    Stefan avatar
    774 posts

    Posted 16 Aug Link to this post

    Hello Kyle,

    Before proceeding to your inquiry I would like to clarify, that this thread is a bit outdated. The solution presented in it consists of utilizing the Loaded event of the child grid which is not quite recommended with the present implementation of RadGridView, as it utilizes a virtualization mechanism for both its rows and columns. A more appropriate solution would be to perform such synchronization of the columns through properties in the view model. The approach of achieving this is demonstrated with a sample application in the Hierarchical GridView column alignment forum thread. May I kindly ask you to check it out?

    Hopefully, it helps.

    Best Regards,
    Stefan X1
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  • Back to Top