Reordering

Hello, 

I have a SfListView with 2 groups:
     - the First Group where drag and drop item are allow
     - the Second Group where drag and drop aren't allow

When I switch 2 lines in the first Group, when I look into listView.DataSource.Groups[0] the order have not changed. 

Can you tell me if it's posible to recover the correct ordre of the group after drag and drop ?

Thank you for you help. 


5 Replies

SS SaiGanesh Sakthivel Syncfusion Team April 6, 2020 12:46 PM UTC

Hi Maxence, 
 
Thank you for contacting syncfusion support. 
 
We have checked the reported query “Reordering” from our end. We would like to inform that you can achieved your requirement by setting the UpdateSource property has True inside the SfListview.DragDropController and also change the LiveUpdateMode property has AllowDataShaping inside the SfListView.DataSource. please refer the following the code snippet for your reference. 
 
Code snippet 
<syncfusion:SfListView.DragDropController> 
  <syncfusion:DragDropController UpdateSource="True"/> 
</syncfusion:SfListView.DragDropController> 
<syncfusion:SfListView.DataSource> 
   <data:DataSource LiveDataUpdateMode="AllowDataShaping" > 
      <data:DataSource.GroupDescriptors> 
         <data:GroupDescriptor PropertyName="CategoryName"/> 
      </data:DataSource.GroupDescriptors> 
    </data:DataSource  > 
</syncfusion:SfListView.DataSource> 
 
Please let us know if the solution helps. 
 
Regards, 
SaiGanesh Sakthivel


MD Maxence Delval April 6, 2020 01:13 PM UTC

Hello, 

Thank you for your help, but it didn't work.

My Code : 
XAML:
<syncfusion:SfListView x:Name="listView" 
                                   Grid.Row="0"
                                   ItemsSource="{Binding ListFields}"
                                   DragStartMode="OnDragIndicator"
                                   ItemSize="60"
                                   ItemDragging="listView_ItemDragging"
                                   IsStickyGroupHeader="True"
                                   HeightRequest="60">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="60" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="60" />
                            </Grid.ColumnDefinitions>
                            <sfbutton:SfSwitch Grid.Column="0" IsOn="{Binding Check}" StateChanged="SfSwitch_StateChanged"/>
                            <Label x:Name="textLabel" Text="{Binding Libelle}" Grid.Column="1" FontSize="15" TextColor="#333333" VerticalOptions="Center"/>
                            <syncfusion:DragIndicatorView Grid.Column="2" ListView="{x:Reference listView}" HorizontalOptions="Center" VerticalOptions="Center">
                                <Grid >
                                    <Label Text="{StaticResource IconDragVertical}" FontFamily="{StaticResource MaterialFontFamily}" FontSize="24" HorizontalOptions="Start" VerticalOptions="Center"/>
                                </Grid>
                            </syncfusion:DragIndicatorView>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>

Code behind :
public SelectedFieldPage()
{
InitializeComponent();

 this.listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
PropertyName = "Check",
KeySelector = (object obj1) =>
{
var item = (obj1 as Field);
 return (item.Check ? "Champs Visibles" : "Champs Disponibles");
}
});

this.listView.DataSource.LiveDataUpdateMode = LiveDataUpdateMode.AllowDataShaping;
this.listView.DragDropController.UpdateSource = true;

BindingContext = viewModel = new SelectedFieldViewModel();
}

 private void listView_ItemDragging(object sender, Syncfusion.ListView.XForms.ItemDraggingEventArgs e)
{
var field = (Field)e.ItemData;

if (e.Action == DragAction.Start && !field.Check)
e.Cancel = true;
}

private void SfSwitch_StateChanged(object sender, Syncfusion.XForms.Buttons.SwitchStateChangedEventArgs e)
{
var button = sender as SfSwitch;
          var field = button.BindingContext as Field;

          listView.DataSource.Groups.RemoveItemInGroup(field);
          viewModel.ListFields.Add(field);
}

If a have the list : A / B / C
=> Groups[0] : A / B / C

An I switch the A and B ==> B / A / C
The Groups[0] is always A / B / C

Thanks for your help. 

Maxence



LN Lakshmi Natarajan Syncfusion Team April 7, 2020 03:29 PM UTC

Hi Maxence, 
 
Sorry for the inconvenience caused. 
 
We have checked the reported query “DataSource group collection is not updated after reordering the Listview items” from our end. We would like to inform you that the Group collection of DataSource is not updated when the ListViewItem is reordered. This is the expected behavior of SfListView. Meanwhile, you can get the new index of the Item which reordered from ItemDragging event and you can remove the item from the collection based on the new index value. Please refer the following code snippet for more reference, 
 
Code behind: 
private void listView_ItemDragging(object sender, Syncfusion.ListView.XForms.ItemDraggingEventArgs e) 
{ 
    var field = (Field)e.ItemData; 
 
    if (e.Action == DragAction.Start && !field.Check) 
        e.Cancel = true; 
 
    if (e.Action == DragAction.Drop) 
        index = e.NewIndex; 
} 
 
You can also refer our online document regarding the same from the following link, 
 
Please let us know if you need further assistance. 
 
Lakshmi Natarajan 
 



MD Maxence Delval April 9, 2020 03:11 PM UTC

Thanks
I make a workaround to recalculate the order of the listView. 
Have a good day.



LN Lakshmi Natarajan Syncfusion Team April 10, 2020 04:35 AM UTC

Hi Maxence, 
 
Thank you for the update. 
 
We are glad that your requirement has been met at your end. Please let us know if you need any further update. As always we are happy to help you out. 
 
Lakshmi Natarajan 


Loader.
Up arrow icon