SfListView - Chat Infinite Scrolling

I am using SfListView 18.3.0.40. Is there anyway to make SfListView smoother when retrieving more messages and put it on top of the list? Currently it is very jumpy. Please see the attached video.

I have followed this guide: https://www.syncfusion.com/kb/8678/how-to-load-more-items-in-upward-direction-automatically-when-reaching-the-top-of-the-list. I saw it has a comment in the example code snippet that says //Need to scroll back to previous position else the ScrollViewer moves to top of the list. Is there any way to not scroll up automatically.

Looking forward to hearing from you. Appreciate it!

Thank you,
Ben

Attachment: SfListView_84e673de.zip

1 Reply 1 reply marked as answer

LN Lakshmi Natarajan Syncfusion Team October 24, 2020 12:15 PM UTC

Hi Ben, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “SfListView - Chat Infinite Scrolling” from our side. We would like to inform you that, based on the implementation, it is recommended to scroll the ListView to the bottom. This is the behavior in LoadMore items at top automatically. We suggest you to provide maximum delay to load the items which prevents the jumpy look of the view and scroll to the first item of the list. Please refer the following code snippets and video for more reference, 
 
private async void LoadMoreOnTop() 
{ 
    //To get the current first item which is visible in the View. 
    var firstItem = ListView.DataSource.DisplayItems[0]; 
    ViewModel.IndicatorIsVisible = true; 
    await Task.Delay(1500); 
    var r = new Random(); 
 
    //To avoid layout calls for arranging each and every items to be added in the View.  
    ListView.DataSource.BeginInit(); 
    for (int i = 0; i < 5; i++) 
    { 
        var collection = new Message(); 
        collection.Text = ViewModel.MessageText[r.Next(0, ViewModel.MessageText.Count() - 1)]; 
        collection.IsIncoming = i % 2 == 0 ? true : false; 
        collection.MessagDateTime = DateTime.Now.ToString(); 
        ViewModel.Messages.Insert(0, collection); 
    } 
    ListView.DataSource.EndInit(); 
 
    var firstItemIndex = ListView.DataSource.DisplayItems.IndexOf(firstItem); 
    var header = (ListView.HeaderTemplate != null && !ListView.IsStickyHeader) ? 1 : 0; 
    var totalItems = firstItemIndex + header; 
 
    //Need to scroll back to previous position else the ScrollViewer moves to top of the list. 
    ListView.LayoutManager.ScrollToRowIndex(totalItems, true); 
    ViewModel.IndicatorIsVisible = false; 
} 
 
 
Meanwhile, we suggest you to use our Syncfusion Chat control which provides support to load more items at top by default. Please refer our user guidance document regarding the same from the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


Marked as answer
Loader.
Up arrow icon