This is a migrated thread and some comments may be shown as answers.

Resizing a child column width based on a parent width

5 Answers 1522 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Erez
Top achievements
Rank 1
Erez asked on 31 Aug 2009, 09:21 AM

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

5 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 01 Sep 2009, 01:07 PM
Hello Erez,
  • 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.
  • 0
    Erez
    Top achievements
    Rank 1
    answered on 01 Sep 2009, 04:14 PM
    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);

    0
    Kalin Milanov
    Telerik team
    answered on 04 Sep 2009, 12:37 PM
    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.
    0
    Kyle
    Top achievements
    Rank 1
    answered on 11 Aug 2017, 03:52 PM
    Is there a way to do this in the XAML, not in the code-behind file?
    0
    Stefan
    Telerik team
    answered on 16 Aug 2017, 08:23 AM
    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.
    Tags
    GridView
    Asked by
    Erez
    Top achievements
    Rank 1
    Answers by
    Hristo
    Telerik team
    Erez
    Top achievements
    Rank 1
    Kalin Milanov
    Telerik team
    Kyle
    Top achievements
    Rank 1
    Stefan
    Telerik team
    Share this question
    or