Scroll is jumping when collapse/expand items in tree

7 posts, 0 answers
  1. Dmytro
    Dmytro avatar
    2 posts
    Member since:
    May 2014

    Posted 08 May 2014 Link to this post

    Hello everyone,

    We are having issues with vertical scroll when collapse/expand items in the TreeListView. Scroll starts to jump if we change style for GridViewCell:

    <Style x:Key="CellStyle" TargetType="telerik:GridViewCell">
        <Setter Property="MinHeight" Value="50"/>
    </Style>

    XAML for TreeListView:
    <telerik:RadTreeListView x:Name="radTreeListView2"
                AutoGenerateColumns="False"
                Height="450"
                Width="400"
                BorderBrush="Black"
                BorderThickness="5"
                AutoExpandItems="True"
                ScrollViewer.HorizontalScrollBarVisibility="Visible"
                ScrollViewer.VerticalScrollBarVisibility="Visible">
        <telerik:RadTreeListView.ChildTableDefinitions>
            <telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />
        </telerik:RadTreeListView.ChildTableDefinitions>
      
        <telerik:RadTreeListView.Columns>
            <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>
            <telerik:GridViewDataColumn Header="Count" DataMemberBinding="{Binding Count}"/>
        </telerik:RadTreeListView.Columns>
    </telerik:RadTreeListView>


    Steps to reproduce:
     1. TreeListView should contain enough items, so scroll showed up
     2. Scroll down to the middle or to the end
     3.Collapse/Expand any item
        AR: Scroll jumps to top (or to the middle)
        ER: Scroll stays on the same place, so we can see collapsed/expanded item

    Scroll is jumping even if we just put some content in CellTemplate:

    <telerik:RadTreeListView.Columns>
        <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}"/>
        <telerik:GridViewDataColumn Header="Count" DataMemberBinding="{Binding Count}">
            <telerik:GridViewDataColumn.CellTemplate>
                <DataTemplate>
                    <Border Height="50" Width="200" Background="LightGreen"/>
                </DataTemplate>
            </telerik:GridViewDataColumn.CellTemplate>
        </telerik:GridViewDataColumn>
    </telerik:RadTreeListView.Columns>


    Please advice.
  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 09 May 2014 Link to this post

    Hi,

    The described behavior occurs because you are changing the GridViewCell Height / MinHeight. This is expected because the TreeListView measures its items by checking their RowHeight. For example when you dynamically change the Height of the GridViewCell the TreeListView doesn't check if the ActualRowHeight for each row has changed (because the TreeListtView would be too slow). When there is no RowHeight specified the TreeListView uses a DefaultRowHeight = 25 to calculate the position of the items in the viewport. In order to return to the default behavior you can set the RowHeight property of the TreeListView

    I hope this helps.

    Regards,
    Boris Penev
    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.
     
  3. Dmytro
    Dmytro avatar
    2 posts
    Member since:
    May 2014

    Posted 12 May 2014 in reply to Boris Link to this post

    RowHeight is working.

    Thanks Boris!
  4. Jeff
    Jeff avatar
    1 posts
    Member since:
    Jun 2012

    Posted 28 Nov 2014 Link to this post

    Hi,
    In my case the row height varies based on the cell content... so I cannot pre-determine the RowHeight for the TreeListView control.
    How do I ensure the scroll position is correctly calculated?
    Thanks!
  5. Boris
    Admin
    Boris avatar
    276 posts

    Posted 03 Dec 2014 Link to this post

    Hello Jeff,

    Unfortunately there aren't any other workaround other than the one mentioned above.

    Regards,
    Boris
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Dharmavaram
    Dharmavaram avatar
    102 posts
    Member since:
    Jun 2013

    Posted 22 Aug 2019 in reply to Boris Link to this post

    Hi Boris's

     We too have same issue.Is this problem can't be solved other than this? Every time when we expand one row it is going to top of the RadTreeListView and this behaviour is not good when we have so many rows and again we have to manually scroll till the expanded row.

    Regards,

    Nagasree

  7. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1073 posts

    Posted 27 Aug 2019 Link to this post

    Hi Nagasree,

    The only viable solution we can offer is to ensure all of the control's rows have the same height, which can be done via the RowHeight property, as Boris suggested. I'm afraid there is no other feasible approach for handling the scenario where the rows have varying heights.

    Regards,
    Dilyan Traykov
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top