Wrong item template selected after deleting an item from the list

[Pawel]

Hello,

I'm using SfListView with a template selector. Odd elemets are aligned to the right while even to the left. The problem is that after I delete an item from the list the item that fills the gap is misaligned. It fixes after I scroll misaligned item out of view. 

I attached video showing the issue. Also posted relevant code below.

public class AlbumMessageTemplateSelector : DataTemplateSelector

    {

        private readonly DataTemplate evenDataTemplate;

        private readonly DataTemplate oddDataTemplate;

        public AlbumMessageTemplateSelector()

        {

            this.evenDataTemplate = new DataTemplate(typeof(EvenAlbumMessageTemplate));

            this.oddDataTemplate = new DataTemplate(typeof(OddAlbumMessageTemplate));

        }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

        {

            var listview = container as SfListView;

            if (listview.DataSource.DisplayItems.IndexOf(item) % 2 == 1)

            {

                evenDataTemplate.SetValue(EvenAlbumMessageTemplate.ParentBindingContextProperty, container.BindingContext);

                return evenDataTemplate;

            }

            else

            {

                oddDataTemplate.SetValue(OddAlbumMessageTemplate.ParentBindingContextProperty, container.BindingContext);

                return oddDataTemplate;

            }

        }

    }

            <pullToRefresh:SfPullToRefresh x:Name="pullToRefresh" Grid.Row="1"

                                           RefreshCommand="{Binding RefreshCommand}"

                                           ProgressBackgroundColor="{StaticResource Gray-White}"

                                           ProgressStrokeColor="{StaticResource PrimaryColor}"

                                           RefreshContentHeight="50"

                                           RefreshContentWidth="50"

                                           TransitionMode="SlideOnTop"

                                           IsRefreshing="{Binding IsBusy}">

                <pullToRefresh:SfPullToRefresh.PullableContent>

                    <listView:SfListView

                        x:Name="listView"

                        Padding="{OnIdiom Default='0,0,0,0'}"

                        AutoFitMode="DynamicHeight"

                        HorizontalOptions="FillAndExpand"

                        IsStickyHeader="False"

                        VerticalOptions="Start"

                        ItemSpacing="0,0,0,0"

                        LoadMoreOption="AutoOnScroll"

                        LoadMorePosition="Bottom"

                        ItemTemplate="{StaticResource messageTemplateSelector}"

                        ItemsSource="{Binding Messages}"

                        LoadMoreCommand="{Binding LoadMoreCommand}"

                        LoadMoreCommandParameter="{Binding Source={x:Reference listView}}"

                        Style="{StaticResource TransparentSelectionListView}">

                        <listView:SfListView.Behaviors>

                            <behaviors:EventToCommandBehavior

EventName="ItemTapped"

Command="{Binding ItemTappedCommand}" />

                        </listView:SfListView.Behaviors>

                        <listView:SfListView.HeaderTemplate>

                            <DataTemplate>`

                                <template:AlbumReceiverTemplate />

                            </DataTemplate>

                        </listView:SfListView.HeaderTemplate>

                        <listView:SfListView.LoadMoreTemplate>

                            <DataTemplate>

                                <listView:LoadMoreIndicator

                                        IsRunning="{Binding IsBusy, Source={x:Reference Name=listView}}"

                                        IsVisible="{Binding IsBusy, Source={x:Reference Name=listView}}"

                                        Color="{StaticResource PrimaryColor}"

                                        VerticalOptions="Center"

                                        Margin="0,0,0,15"

                                        HeightRequest="30"

                                        WidthRequest="30"/>

                            </DataTemplate>

                        </listView:SfListView.LoadMoreTemplate>

                    </listView:SfListView>

                </pullToRefresh:SfPullToRefresh.PullableContent>

            </pullToRefresh:SfPullToRefresh>

Regards,

Paweł

Attachment: Android_Emulator__pixel_2_r_11_0__api_30_5554_20210920_213923_809d66fa.zip

[Lakshmi Natarajan]

Hi Pawel, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Wrong item template selected after deleting an item from the list” from our side. We could reproduce the reported scenario at our side. Currently, we are validating the reported scenario and update you further details on September 23, 2021. We appreciate your patience until then. 

 

Regards, 

Lakshmi Natarajan 

 

[Lakshmi Natarajan]

Hi Pawel, 

 

Thank you for your patience. 

 

We have checked the reported scenario at our side. On further analysis, you can overcome the reported scenario by refreshing the ListViewItem using the SfListView.RefreshListViewItem method.  

 

Please refer to the following code snippets for more reference, 

public class Behavior : Behavior<ContentPage> 

{ 

    SfListView ListView; 

    protected override void OnAttachedTo(ContentPage bindable) 

    { 

        ListView = bindable.FindByName<SfListView>("listView"); 

 

        ListView.DataSource.SourceCollectionChanged += DataSource_SourceCollectionChanged; 

        base.OnAttachedTo(bindable); 

    } 

 

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

    { 

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

        { 

            ListView.RefreshListViewItem(e.NewStartingIndex, e.OldStartingIndex, true); 

        } 

    } 

} 

 

We have attached the workable sample to achieve your requirement in the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/168997/ze/ListViewXamarin636131725 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan