Auto Refresh ListView after Dropping Table

[Luis Gomez]

Hi, 

How can i auto-refresh a SFListView after dropping and creating again the SQLite Table that feed listview?

My list view:

<xForms:SfListView x:Name="listaRapida" 

                       ItemSize="60"

                       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="0.4*" />

                                        <ColumnDefinition Width="0.2*" />

                                    </Grid.ColumnDefinitions>

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

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

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

                                    <Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{Binding ListaRapidaUnidades}" FontSize="27" 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"

                                                        IsChecked="{Binding IsChecked, Mode=TwoWay}"

                                                        StateChanged="SfCheckBox_StateChanged"

                                                        />

                                </Grid>

                            </Frame>

                        </DataTemplate>

                    </xForms:SfListView.ItemTemplate>

                </xForms:SfListView>

and when the button is clicked...

private async void BorrarItem_OnClicked(object sender, EventArgs e)

        {

            var db = new SQLiteConnection(dbPath);

            bool accepted = await DisplayAlert("Borrar registros", "ESTÁS SEGURO?", "SÍ", "NO");

            

                if (accepted)

            {

                LottieBorrar.Play();

                db.DropTable<Rapidas>();

                db.CreateTable<Rapidas>();

            }

            

                

        }

Thanks in advance

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “Auto refresh ListView after dropping table” from our end. We would like to inform you that you can refresh the SfListView programmatically by using SfListView.RefreshView method. 

 

Meanwhile, if this does not helps, please share more details about ItemsSource settings and revert us back your requirement in details which would be helpful for us to check on it and provide you the solution as soon as possible. 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Hi, I´m sorry, but i don´t how to use it...

Maybe you can share with me an example?

I´ll try to be more specific:

This is my listview

<xForms:SfListView x:Name="listaRapida" 

                       ItemSize="60"

                       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="0.4*" />

                                        <ColumnDefinition Width="0.2*" />

                                    </Grid.ColumnDefinitions>

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

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

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

                                    <Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="{Binding ListaRapidaUnidades}" FontSize="27" 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"

                                                        IsChecked="{Binding IsChecked, Mode=TwoWay}"

                                                        StateChanged="SfCheckBox_StateChanged"

                                                        />

                                </Grid>

                            </Frame>

                        </DataTemplate>

                    </xForms:SfListView.ItemTemplate>

                </xForms:SfListView>

This is the button:

<buttons:SfButton 

                    CornerRadius="40"

                    BackgroundColor="Black"

                    AbsoluteLayout.LayoutFlags="PositionProportional"  

                    AbsoluteLayout.LayoutBounds=".08,.93,60,60"

                    Clicked="BorrarItem_OnClicked">

                    <buttons:SfButton.Content>

                        <StackLayout Orientation="Horizontal">

                            <forms:AnimationView

                                x:Name="LottieBorrar" 

                                Animation="borrarRapida.json" 

                                AutoPlay="False"

                                HorizontalOptions="FillAndExpand" />

                        </StackLayout>

                    </buttons:SfButton.Content>

                </buttons:SfButton>

and this is the button's code-behind:

private async void BorrarItem_OnClicked(object sender, EventArgs e)

        {

            var db = new SQLiteConnection(dbPath);

            bool accepted = await DisplayAlert("Borrar registros", "ESTÁS SEGURO?", "SÍ", "NO");

                if (accepted)

            {

                LottieBorrar.Play();

                db.DropTable<Rapidas>();

                db.CreateTable<Rapidas>();

            }

        }

I want to refresh listaRapida after i Drop and Create the SQLite table Rapidas

Do you need anything more to make an example?

Thank you so much

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for the update. 

 

Based on the code snippets provided, you have binded ViewModel collection to the ListView.ItemsSource. We would like to inform you that we need to manually delete all the records from the ViewModel collection to reflect the changes in the UI. Currently, we are preparing sample for your requirement. We will check the reported query and update you the details on July 1, 2020. We appreciate your patience until then. 

 

Regards, 

Lakshmi Natarajan 

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for your patience. 

 

We have prepared a simple sample based on your requirement. We would like to inform you that the SfListView will be automatically refreshed when the ItemsSource is updated. Also, the collection will not be updated automatically when changing the database. So, we suggest you to bind ItemsSource for ListView with the ViewModel collection and update the collection when making changes in the database. Please refer the following code snippets, 

 

Xaml: Bind ListView.ItemsSource with the ViewModel collection. 

<ContentPage.BindingContext> 

    <local:ViewModel x:Name="viewModel"/> 

</ContentPage.BindingContext> 

 

<sync:SfListView x:Name="listView" 

                AutoFitMode="DynamicHeight" 

                AllowSwiping="True" 

                ItemsSource="{Binding OrderItemCollection}" 

                SelectionMode="None" BackgroundColor="Accent" > 

... 

 

Code behind: Update the ViewModel collection to update the UI. 

public partial class MainPage : ContentPage 

