We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load the data from SQLite online database in SfListView?

Platform: Xamarin.Forms |
Control: SfListView

SfListView allows you to bind the data from online database with the help of Azure App Service. To achieve this, you need to follow the below steps:

Step 1: Get URL to store the data online.

Step 2: Create table using AppServiceHelpers.

Step 3: Populate the data into the table using the ObservableCollection Items.

Step 4: Bind it to SfListView using SfListView.ItemSource property.

Step 5: Refer the following link to know more about working with Azure App Service.

https://blog.xamarin.com/add-a-backend-to-your-app-in-10-minutes/ 

 

Note:

Need to install the following nuget packages to successfully run the application

  • Microsoft.Azure.Mobile.Client(v.2.1.1)
  • Microsoft.Azure.Mobile.Client.SQLiteStore(v.2.1.1)
  • AppService.Helpers (Does not support UWP platform)
  • AppService.Helpers.Forms (Does not support UWP platform)

 

 

 

Refer the below code which illustrates, how to initialize the library with the URL of the Azure Mobile App and registering the Model with the client to create a table.

C#

public App()
{
  InitializeComponent();
  IEasyMobileServiceClient client = new EasyMobileServiceClient();
  client.Initialize("http://xamarin-todo-sample.azurewebsites.net");
  client.RegisterTable<ToDo>();
  client.FinalizeSchema();
  MainPage = new NavigationPage(new Pages.ToDoListPage(client));
}

 

Refer the following code which illustrates, how to create a table using AppServiceHelpers and insert items in it.

C#

using AppServiceHelpers.Abstractions;
using AppServiceHelpers.Models;
public class BaseAzureViewModel<T> : INotifyPropertyChanged where T : EntityData
{
   IEasyMobileServiceClient client;
   ITableDataStore<T> table; 
 
   public BaseAzureViewModel(IEasyMobileServiceClient client)
   {
     this.client = client;
     table = client.Table<T>();
   }
 
   // Returns an ObservableCollection of all the items in the table
   ObservableCollection<T> items = new ObservableCollection<T>();
   public ObservableCollection<T> Items
   {
     get { return items; }
     set
     {
       items = value;
       OnPropertyChanged("items");
     }
   }
 
   // Adds an item to the table.
   public async Task AddItemAsync(T item)
   {
     await table.AddAsync(item);
   }
 
   // Deletes an item from the table.
   public async Task DeleteItemAsync(T item)
   {
     await table.DeleteAsync(item);
   }
 
   // Updates an item in the table.
   public async Task UpdateItemAsync(T item)
   {
     await table.UpdateAsync(item);
   }
 
   // Refresh the table and sychronize data with Azure.
   Command refreshCommand;
   public Command RefreshCommand
   {
     get { return refreshCommand ?? (refreshCommand = new Command(async () => await ExecuteRefreshCommand())); }
   }
 
   async Task ExecuteRefreshCommand()
   {
     if (IsBusy)
       return;
 
     IsBusy = true;
 
     try
     {
       var _items = await table.GetItemsAsync();
       Items.Clear();
       foreach (var item in _items)
       {
       Items.Add(item);
       }
       IsBusy = false;
     }
     catch (Exception ex)
     {
       await Application.Current.MainPage.DisplayAlert("Error", ex.Message, "OK");
     }
   }
 
   public event PropertyChangedEventHandler PropertyChanged;
   public void OnPropertyChanged(string propertyName)
   {
     if (PropertyChanged == null)
        return;
 
     PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
   }
}

 

Refer the following code to bind the table contents into the SfListView:

C#

public partial class ToDoListPage : ContentPage
{
  public ToDoListPage(IEasyMobileServiceClient client)
  {
    InitializeComponent();
    var viewModel = new ViewModels.ToDosViewModel(client);
    BindingContext = viewModel;
    listView.ItemsSource = viewModel.Items;
  }
 
  private void Fetcbutton_Clicked(object sender, EventArgs e)
  {
    var vm = (ToDosViewModel)BindingContext;
    vm.RefreshCommand.Execute(null);
  }
}

 

XAML:

<ContentPage>
 <ContentPage.Content>
   <StackLayout>
     <syncfusion:SfListView x:Name="listView"
                      SelectedItem="{Binding SelectedToDoItem, Mode=TwoWay}"
                      ItemSize="50">
      <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
              <Label Text="{Binding Text}" />
              <Switch IsToggled="{Binding Completed}"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
     <Button Text="Add New" Command="{Binding AddNewItemCommand}"/>
     <Button Text="Fetch" Command="{Binding FetchItemCommand}" />
   </StackLayout>
 </ContentPage.Content>
</ContentPage>

 

Click here to download the sample. In the sample, click the Fetch button to get the data from online and load into the SfListView.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile