How to make column widths match in two TreeListViews?

[David]

We have two TreeListViews that we display one above the other (with some other UI bits in the middle).  We desire to have the widths of the columns in these two tree views match.  We do use footers in the columns, and the footer widths would need to be taken into account.  Something like SharedSizeDefinition as used on Grid ColumnDefinition and RowDefinition would be ideal, if possible.  How can we do this, please?


example (not intended to build; cut down from the real application code):

<telerik:RadTreeListView ItemsSource="{Binding Path=MyFirstList}"  >
    <telerik:RadTreeListView.ChildTableDefinitions>
        <telerik:TreeListViewTableDefinition ItemsSource="{Binding ChildVMs}" />
    </telerik:RadTreeListView.ChildTableDefinitions>

    <telerik:RadTreeListView.Columns>

        <telerik:GridViewDataColumn Header="Name" UniqueName="Name" IsSortable="True" SortingState="Ascending"
                                IsReadOnly="True"  DataMemberBinding="{Binding Name}" />

        <telerik:GridViewDataColumn Header="Value" TextAlignment="Right"
                                DataMemberBinding="{Binding CurrentValue, Mode=TwoWay}" >
            <telerik:GridViewDataColumn.Footer>
                <TextBlock FontSize="12" VerticalAlignment="Top" HorizontalAlignment="Right"
                    Text="{Binding  Path=SomeOtherNumber, Mode=OneWay}" />
            </telerik:GridViewDataColumn.Footer>
        </telerik:GridViewDataColumn>

        <telerik:GridViewDataColumn Header="Timeline" Width="*" IsReadOnly="True"
                            CellTemplateSelector="{StaticResource TimelineTemplateSelector}"
                            CellStyle="{StaticResource TimelineCellStyle}"
                            FooterCellStyle="{StaticResource TimelineFooterStyle}" >
            <telerik:GridViewDataColumn.Footer>
                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <telerik:RadHorizontalDataAxis  Stroke="DarkRed" Foreground="Gray" ...  />

            </telerik:GridViewDataColumn.Footer>
        </telerik:GridViewDataColumn>
    </telerik:RadTreeListView.Columns>
</telerik:RadTreeListView>

<!-- some other content -->

<telerik:RadTreeListView ItemsSource="{Binding Path=MySecondList}"  >
    <!-- similar to the first list -->
</telerik:RadTreeListView>

[David]

And, I should add that it's the first column that is at issue.  In our case, the widths of the second and third columns are reasonably well constrained.  However, if we have names of "One", "Two", and "Three" in the first list but "Some Long Name", "Another Long Name", "Another Exceptionally Long Name" in the second list, we end up with visually mis-aligned columns.

[Yoan]

Hi David,

In order to achieve your goal, I would suggest you to check this forum thread where a similar question has already been discussed.

Regards,
Yoan
Telerik

 

 

[David]

Hi Yoan,

Thanks for the reply and the pointer!

The solution in that thread, if I read it correctly, isn't exactly what we want to do.  The example binds the width of two corresponding columns to a property in the viewmodel; however, the net effect is that whichever TreeListView (or, in the example, GridView) last sets a width will determine the width of both.

For instance, if our first list contains "Some Long Name", "Another Long Name", and "Another Exceptionally Long Name", but our second list contains names of, "One", "Two", and "Three", the widths of both columns will be the width of the content in the second list, which is too short for the first list. 

Just growing the width (the first posted solution in that thread, taking whichever is higher) isn't quite the right functionality, either.  We're really looking for exactly SharedSizeDefinition functionality.

Are there any other ideas of how we can do this?

Thanks!

-David

[Yoan]

Hi David,

I do understand your concern. What you can do is to apply a simple check in the Width's property setter:

public GridViewLength Width
        {
            get { return this.width; }
            set
            {
                if (value.DesiredValue >= this.width.DesiredValue)
                {
                    this.width = value;
                    this.OnPropertyChanged("Width");
                }
            }
        }

I have attached an updated version of the second sample project. I hope now it meets your requirements.

Regards,
Yoan
Telerik

 

 

[David]

Hi Yoan,

Thanks for the reply!

Do I understand correctly that the suggestion would allow the Width to only grow, never shrink?

Is there a way we could have the Width end up being maximum of the two desired Widths of the columns in the two TreeListViews, please?  Effectively, is there a way the Width could also shrink?

Thanks!

-David

[Nick]

Hello David,

Unfortunately when the two widths are depending on a single property there is no way to ensure you get he max from both values. You can try to overcome this by using two separate properties for that, and simply return the Max from both as a width to the Columns. 

Regards,
Nik
Telerik

 

 

[David]

Thanks!

We were able to do this to achieve the desired effect.

For anyone else running across this later, in the getter for each width property, I test the DesiredWidth of both widths and return the one with the greater DesiredWidth.