Need More Info
Last Updated: 22 May 2020 11:47 by ADMIN
Thorsten
Created on: 18 May 2020 14:32
Category: GridView
Type: Bug Report
1
(MVVM) Using ScrollIntoViewAsync on a GridView to scroll to the very bottom of the grid when items are added to the bound collection frequently ends up showing top of the grid

Hi guys,

we have a messaging service that broadcasts a couple of messages every 1-5 seconds.

When our client module receives those messages, we want to append them at the bottom of a grid (RadGridView).

After appending them, we also want to scroll to the very bottom of that grid, so that the newest and therefore bottommost items come into view.

 

Documentation and forums suggest we go the AttachedBahaviour and ScrollIntoViewAsync way.

 

Our behaviour looks like this:


    public class ScrollToNewItemBehavior : Behavior<RadGridView>
    { 
        public static bool GetIsEnabled(DependencyObject obj) => (bool)obj.GetValue(IsEnabledProperty);
        public static void SetIsEnabled(DependencyObject obj, bool value) => obj.SetValue(IsEnabledProperty, value);
        public static readonly DependencyProperty IsEnabledProperty = DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(ScrollToNewItemBehavior), new PropertyMetadata(false, OnIsEnabledChanged));
        private static void OnIsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (d is RadGridView gridView)
                gridView.Items.CollectionChanged += (s, args) =>
                {
                    if (args.Action == NotifyCollectionChangedAction.Add)
                    {
                        gridView.ScrollIntoViewAsync(args.NewItems[0], gridView.Columns[0], null);

                        // exchanging args.NewItems[0] for gridView.Items[gridView.Items.Count-1] yields same result
                        //gridView.ScrollIntoViewAsync(gridView.Items[gridView.Items.Count-1], gridView.Columns[0], null);
                    }
                };
        } 
    }


 

Our Message class:


    public class Message : ModelBase<Message>
    {
        public string Text { get; set; }
    }


Our Messages collection in the ViewModel:


        private RadObservableCollection<Message> _messages;
        public RadObservableCollection<Message> Messages
        {
            get => _messages;
            set
            {
                _messages = value;
                NotifyPropertyChanged(m => m.Messages);
            }
        }


The collection is updated (in the ViewModel) like this:


            Task.Run(async () =>
            {
                for (int i = 0; ; i++)
                {
                    await Task.Delay(1000);
                    Messages.Add(new Message { Text = $"{i} - sftrvwj,erhvtwejhrfvtjlwehftrwejh" });
                }
            });


 

The grid is defined like this:


    <telerik:RadGridView
        x:Name="gridView"
        ItemsSource="{Binding Messages, Mode=OneWay}"
        IsSynchronizedWithCurrentItem="False"
        IsPropertyChangedAggregationEnabled="True"
        AutoGenerateColumns="False" 
        SelectionMode="Single"
        CanUserFreezeColumns="False"
        EnableColumnVirtualization="True"
        EnableRowVirtualization="True"
        CanUserDeleteRows="False"
        CanUserInsertRows="False"
        behaviours:ScrollToNewItemBehavior.IsEnabled="True"
        CanUserGroupColumns="False"
        IsReadOnly="True"
        IsManipulationEnabled="False"
        CanUserReorderColumns="False"
        CanUserSearch="False"
        ShowGroupPanel="False">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn
                DataMemberBinding="{Binding Text}"
                Header="Text"
                ShowDistinctFilters="False"
                IsSortable="False"/>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>


Nothing too fancy.

 

What we observe:


 

When a message is added, the view and the scroll indicator randomly jump to the top or the bottom of the grid and stay there until the next message is added.

We tried AddRange, Suspend-/ResumeNotifications, ObservableCollection instead of RadObservableCollection.

We disabled many grid features.

We tried .NetCore

,

we tried .net Framework

To no avail.

This seems to be a bug.

 

Do you know any workarounds or a completely different approach to achieve the desired behaviour?

 

 

Side note:

When we set GroupRenderingMode to Flat,

        GroupRenderMode="Flat"

the view stays at the bottom. The scroll indicator stays at the bottom as well, but once in a while jumps a little bit up, as if by one row, and down to the bottom again without the view changing.

At one time disabling filtering on all columns seemd to work... but later didn't.

 

 

Thanks in advance

Thorsten

1 comment
ADMIN
Vladimir Stoyanov
Posted on: 22 May 2020 11:47

Hello Thorsten,

Thank you for the shared code snippets and images. 

Please, allow me to start by saying that the GroupRenderMode="Flat" is the recommended setting for the RadGridView as it utilizes its new virtualization mechanism.

That said, I have create a sample project based on the described scenario and I want to state that some twitching in the scrollbar is to be expected as its ExtentHeight is constantly recalculated and some elements are redrawn. As an alternative to using the ScrollIntoViewAsync method I can suggest the ScrollToBottom method of the GridViewScrollViewer inside the RadGridView. On my end it results in a slightly better performance than using ScrollIntoViewAsync. I have demonstrated this approach in the shared sample project. Do check it out and let me know, if it helps. 

Regards,
Vladimir Stoyanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Attached Files: