Alternate Row Color Update after Drag and Drop

[Chris]

Is there a way to update the alternate row colors of an SfListView after a drag and drop realignment?

Edit: I see that after setting...

this.listView.DragDropController.UpdateSource = true;

The listview attempts to update the rows alternate background colors. But, they don't update correctly, nor do they update every time a sort is done..

[Lakshmi Natarajan]

Hi Chris, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Alternate row color update after Drag and Drop” from our end. We would like to inform you that we could reproduce the reported issue at our side. On further analysis, the alternate colors are not updated properly when moving the items down to up and when moving item from up to down the SfListView updated properly as expected. We are currently working on it and provide you the further details on or before May 27, 2020. We appreciate your patience until then. 

 

Regards, 

Lakshmi Natarajan 

[Chandrasekar Sampathkumar]

Hi Chris, 

Thank you for your patience. 

We would like to let you know that when you set this.listView.DragDropController.UpdateSource as true, the dragged item is removed from the ListView ItemSource collection and the item is added into the collection after the item is dropped into new position and the converter will be triggered. This will work when the items are dragged and dropped from up to down which is the expected behaviour. In order to trigger converter on dragging and dropping from down to up call listView.RefreshListViewItem(-1, -1, true); in ListView ItemDragging event. Please refer the following code snippet for more reference, 

C#: Defining Converter Class 

namespace ListViewXamarin  

{ 

    public class IndexToColorConverter : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            var listview = parameter as SfListView; 

            var index = listview.DataSource.DisplayItems.IndexOf(value); 

            if (index % 2 == 0) 

                return Color.LightGray; 

            return Color.Aquamarine; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

} 

 

 

C#: Refreshing ListView items after a item is drag and dropped 

namespace ListViewXamarin 

{ 

    public partial class MainPage : ContentPage 

    { 

        public MainPage() 

        { 

            InitializeComponent(); 

            listView.DragDropController.UpdateSource = true; 

        } 

 

        private void ListView_ItemDragging(object sender, ItemDraggingEventArgs e) 

        { 

            if (e.Action == DragAction.Drop) 

            { 

                Device.BeginInvokeOnMainThread(() => 

            { 

                if (e.NewIndex < e.OldIndex) 

                { 

                    listView.RefreshListViewItem(-1, -1, true); 

                } 

            }); 

            } 

        } 

   } 

} 

 

Xaml: Applying Drag and drop to ListView, and adding converter to Grid BackgroundColor property 

<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="50" DragStartMode="OnHold" ItemDragging="ListView_ItemDragging"> 

    <syncfusion:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Grid Padding="10,0,0,0" 

                    BackgroundColor="{Binding ., Converter={StaticResource IndexToColorConverter}, 

                    ConverterParameter={x:Reference Name=listView}}"> 

                <Grid.RowDefinitions> 

                    <RowDefinition Height="*" /> 

                    <RowDefinition Height="*" /> 

                </Grid.RowDefinitions> 

                <Label LineBreakMode="NoWrap" VerticalTextAlignment="End" Text="{Binding ContactName}"/> 

                <Label Grid.Row="1" VerticalTextAlignment="Start" Text="{Binding ContactNumber}"/> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

 

We have prepared sample based on your requirement and you can download the same using the following link, 

Sample Link: SfListViewSample 

Video Link: VideoSample 

Please let us know if you need further assistance. 

Regards, 

Chandrasekar Sampathkumar