Articles in this section
Category / Section

How to load the picker editor ItemsSource from SQLite offline database in Xamarin.Forms DataForm?

9 mins read

DataForm allows you to load the picker editor ItemsSource from local database using SQLite. To achieve this, follow the steps:

 

  1. Add the database to the cross-platform projects Resource folder.

 

Refer to the following link to know how to create SQLite connection:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/databases

 

  1. Create a connection with the database using interface in cross platform projects and create an interface in PCL project.

 

 
  public interface ISQLite
  {
        SQLiteConnection GetConnection();
  }

 

  1. Create a class inherited from the ISQLite interface in cross-platform project and get connection with the offline database.

 

In Android cross-platform project,

 

  public class SQLite_Android : ISQLite
    {
        public SQLite_Android()
        {
        }
 
 
        public SQLite.SQLiteConnection GetConnection()
        {
            var sqliteFilename = "SampleSQLites.db3";
            string documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal); // Documents folder
            var path = Path.Combine(documentsPath, sqliteFilename);
 
            // This is where we copy in the prepopulated database
            Console.WriteLine(path);
            if (!File.Exists(path))
            {
                var s = Forms.Context.Resources.OpenRawResource(Resource.Raw.SampleSQLites);  // RESOURCE NAME ###
 
                // create a write stream
                FileStream writeStream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.Write);
                // write to the stream
                ReadWriteStream(s, writeStream);
            }
 
            var conn = new SQLite.SQLiteConnection(path);
 
            // Return the database connection 
            return conn;
        }
 
        /// <summary>
        /// helper method to get the database out of /raw/ and into the user filesystem
        /// </summary>
        void ReadWriteStream(Stream readStream, Stream writeStream)
        {
            int Length = 256;
            Byte[] buffer = new Byte[Length];
            int bytesRead = readStream.Read(buffer, 0, Length);
            // write the required bytes
            while (bytesRead > 0)
            {
                writeStream.Write(buffer, 0, bytesRead);
                bytesRead = readStream.Read(buffer, 0, Length);
            }
            readStream.Close();
            writeStream.Close();
        }
    }

 

In iOS cross-platform project,

 

 
         public class SQLite_iOS : ISQLite
          {
          public SQLite_iOS ()
          {
          }
          public SQLite.SQLiteConnection GetConnection ()
          {
                    var sqliteFilename = "SampleSQLites.db3";
                   string documentsPath = Environment.GetFolderPath (Environment.SpecialFolder.Personal); // Documents folder
               string libraryPath = Path.Combine (documentsPath, "..", "Library"); // Library folder
               var path = Path.Combine(libraryPath, sqliteFilename);
               
                    // This is where we copy in the prepopulated database
               Console.WriteLine (path);
               if (!File.Exists (path)) {
                    File.Copy (sqliteFilename, path);
                    }
               var conn = new SQLite.SQLiteConnection(path);
 
             // Return the database connection 
          return conn;
          
           }
     }

 

In UWP cross-platform project,

 

 
    class SQLite_UWP : ISQLite
    {
        public SQLite_UWP()
        {
 
        }
        public SQLiteConnection GetConnection()
        {
            var databasename = "SampleSQLites.db3";
            var path = Path.Combine(ApplicationData.Current.LocalFolder.Path, databasename);
            var conn = new SQLite.SQLiteConnection(path);
            // Return the database connection 
            return conn;
        }
    }

 

  1. Create a model of DataForm. Here, the City property is used as picker editor.

 

ContactInfo.cs:   
 
  public class ContactInfo
    {
        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
    }
 
    public class PickerItem
    {
        public string CityName { get; set; }
    }

 

Refer to the following code example for binding the DataObject and register the editor as Picker for the property City using RegisterEditor in DataForm.

 

