We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Want to scroll to added item

I have a Listview in a Grid on a page. The Listview is bound to a Datasource in a ViewModel.

Whenever I add a new item at the end of the to the list I want to scroll it into view. How can this be achived? 

I have tried to scroll to the end of the Listview with the with the  ScrollTo function using ItemSize multiplied with number of items as a position but this does not work. It scrolls nearly to the end but the last item is always hidden.

I have observed this behavior on the Windows platform.

If we think of it a little bit more general, the question is: What is the recommended way to scroll an item into view?

I have added a Solution with a sample implementation. It adds a new item every two seconds and I want to see the item that was added latest at the bottom of the list without any scrolling.


Attachment: TestSfListview_f7fc1eab.zip

8 Replies

SY Suthi Yuvaraj Syncfusion Team October 26, 2022 03:37 PM UTC

Hi Frank,


We have checked the reported query “Want to scroll to added item”, you can achieve your requirement by scrolling the newly added item , you can get the notification in the DataSource CollectionChanged , when the new items added or removed to the collection. We have created a sample based on your requirement, attached the sample and code snippet for your reference.


Code snippet:

list.DataSource.SourceCollectionChanged += DataSource_SourceCollectionChanged;

 

private void DataSource_SourceCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)

  {

      if(e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)

      {

        list.Dispatcher.Dispatch(() =>

        {

           list.ItemsLayout.ScrollToRowIndex(e.NewStartingIndex, ScrollToPosition.End, false);

         });

 }

 }


As timer is used in the sample , there might be a mismatch in the thread , which leads to the issue , items are scrolled in windows platform ,whereas Dispatch will invokes the ScrollToRowIndex in the main thread.


Also please refer the documentation related to scrolling in SfListView

UG Link: https://help.syncfusion.com/xamarin/listview/scrolling#programmatic-scrolling


Regards,

Suthi Yuvaraj.


Attachment: TestSfListview_f7fc1eab_6ac1047f.zip


FR Frank November 3, 2022 12:58 PM UTC

Unfortunately this does not scroll down to the last item and makes it visible. The last item is often hidden and you see the last but one item.  You can recognize this when you check the scrollbar after an item is added. It is not completely at the end but you can still scroll a little bit down. 



SY Suthi Yuvaraj Syncfusion Team November 8, 2022 02:55 AM UTC

We are unable to reproduce the issue at our end ,when adding the new item to the list with Datasource collection changed event ,scrolling works fine. As the DataSourceCollectionChanged  Event will get notification for the change in the source collection , you can scroll to the last item using ScrollTo or ScrollToRowIndex. We have attached the tested sample and output video for your reference.


Please modify the sample or share the below details if your still facing the issue which will be more helpful for us to find the solution as soon as possible.

  1. Code snippet relate to SfListView.
  2. Code snippet related to customization if any (like AutoFitMode, etc).
  3. Code snippet related to event if any.
  4. Platform related details.
  5. Replication video or image to illustrate the issue.
  6. .NET MAUI dependency packages version.
  7. Syncfusion.Maui.ListView version.


SY Suthi Yuvaraj Syncfusion Team November 8, 2022 03:05 AM UTC

Please find the attachment in this update 


Attachment: ScrollTo_768cca8.zip


FR Frank November 8, 2022 09:29 AM UTC

I agree it looks good on the Android platform. In the zip file you can find a video which I recorded on the Windows platform.

Beginning with the 8th element the effect is visible. After the 8th element is added it is not shown completely but only the top of it is visible.

After another item is added the scrollbar is clearly not at the end. A mouse click on the scrollbar always shows one more element. 



Attachment: 20221108_102228_cdfcb01b.zip


SY Suthi Yuvaraj Syncfusion Team November 9, 2022 01:29 PM UTC

We are able to reproduce the issue at our end. We have logged a bug report for the reported issue Want to scroll to added item ". We will fix the issue and include the fix in our weekly nuget which will be rolled out on November 29,2022. We will let you know once it is released with the fix. You can also track the status of the report from the below link.  


Feedback link: https://www.syncfusion.com/feedback/38955/windowsprogrammatic-scrolling-doesnot-works-properly-when-adding-the-items-to-the


Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.



SY Suthi Yuvaraj Syncfusion Team November 30, 2022 02:09 PM UTC

We would like to let you know that , we have tested the reported scenario in source level , we are able the reproduce the same Framework level also , we have used the Framework scrollview and exdented its functionalities in SfListView source, so issue in framework scrollview will affects the listview scrollview. We are trying to fix this issue in source level , we will let you know once you we have fixed the issue. we have logged this issue is logged as bug in framework level.


Please refer to the framework issue report for more reference,

Bug report: https://github.com/dotnet/maui/issues/11526



SY Suthi Yuvaraj Syncfusion Team February 21, 2023 02:46 PM UTC

We have fixed the reported issue “Want to scroll to added item” and included the issue fix in our latest NuGet release update version 20.4.0.51 which is available for download (https://www.nuget.org/).  We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you require any further assistance.


Loader.
Live Chat Icon For mobile
Up arrow icon