SfDataGrid 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. 

1. Create and load the data in Azure database
2. Bind data to SfDataGrid.

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

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.

Note: 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.

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.

Note: 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.

Step 4: Populate the records into the table and bind the items to SfDataGrid by setting SfDataGrid.ItemSource property in MainPage.xaml.cs file.

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

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.

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.

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.

Refer the demo sample for connecting Azure Mobile App service in SfDataGrid.

Sample: AzureMobileAppService