{ 

    public MainPage() 

    { 

        InitializeComponent(); 

        var list = App.Database.GetItemsAsync(); 

        viewModel.OrderItemCollection = new System.Collections.ObjectModel.ObservableCollection<OrderItem>(list); 

        removeButton.Clicked += Button_Clicked; 

    } 

 

    private void Button_Clicked(object sender, EventArgs e) 

    { 

        viewModel.database.DropTable<OrderItem>(); 

        viewModel.OrderItemCollection.Clear(); 

        viewModel.database.CreateTable<OrderItem>(); 

    } 

} 

 

We have attached the tested sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/1555791930531178 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Sorry for all the trouble...

I have opened question number  155579 and 155519 with you...

Two questions in the same code...i have attached needed files to reproduce the problems...

I need to order entries once the switchbutton is clicked and i need to delete all entries once the button is clicked

Maybe unified question helps us to solve the problem...

Please, tell me how to achieve it with the provided code, and sorry if i´m asking you so much, but i really need your help...

Thanks in advance

Attachment: Files_e002b415.rar

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for the update. 

 

We have checked the reported queries from our end. 

 

Query	Response
Need to order entries once the switchbutton is clicked	Sorry for the inconvenience caused. Based on the code snippets provided, we suggest you to use ObservableCollection to reorder the items. We would like to inform you that you can achieve the requirement using Move method of the ObservableCollection.    Please follow the below code snippets for more reference,  public Rapida()  {      InitializeComponent();      var vList = App.DAUtil.GetAllRapidas();      //Convert List to ObservableCollection and assign to ListView.ItemsSource.      viewModel.ContactsInfo = new System.Collections.ObjectModel.ObservableCollection<Rapidas>(vList);      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.Move(currentIndex, listaRapida.DataSource.DisplayItems.Count - 1);      }  }
Need to delete all entries once the button is clicked	We would like to let you know that you can delete the entries of the SfListView by clearing the ViewModel collection as suggested before.  private async void BorrarItem_OnClicked(object sender, EventArgs e)  {      bool accepted = await DisplayAlert("Borrar registros", "ESTÁS SEGURO?", "SÍ", "NO");        if (accepted)      {          viewModel.dbConn.DropTable<Rapidas>();          viewModel.ContactsInfo.Clear();            viewModel.dbConn.CreateTable<Rapidas>();      }  }

 

We have prepared based on the code snippets provided and modified based on your scenario, 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/155579531535519 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Thank you so much for your answer, it works!

But one little more question?

How do i keep checkbox checked when it moves on the list, and if its possible, how to move back to the start of the list if i uncheck it?

Thanks again.

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for the update. 

 

We have checked the reported queries. 

 

Query	Response
How do i keep checkbox checked when it moves on the list?	You can achieve this requirement by binding the SfCheckBox.IsChecked property. Please find the below code snippets,      public class Rapidas : INotifyPropertyChanged      {          [PrimaryKey, AutoIncrement]          ...          public bool IsChecked { get; set; }         }  Bind the mode property to the SfCheckBox.IsChecked property,  <buttons:SfCheckBox x:Name="marca"                  Grid.Row="0"                   Grid.RowSpan="2"                   Grid.Column="2"                   HorizontalOptions="FillAndExpand"                   VerticalOptions="FillAndExpand"                   UncheckedColor="Chartreuse"                  IsChecked="{Binding IsChecked}"/>    You can also refer to our user guidance document regarding the same from the following link,  UG link: https://help.syncfusion.com/xamarin/checkbox/getting-started#change-the-check-box-state
how to move back to the start of the list if i uncheck it?	You can achieve your requirement by changing the ViewModel collection based on IsChecked property.    Please refer the following code snippets,  <buttons:SfCheckBox x:Name="marca" Grid.Column="1"                                                 UncheckedColor="Chartreuse"                                                        IsChecked="{Binding IsChecked}" >    <buttons:SfCheckBox.GestureRecognizers>         <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>    </buttons:SfCheckBox.GestureRecognizers>  </buttons:SfCheckBox>    Code behind:  private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  {      var item = (sender as SfCheckBox).BindingContext as OrderItem;      var currentIndex = viewModel.OrderItemCollection.IndexOf(item);      if (item.IsChecked == true)      {          viewModel.OrderItemCollection.Move(currentIndex, viewModel.OrderItemCollection.Count - 1);      }      else if (item.IsChecked == false)      {          viewModel.OrderItemCollection.Move(currentIndex, 0);      }  }

 

Please let us know if you need further assistance, 

 

Regards, 

Lakshmi Natarajan 

 

[Luis Gomez]

Hi

Thank you so much!

It works very well.

I´m very grateful.

[Lakshmi Natarajan]

Hi Luis, 

 

Thank you for the update. 

 

We are glad that our solution meets your requirement. Please let us know if you need any further update. As always we are happy to help you out. 

 

Regards, 

Lakshmi Natarajan