How to make column widths match in two TreeListViews?

8 posts, 0 answers
  1. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 27 May 2014 Link to this post

    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>


  2. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 27 May 2014 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Yoan
    Admin
    Yoan avatar
    1069 posts

    Posted 30 May 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 09 Jun 2014 in reply to Yoan Link to this post

    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
  6. Yoan
    Admin
    Yoan avatar
    1069 posts

    Posted 12 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  7. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 12 Jun 2014 Link to this post

    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
  8. Nick
    Admin
    Nick avatar
    593 posts

    Posted 13 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  9. David
    David avatar
    25 posts
    Member since:
    Jan 2013

    Posted 25 Jun 2014 Link to this post

    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.

Back to Top
UI for WPF is Visual Studio 2017 Ready