Reordering items when CheckBox is clicked

[Luis Gomez]

Hi, i have a ListView populated with elements that include a CheckBox.

What i want to achieve is, once the item checkbox is clicked, move that item to the end of the list, some kind of "task complete", but i dont know how to do it...

My listview code:

<xForms:SfListView x:Name="listaRapida" 

                       ItemSize="50"

                       ItemSpacing="3"

                       SelectionBackgroundColor="Transparent"

                       ItemTapped="ListaRapida_OnItemTapped">

                    <xForms:SfListView.LayoutManager>

                        <xForms:GridLayout SpanCount="1" />

                    </xForms:SfListView.LayoutManager>

                    <xForms:SfListView.ItemTemplate>

                        <DataTemplate>

                            <Frame BorderColor="Chartreuse" x:Name="frame" CornerRadius="10" BackgroundColor="Black" Padding="0" >

                                <Grid >

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="0.5*" />

                                        <RowDefinition Height="*" />

                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="*" />

                                        <ColumnDefinition Width="*" />

                                        <ColumnDefinition Width="0.3*" />

                                    </Grid.ColumnDefinitions>

                                    <Label Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Text="Artículo" TextColor="Chartreuse" FontFamily="{StaticResource FuenteNormal}" />

                                    <Label Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" Text="Unidades" TextColor="Chartreuse" FontFamily="{StaticResource FuenteNormal}" />

                                    <Label Grid.Row="1" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" Text="{Binding ListaRapidaName}" FontSize="23" TextColor="Chartreuse" FontFamily="{StaticResource FuenteNegrita}" />

                                    <Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" Text="{Binding ListaRapidaUnidades}" FontSize="23" TextColor="Chartreuse" FontFamily="{StaticResource FuenteNegrita}" />

                                    <buttons:SfCheckBox x:Name="marca"

                                                        Grid.Row="0" 

                                                        Grid.RowSpan="2" 

                                                        Grid.Column="2" 

                                                        HorizontalOptions="FillAndExpand" 

                                                        VerticalOptions="FillAndExpand" 

                                                        UncheckedColor="Chartreuse"

                                                        StateChanged="Marca_OnStateChanged"

                                                        />

                                </Grid>

                            </Frame>

                        </DataTemplate>

                    </xForms:SfListView.ItemTemplate>

                </xForms:SfListView>

Could you please tell me how to achieve it?

Thank you

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Reordering items when CheckBox is clicked” from our end. We would like to inform you that you can reorder the items when checkbox is clicked using Move method of the ObservableCollection. You can change the collection in the StateChanged event of the SfCheckBox. Please refer the following code snippets for more reference, 

 

Xaml: Bind IsChecked property for the CheckBox and trigger StateChanged event. 

<syncfusion:SfListView x:Name="listView" ItemSize="60" ItemsSource="{Binding ContactsInfo}"> 

    <syncfusion:SfListView.ItemTemplate > 

        <DataTemplate> 

            <Grid x:Name="grid"> 

                <Grid.ColumnDefinitions> 

                    <ColumnDefinition Width="70" /> 

                    <ColumnDefinition Width="*" /> 

                    <ColumnDefinition Width="70" /> 

                </Grid.ColumnDefinitions> 

                <Image Source="{Binding ContactImage}" VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="50" WidthRequest="50"/> 

                <Grid Grid.Column="1" RowSpacing="1" Padding="10,0,0,0" VerticalOptions="Center"> 

                    <Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ContactName}"/> 

                    <Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ContactNumber}"/> 

                </Grid> 

                <checkbox:SfCheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}" Grid.Column="2" StateChanged="SfCheckBox_StateChanged"/> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

Code behind: Get the currentIndex of the Item from DataSource.DisplayItems. 

private void SfCheckBox_StateChanged(object sender, Syncfusion.XForms.Buttons.StateChangedEventArgs e) 

{ 

    var currentIndex = listView.DataSource.DisplayItems.IndexOf((sender as SfCheckBox).BindingContext as Contacts); 

    if (e.IsChecked == true) 

    { 

        viewModel.ContactsInfo.Move(currentIndex, listView.DataSource.DisplayItems.Count-1); 

    } 

} 

 

We have attached the sample based on your requirement in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/155519-412253108 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Hello, thanks for your answer

I have implemented your solution, but it throws me an exception related to index:

'Index was out of range. Must be non-negative and less than the size of the collection.

Parameter name: index'

i have attached a Rar with affected files, let me know if i did something wrong.

Thanks in advance

Attachment: Files_2840ca4f.rar

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for the update. 

 

We have checked the provided code snippets from our end. We would like to inform you that the ViewModel collection does not updated which caused the reported exception. We suggest you to update the ViewModel collection to resolve the reported scenario, 

 

Code snippet: Set ViewModel collection. 

public Rapida() 

{ 

    InitializeComponent(); 

    viewModel.ContactsInfo = App.DAUtil.GetAllRapidas(); 

    listaRapida.ItemsSource = viewModel.ContactsInfo; 

} 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Hi

I have implemented the code you shared with me, but it throws me an error code in App.DAUtil.GetAllRapidas();

Error code CS0029:  Cannot implicitly convert type 'System.Collections.Generic.List<AppListo.Rapidas>' en 'System.Collections.ObjectModel.ObservableCollection<AppListo.Rapidas>'

What is wrong?

Thank you

[Lakshmi Natarajan]

Hi Luis, 

 

We have checked the reported query exception from our end. We would like to inform you that the reported issue occurs due to the App.DAUtil.GetAllRapidas returns List collection. But, your ViewModel collection is the type of ObservableCollection. So, we suggest you to use List collection for the ViewModel collection instead of ObservableCollection to resolve the reported scenario. 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Luis Gomez]

Hi, thanks for your answer, and sorry for all the troubles...

I have changed ObservableCollection for List:

public DataAccess()

        {

            

            

            dbConn = DependencyService.Get<ISQLite>().GetConnection();

            dbConn.CreateTable<Employee>();

            dbConn.CreateTable<Listas>();

            dbConn.CreateTable<Rapidas>();

            ContactsInfo = new List<Rapidas>();

        }

        

        public List<Rapidas> ContactsInfo { get; set; } 

but: 

viewModel.ContactsInfo.Move(currentIndex, listaRapida.DataSource.DisplayItems.Count - 1);

...throws an error at .Move, so i changed to MoveTo...

public Rapida()

        {

            InitializeComponent();

            

            viewModel.ContactsInfo = App.DAUtil.GetAllRapidas();

            listaRapida.ItemsSource = viewModel.ContactsInfo;

        }

        private void SfCheckBox_StateChanged(object sender, Syncfusion.XForms.Buttons.StateChangedEventArgs e)

        {

            var currentIndex = listaRapida.DataSource.DisplayItems.IndexOf((sender as SfCheckBox).BindingContext as Rapidas);

            if (e.IsChecked == true)

            {

                viewModel.ContactsInfo.MoveTo(currentIndex, listaRapida.DataSource.DisplayItems.Count - 1);

            }

        }

...but when i click the checkbox, nothing happens...

Do i have to use MoveTo?

Thanks in advance

[Lakshmi Natarajan]

Hi Luis, 

 

We have updated the response for the reported query in this forum (155579). Please find the response in the respected forum for further updates. 

 

Regards, 

Lakshmi Natarajan