How to connect an Azure Mobile App service in UWP DataGrid(SfDataGrid)?
Binding data from Azure Mobile App service
UWP DataGrid support to load the data from online database with the help of Azure Mobile App Service. In this walk-through, you will learn about binding data from the online database and save back the changes to the database.
- Create and load the data in Azure database
- Bind data to SfDataGrid.
Create and load the data in online database
Refer the below link to create and load the data from the Azure SQL database,
https://docs.microsoft.com/en-us/azure/sql-database/sql-database-design-first-database
Bind data to SfDataGrid
You can follow the below steps to bind the data from the Azure SQL database.
Step 1: Install the package of Microsoft.Azure.Mobile.Client for Mobile Apps service in the application.
Step 2: Initialize the below code in App.xaml.cs file once after installing Azure Mobile App NuGet packages on your application.
Refer the Create a server-level firewall rule topic under the Azure SQL database page to get the generated URL (Ex:http://applicationname.azurewebsites.net) which is used to connect your server and databases on your application.
C#
using Microsoft.WindowsAzure.MobileServices;
//To connect your server and database by setting server name URL
public static MobileServiceClient MobileService = new MobileServiceClient("http://applicationname.azurewebsites.net");
Step 3: You must create a model class and maintain the model class name as Azure table name and also maintain the same property name.
You must have “Id” property in the model class, to store the unique data format as like Azure table. Otherwise, you will get the following error "No 'id' member found on type" in the application.
C#
public class EmployeeInfoDetail: INotifyPropertyChanged
{
#region Fields
private string id;
private int empid;
private string empName;
private string empLastName;
#endregion
#region public
/// <summary>
/// Gets or Sets the Id
/// </summary>
public string Id
{
get { return id; }
set
{
id = value;
RaisePropertyChanged("Id");
}
}
/// <summary>
/// Gets or Sets the EMPID
/// </summary>
public int EMPID
{
get { return empid; }
set
{
empid = value;
RaisePropertyChanged("EMPID");
}
}
/// <summary>
/// Gets or Sets the EMPFIRSTNAME
/// </summary>
public string EMPFIRSTNAME
{
get { return empName; }
set
{
empName = value;
RaisePropertyChanged("EMPFIRSTNAME");
}
}
/// <summary>
/// Gets or Sets the EMPLASTNAME
/// </summary>
public string EMPLASTNAME
{
get { return empLastName; }
set
{
empLastName = value;
RaisePropertyChanged("EMPLASTNAME");
}
}
public EmployeeInfoDetail()
{
}
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyname)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
}
}
#endregion
}
Step 4: Populate the records into the table and bind the items to SfDataGrid by setting SfDataGrid.ItemSource property in MainPage.xaml.cs file.
C#
using Microsoft.WindowsAzure.MobileServices;
// to set the MobileServiceCollection for datatable
MobileServiceCollection<EmployeeInfoDetail, EmployeeInfoDetail> newItems;
this.datagrid.Loaded += Datagrid_Loaded;
/// <summary>
/// To load the itemsource to SfDataGrid
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">Contains the event data</param>
private async void Datagrid_Loaded(object sender, RoutedEventArgs e)
{
// Query that returns all items.
newItems = await ViewModel.UserTableObj.ToCollectionAsync();
//to bind the table to the dataGrid.ItemSource
this.dataGrid.ItemsSource = newItems;
}
Data Manipulation
You can insert, update and delete the record from the SfDataGrid in the application and the view changes are reflected to the online database.
1. Add new records in Azure table
2. Update the value in Azure table
3. Remove the records in Azure table
Add new records in Azure table
While inserting a new record in the SfDataGrid and the changes are reflected in the Azure table by using InsertAsync method. Refer the below code to insert the new record in SfDataGrid and Azure table.
C#
/// <summary>
/// To insert the new record in the SfDataGrid and Azure table
/// </summary>
/// <param name="sender">Reference to the control/object that raised the event</param>
/// <param name="e">Contains the event data</param>
private void InsertRecords(object sender, RoutedEventArgs e)
{
empInfo = new EmployeeInfoDetail();
empInfo.EMPID = Convert.ToInt32(empIdTxt.Text);
empInfo.EMPFIRSTNAME = empFirstTxt.Text;
empInfo.EMPLASTNAME = empLastTxt.Text;
// to add new items in the collection
newItems.Add(empInfo);
// to insert the new record in Azure table
ViewModel.UserTableObj.InsertAsync(empInfo);
}
Update the value in Azure table
You can able to manage the current records from RowValidated event. By this event, you can use the UpdateAsync method to update the modified value in Azure table. Refer the below code to update the record in SfDataGrid and Azure table.
C#
// to update the value in SfDataGrid by handling RowValidated event
this.datagrid.RowValidated += UpdateRecords;
/// <summary>
/// To update the record value in the SfDataGrid and Azure database
/// </summary>
/// <param name="sender">The source of the event. </param>
/// <param name="e">Contains the event data</param>
private void UpdateRecords(object sender, Syncfusion.UI.Xaml.Grid.RowValidatedEventArgs e)
{
var data = e.RowData as EmployeeInfoDetail;
// update the record in Azure table
ViewModel.UserTableObj.UpdateAsync(data);
}
Remove the records in Azure table
While removing the selected records in SfDataGrid by pressing the Delete key and the changes are reflected in the Azure table by handling RecordDeleting event. In that event, you can use the DeleteAsync method to remove the record from Azure table. Refer the below code to remove the record in SfDataGrid and Azure table.
C#
// to remove the records in SfDataGrid by pressing Delete key and then remove the records in Azure database by handling RecordDeleting event
this.datagrid.RecordDeleting += DeleteRecords;
/// <summary>
/// To delete the record in the SfDataGrid and Azure table
/// </summary>
/// <param name="sender">The source of the event. </param>
/// <param name="e">Contains the event data</param>
private void DeleteRecords(object sender, Syncfusion.UI.Xaml.Grid.RecordDeletingEventArgs e)
{
foreach (EmployeeInfoDetail data in e.Items)
{
// to remove the record in Azure table
ViewModel.UserTableObj.DeleteAsync(data);
}
}
Refer the demo sample for connecting Azure Mobile App service in SfDataGrid.
Sample: AzureMobileAppService
