1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to scroll to GroupHeader in SfListView

How to scroll to GroupHeader in SfListView

Hi, i have a ProductModel like this: 

Public class ProductModel 
{
     Public string Name {get; set;}
     Public string Image {get; set;}
     Public string ProductGroup {get; set;}
}

And my SfListView Group Property is ProductGroup. Now i have a List of ProductGroup and if any item of that list is selected. SfListView will scrolling to a Group Header contain that ProductGroup.

The thing is that i dont know how to make SfListView scrolling to specific Group Header.

3 Replies
LN Lakshmi Natarajan Syncfusion Team May 14, 2020 05:41 PM UTC

Hi Kien, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query “How to scroll to GroupHeader in SfListView” from our end. We would like to inform you that you can achieve your requirement using SelectionChanging event of SfListView. You can get the GroupResult of the selected item in sample level. Using ScrollToRowIndex method, you can scroll to the particular GroupHeader. Please refer the following code snippets for more reference, 
 
Behavior: Get the Group information from DataSource.DisplayITems. 
public class Behavior : Behavior<ContentPage> 
{ 
    SfListView ListView; 
 
    protected override void OnAttachedTo(ContentPage bindable) 
    { 
        ListView = bindable.FindByName<SfListView>("listView"); 
        ListView.SelectionChanging += ListView_SelectionChanging; 
 
        base.OnAttachedTo(bindable); 
    } 
 
    private void ListView_SelectionChanging(object sender, ItemSelectionChangingEventArgs e) 
    { 
        var group = GetGroup(e.AddedItems[0]); 
        var index = ListView.DataSource.DisplayItems.IndexOf(group); 
           ListView.LayoutManager.ScrollToRowIndex(ListView.DataSource.DisplayItems.IndexOf(group), Syncfusion.ListView.XForms.ScrollToPosition.Start); 
    } 
 
    public GroupResult GetGroup(object itemData) 
    { 
        GroupResult itemGroup = null; 
 
        foreach (var item in this.ListView.DataSource.DisplayItems) 
        { 
            if (item is GroupResult) 
                itemGroup = item as GroupResult; 
 
            if (item == itemData) 
                break; 
        } 
        return itemGroup; 
    } 
} 
 
We have prepared sample based on your requirement and attached in the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 


KI Kien.Phat May 15, 2020 04:14 AM UTC

Hi, thank for your support.

This is not what i want but it's really close to it. But now i have another problem. 

How can we get GroupHeader Key when it have been Tapped ?

LN Lakshmi Natarajan Syncfusion Team May 15, 2020 09:05 AM UTC

Hi Kien, 
 
Thank you for the update. 
 
We have checked the reported query “How to get the GroupHeader Key when tapped” from our end. We would like to inform you that you can get the GroupHeader Key for the Tapped item using ItemTapped event in SfListView. The ItemTappedArgs has the following properties of the tapped item, 
 
ItemTappedEventArgs 
Description 
It gets the type of the tapped item. 
The underlying data associated with the tapped item as its arguments. 
Gets the touch position in the tapped item. 
 
You can get the GroupResult based on the ItemData and GroupResult has the information about the group like Key, Count, IsExpanded. Please refer the following code snippets to achieve your requirement, 
 
Behavior: 
public class Behavior : Behavior<ContentPage> 
{ 
    SfListView ListView; 
    GroupResult Group; 
 
    protected override void OnAttachedTo(ContentPage bindable) 
    { 
        ListView = bindable.FindByName<SfListView>("listView"); 
        ListView.ItemTapped += ListView_ItemTapped; 
        base.OnAttachedTo(bindable); 
    } 
 
    private void ListView_ItemTapped(object sender, Syncfusion.ListView.XForms.ItemTappedEventArgs e) 
    { 
        var index = 0; 
        if (e.ItemType == ItemType.GroupHeader) 
        { 
            index = ListView.DataSource.DisplayItems.IndexOf(e.ItemData); 
        } 
        else if (e.ItemType == ItemType.Record) 
        { 
            Group = GetGroup(e.ItemData); 
            index = ListView.DataSource.DisplayItems.IndexOf(Group); 
        } 
        ListView.LayoutManager.ScrollToRowIndex(index, Syncfusion.ListView.XForms.ScrollToPosition.Start); 
        App.Current.MainPage.DisplayAlert("Group Header Key", "" + Group.Key, "Ok"); 
    } 
 
    public GroupResult GetGroup(object itemData) 
    { 
        GroupResult itemGroup = null; 
 
        foreach (var item in this.ListView.DataSource.DisplayItems) 
        { 
            if (item is GroupResult) 
                itemGroup = item as GroupResult; 
 
            if (item == itemData) 
                break; 
        } 
        return itemGroup; 
    } 
    #endregion 
} 
 
We have attached the modified sample in the following link, 
 
Please refer our online user guidance document regarding ItemTapped event from the following link, 
 
Lakshmi Natarajan 
 


Loader.
Up arrow icon