RadGridView Bind Column Width to Another Column?

Question

I have a RadGridView (Telerik) and it has a handful of columns. In the row details template I have another grid view displaying sub-items that have the same columns. This works great for the initial display, but I would like the column widths for the details template to follow the widths of the main grid (details template does not have headers).

I tried giving the main column a name and binding to 'Width' and 'ActualWidth' properties of that column by name but it didn't seem to take and didn't give any binding errors.

Is there any way to bind the width of a column on one RadGridView to the width of a column on another RadGridView?

EDIT

Per the suggestion below I tried binding the view to the tag and going that way and it doesn't seem to work. It works for the textblock but doesn't set the column width. Here is a video of what I see:

https://www.screencast.com/t/BiHmiarQExV

Here is the code I'm using:

    <telerik:RadGridView Grid.Row="2" ItemsSource="{Binding RenumberNotes}" x:Name="tgr" AutoGenerateColumns="False"
                         RowDetailsVisibilityMode="Visible">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn UniqueName="columnName" DataMemberBinding="{Binding CurrentValue}" Width="100" />
        </telerik:RadGridView.Columns>
        <telerik:RadGridView.RowStyle>
            <Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource {x:Type telerik:GridViewRow}}">
                <Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" />
            </Style>
        </telerik:RadGridView.RowStyle>
        <telerik:RadGridView.RowDetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <StackPanel Orientation="Horizontal" Margin="10,10,10,10">
                        <TextBlock Text="Column width: " />
                        <TextBlock
                            Text="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
                    </StackPanel>
                    <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Subnotes}">
                        <telerik:RadGridView.Columns>
                            <telerik:GridViewColumn Header="test" Width="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
                        </telerik:RadGridView.Columns>

                    </telerik:RadGridView>
                </StackPanel>
            </DataTemplate>
        </telerik:RadGridView.RowDetailsTemplate>
    </telerik:RadGridView>

As you can see, it updates the textblock properly so the binding is correct, but the column width is not updated.

You could try putting a rectangle in the header of a column you want to control the width from. Name it. Bind the other column width to the actualwidth of that rectangle. I don't have telerik controls to experiment with. — Andy
Thought that was potential genius at first but unfortunately doesn't seem to be working. I can create the rectangle and watch the size change correctly, but the other grid view doesn't update. Seems like the column is not recognizing the binding for some reason... — sfaust

mm8 mm8 · Accepted Answer · 2018-04-04T14:02:49

Is there any way to bind the width of a column on one RadGridView to the width of a column on another RadGridView?

Yes. You could define a RowStyle that binds the Tag property of the GridViewRow to the parent RadGridView and then use this one to bind to the Columns collection of the grid. Here is an example for you:

<telerik:RadGridView x:Name="tgr" AutoGenerateColumns="False" RowDetailsVisibilityMode="VisibleWhenSelected">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn UniqueName="columnName" DataMemberBinding="{Binding Name}" Width="100" />
    </telerik:RadGridView.Columns>
    <telerik:RadGridView.RowStyle>
        <Style TargetType="telerik:GridViewRow" BasedOn="{StaticResource {x:Type telerik:GridViewRow}}">
            <Setter Property="Tag" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}" />
        </Style>
    </telerik:RadGridView.RowStyle>
    <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="10,10,10,10">
                <TextBlock Text="Column width: " />
                <TextBlock Text="{Binding Tag.Columns[columnName].ActualWidth, RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}}" />
            </StackPanel>
        </DataTemplate>
    </telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>

Edit:

It works for a Textblock as you have shown, but binding the column width the same way doesn't seem to do anything.

Right, that's because the column itself is not part of the visual tree. You will have to write some code then. You could simply handle the Loaded event of the inner RadGridView:

private void RadGridView_Loaded(object sender, RoutedEventArgs e)
{
    RadGridView subGridView = (RadGridView)sender;
    subGridView.Columns[0].Width = columnName.Width;
}

XAML:

<telerik:RadGridView Grid.Row="2" ItemsSource="{Binding RenumberNotes}" x:Name="tgr" AutoGenerateColumns="False"
                     RowDetailsVisibilityMode="Visible">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn x:Name="columnName" DataMemberBinding="{Binding CurrentValue}" Width="100" />
    </telerik:RadGridView.Columns>
    <telerik:RadGridView.RowDetailsTemplate>
        <DataTemplate>
            <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Subnotes}" 
                                             Loaded="RadGridView_Loaded">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewColumn Header="test" />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </DataTemplate>
    </telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>

This is cleaner and doesn't break any pattern.

RadGridView Bind Column Width to Another Column?

1 Answers