https://help.syncfusion.com/xamarin/sfdataform/editors#customizing-itemssource-of-picker

 

  
     if(Device.RuntimePlatform != Device.UWP) 
       dataForm.RegisterEditor("City", "Picker");  
         

 

  1. Initialize a database using SQLiteConnection to create table for storing data form items (other than picker) and insert the data form items (other than picker) and values in database table.

 

 
 
    public class ViewModel  
    {  
        SQLiteConnection database;  
        ObservableCollection<ContactInfo> orderItemCollection;
        ObservableCollection<ContactInfo> OrderList;
        public ObservableCollection<ContactInfo> OrderItemCollection  
        {  
            get  
            {  
                if (orderItemCollection == null)  
                {  
                    GetItems();  
                    orderItemCollection = OrderList;  
                }  
                return orderItemCollection;  
            }  
        }  
  
        public ViewModel()  
        {  
            database = DependencyService.Get<ISQLite>().GetConnection();  
            // Create the table  
            database.CreateTable<OrderItem>();  
             database.CreateTable<ContactInfo>();
            database.Query<ContactInfo>("INSERT INTO ContactInfo (ID,Name)values (1002,'Blake')");
            database.Query<ContactInfo>("INSERT INTO ContactInfo (ID,Name)values (1003,'Catherine')");
            database.Query<ContactInfo>("INSERT INTO ContactInfo (ID,Name)values (1004,'Jude')");
        }  
  
 

 

Get the database table data in DataForm when setting the DataObject.

 

 
     dataForm.DataObject = ViewModel.OrderItemCollection[0]; 
 
        public ObservableCollection<ContactInfo> OrderItemCollection  
        {  
            get  
            {  
                if (orderItemCollection == null)  
                {  
                    GetItems();  
                    orderItemCollection = OrderList;  
                }  
                return orderItemCollection;  
            }  
        }  
 
        public async void GetItems()  
        {  
            // Changing the database table items as ObservableCollection  
            var table = (from i in database.Table<ContactInfo>() select i);
 
            OrderList = new ObservableCollection<ContactInfo>();
 
            foreach (var order in table)
            {
                OrderList.Add(new ContactInfo()
                {
                    ID = order.ID,
                    Name = order.Name
                });
            }
            await Task.Delay(2000);
          }
 
 

 

Create a class to get the picker item in database.

 

  public class PickerItem
   {
        public string CityName { get; set; }
    }

 

 

  1. Initialize a separate database using SQLiteConnection to create a table for storing the data form picker items and insert the picker item value in table.

 

 
     public class ViewModel  
    {  
        SQLiteConnection pickerData;        
        List<PickerItem> pickerList;  
        public ViewModel()  
        {  
            //create the table for picker data.  
            pickerData = DependencyService.Get<ISQLite>().GetConnection();  
            pickerData.CreateTable<PickerItem>();  
  
            // Insert items into table.  
            pickerData.Query<PickerItem>("INSERT INTO PickerItem (CityName)values ('Chennai')");
            pickerData.Query<PickerItem>("INSERT INTO PickerItem (CityName)values ('Vatican')");
            pickerData.Query<PickerItem>("INSERT INTO PickerItem (CityName)values ('Paris')");
         }
     }
  1. Get the picker database table items as IEnumerable for picker editor in data form by setting the ItemSource of DataFormPickerItem in the AutoGeneratingDataFormItem event.

 

To display complex type property as picker (other than enum data type), refer to the user guide documentation.

 

https://help.syncfusion.com/xamarin/sfdataform/editors#loading-complex-type-property-values-in-picker

 

 

     
       dataForm.AutoGeneratingDataFormItem += DataForm_AutoGeneratingDataFormItem;  
 
       private void DataForm_AutoGeneratingDataFormItem(object sender, AutoGeneratingDataFormItemEventArgs e)  
        {  
            if(Device.RuntimePlatform != Device.UWP) 
            {
                 if (e.DataFormItem != null && e.DataFormItem.Name == "City")  
                 {  
                     var itemSource = ViewModel.GetPickerItems();           
                     (e.DataFormItem as DataFormPickerItem).DisplayMemberPath ="CityName";  
                     (e.DataFormItem as DataFormPickerItem).ValueMemberPath ="CityName";         
                     (e.DataFormItem as DataFormPickerItem).ItemsSource = itemSource;  
                  }  
               }  
          }
 
        public IEnumerable<PickerItem> GetPickerItems()  
        {  
            var table = (from i in pickerData.Table<PickerItem>() select i);  
            pickerList = new List<PickerItem>();  
            foreach (var order in table)  
            {  
                pickerList.Add(new PickerItem()  
                {  
                    CityName = order.CityName
                });  
            }  
            return pickerList;  
        }  
    }   

Note:

Picker editor is not supported in Xamarin.Forms.UWP platform.

 

You can refer to the DataForm user guide documentation to learn more about picker:

https://help.syncfusion.com/xamarin/sfdataform/editors#picker-editor

 

To download sample click PickerItemsFromSQLite.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied