Articles in this section
Category / Section

How to update ViewModel collection after re-ordering of ListView in Xamarin.Forms?

2 mins read

You can update the underlying collection after reordering the listview items are complete in Xamarin.Forms ListView.

XAML

The Button is used to save the collection after reordering the ListViewItems.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin;assembly=ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" xmlns:data="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>
    <StackLayout >
        <syncfusion:SfListView x:Name="ToDoListView" ItemSize="60" IsStickyHeader="True" ItemsSource="{Binding ToDoList}" DragStartMode="OnHold,OnDragIndicator" SelectionMode="None">
            <syncfusion:SfListView.DataSource>
                <data:DataSource>
                    <data:DataSource.GroupDescriptors>
                        <data:GroupDescriptor PropertyName="CategoryName" />
                    </data:DataSource.GroupDescriptors>
                </data:DataSource>
            </syncfusion:SfListView.DataSource>
      ...
            <syncfusion:SfListView.ItemTemplate>
                <DataTemplate>
                    <Frame HasShadow="True" Padding="0">
                        ...
                    </Frame>
                </DataTemplate>
            </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>
        <Button x:Name="saveButton" Text="Save" BackgroundColor="#949cdf" HeightRequest="50" Command="{Binding SaveOrderCommand}"/>
    </StackLayout>
</ContentPage>

C#

You can get the reordered data from the ListView.DataSource.DisplayItems and update the ListViewItems to the underlying collection in the Button.Clicked event.

public class Behavior : Behavior<ContentPage>
{
    SfListView ListView;
    Button SaveButton;
 
    protected override void OnAttachedTo(ContentPage bindable)
    {
        ListView = bindable.FindByName<SfListView>("ToDoListView");
        SaveButton = bindable.FindByName<Button>("saveButton");
        SaveButton.Clicked += SaveButton_Clicked;
        base.OnAttachedTo(bindable);
    }
 
    private void SaveButton_Clicked(object sender, EventArgs e)
    {
        var newList = new List<ToDoItem>();
        foreach (var item in ListView.DataSource.DisplayItems)
        {
            if (!(item is GroupResult))
                newList.Add((ToDoItem)item);
        }
        (ListView.BindingContext as ViewModel).ToDoList = new ObservableCollection<ToDoItem>(newList);
        App.Current.MainPage.DisplayAlert("Items order has been updated", "", "Close");
    }
}

C#

Update the grouping property in the ItemDragging event while dropping the items to other groups.

namespace ListViewXamarin
{
    public class Behavior : Behavior<ContentPage>
    {
        SfListView ListView;
 
        protected override void OnAttachedTo(ContentPage bindable)
        {
            ListView = bindable.FindByName<SfListView>("ToDoListView");
            ListView.ItemDragging += ListView_ItemDragging;
            base.OnAttachedTo(bindable);
        }
 
        private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e)
        {
            if (e.Action == DragAction.Drop)
            {
                int dropIndex = e.NewIndex;
                var dropItem = ListView.DataSource.DisplayItems[dropIndex];
                var dropedGroup = GetGroup(dropItem, e);
 
                if ((e.ItemData as ToDoItem).CategoryName != dropedGroup.Key.ToString())
                {
                    (e.ItemData as ToDoItem).CategoryName = dropedGroup.Key.ToString();
                }
            }
        }
 
        public GroupResult GetGroup(object itemData, ItemDraggingEventArgs args)
        {
            GroupResult itemGroup = null;
 
            foreach (var item in this.ListView.DataSource.DisplayItems)
            {
                if (itemData is GroupResult)
                {
                    if (args.OldIndex > args.NewIndex && item == itemData) break;
                    if (item is GroupResult) itemGroup = item as GroupResult;
                    if (args.OldIndex < args.NewIndex && item == itemData) break;
                }
                else
                {
                    if (item == itemData) break;
                    if (item is GroupResult) itemGroup = item as GroupResult;
                }
            }
            return itemGroup;
        }
    }
}

View sample in GitHub


Conclusion

I hope you enjoyed learning about how to update ViewModel collection after re-ordering of ListView in Xamarin.Forms.

You can refer to our Xamarin.Forms ListView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied