MAUI - 883534 - How to populate data using WebAPI in MAUI DataGrid?

README.md

@@ -1,2 +1,107 @@
-# How-to-populate-data-using-WebAPI-in-MAUI-DataGrid-
-How to populate data using WebAPI in MAUI DataGrid?
+# How to populate data using WebAPI in MAUI DataGrid?
+The [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) supports binding the item source from a Web API.
+
+##### C#
+Create a **JSON** data model.
+
+**OrderInfo**
+```C#
+public class OrderInfo
+{
+    public int OrderID { get; set; }
+    public string? CustomerID { get; set; }
+    public int EmployeeID { get; set; }
+    public double Freight { get; set; }
+    public string? ShipCity { get; set; }
+    public bool Verified { get; set; }
+    public DateTime OrderDate { get; set; }
+    public string? ShipName { get; set; }
+    public string? ShipCountry { get; set; }
+    public DateTime ShippedDate { get; set; }
+    public string? ShipAddress { get; set; }
+}
+```
+Create a WebApiServices class within the Services folder.
+
+**WebApiServices**
+
+Utilize the webApiUrl to retrive the data using the ReadDataAsync() function. Read the response using the **ReadAsStringAsync()** method and deserialize the JSON object using the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) package.
+
+```C#
+internal class WebApiServices
+{
+    #region Fields
+
+    public static string webApiUrl = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; // Your Web Api here
+
+    HttpClient client;
+
+    #endregion
+
+    #region Constructor
+
+    public WebApiServices()
+    {
+        client = new HttpClient();
+    }
+
+    #endregion
+
+    #region RefreshDataAsync
+
+    /// <summary>
+    /// Retrieves data from the web service.
+    /// </summary>
+    /// <returns>Returns the ObservableCollection.</returns>
+    public async Task<ObservableCollection<OrderInfo>>? ReadDataAsync()
+    {
+        var uri = new Uri(webApiUrl);
+        try
+        {
+            //Sends request to retrieve data from the web service for the specified Uri
+            var response = await client.GetAsync(uri);
+
+            if (response.IsSuccessStatusCode)
+            {
+                var content = await response.Content.ReadAsStringAsync(); //Returns the response as JSON string
+                return JsonConvert.DeserializeObject<ObservableCollection<OrderInfo>>(content)!; //Converts JSON string to ObservableCollection
+            }
+        }
+        catch (Exception ex)
+        {
+            System.Diagnostics.Debug.WriteLine(@"ERROR {0}", ex.Message);
+        }
+
+        return null;
+    }
+
+    #endregion
+}
+```
+
+**OrderInfoViewModel**
+
+Populate the data using the ReadDataAsync() in the viewmodel.
+
+```C#
+private async void GenerateData()
+{
+    OrderInfoCollection = await webApiServices.ReadDataAsync()!;
+}
+```
+
+The following screenshot shows how to to populate data using WebAPI in MAUI DataGrid.
+
+![DataGrid with JSON data](SfDataGrid_WebApi.png)
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-populate-data-using-WebAPI-in-MAUI-DataGrid)
+
+Take a moment to pursue this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples.
+Please refer to this [link](https://www.syncfusion.com/maui-controls/maui-datagrid) to learn about the essential features of Syncfusion .NET MAUI DataGrid(SfDataGrid).
+
+### Conclusion
+I hope you enjoyed learning about how to populate data using WebAPI in MAUI DataGrid.
+
+You can refer to our [.NET MAUI DataGrid's feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
+For current customers, you can check out our .NET MAUI components from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components.
+If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/account/login?ReturnUrl=%2Faccount%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dc54e52f3eb3cde0c3f20474f1bc179ed%26redirect_uri%3Dhttps%253A%252F%252Fsupport.syncfusion.com%252Fagent%252Flogincallback%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520agent.api%2520integration.api%2520offline_access%2520kb.api%26state%3D8db41f98953a4d9ba40407b150ad4cf2%26code_challenge%3DvwHoT64z2h21eP_A9g7JWtr3vp3iPrvSjfh5hN5C7IE%26code_challenge_method%3DS256%26response_mode%3Dquery) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid). We are always happy to assist you!

SfDataGridSample/App.xaml

@@ -0,0 +1,14 @@
+<?xml version = "1.0" encoding = "UTF-8" ?>
+<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:local="clr-namespace:SfDataGridSample"
+             x:Class="SfDataGridSample.App">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

SfDataGridSample/App.xaml.cs

@@ -0,0 +1,12 @@
+namespace SfDataGridSample
+{
+    public partial class App : Application
+    {
+        public App()
+        {
+            InitializeComponent();
+
+            MainPage = new AppShell();
+        }
+    }
+}

SfDataGridSample/AppShell.xaml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Shell
+    x:Class="SfDataGridSample.AppShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:local="clr-namespace:SfDataGridSample"
+    Shell.FlyoutBehavior="Disabled"
+    Title="SfDataGridSample">
+
+    <ShellContent
+        Title="Home"
+        ContentTemplate="{DataTemplate local:MainPage}"
+        Route="MainPage" />
+
+</Shell>

SfDataGridSample/AppShell.xaml.cs

@@ -0,0 +1,10 @@
+namespace SfDataGridSample
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

SfDataGridSample/Helper/WebApiServices.cs

@@ -0,0 +1,53 @@
+using Newtonsoft.Json;
+using SfDataGridSample.Model;
+using System.Collections.ObjectModel;
+
+namespace SfDataGridSample
+{
+    internal class WebApiServices
+    {
+        #region Fields
+
+        public static string webApiUrl = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; // Your Web Api here
+
+        HttpClient client;
+
+        #endregion
+
+        #region Constructor
+        public WebApiServices()
+        {
+            client = new HttpClient();
+        }
+        #endregion
+
+        #region RefreshDataAsync
+
+        /// <summary>
+        /// Retrieves data from the web service.
+        /// </summary>
+        /// <returns>Returns the ObservableCollection.</returns>
+        public async Task<ObservableCollection<OrderInfo>>? ReadDataAsync()
+        {
+            var uri = new Uri(webApiUrl);
+            try
+            {
+                //Sends request to retrieve data from the web service for the specified Uri
+                var response = await client.GetAsync(uri);
+
+                if (response.IsSuccessStatusCode)
+                {
+                    var content = await response.Content.ReadAsStringAsync(); //Returns the response as JSON string
+                    return JsonConvert.DeserializeObject<ObservableCollection<OrderInfo>>(content)!; //Converts JSON string to ObservableCollection
+                }
+            }
+            catch (Exception ex)
+            {
+                System.Diagnostics.Debug.WriteLine(@"ERROR {0}", ex.Message);
+            }
+
+            return null;
+        }
+        #endregion
+    }
+}

SfDataGridSample/MainPage.xaml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
+            xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
+             xmlns:local="clr-namespace:SfDataGridSample"
+             x:Class="SfDataGridSample.MainPage">
+
+    <ContentPage.BindingContext>
+        <local:OrderInfoViewModel/>
+    </ContentPage.BindingContext>
+
+    <syncfusion:SfDataGrid ItemsSource="{Binding OrderInfoCollection}" 
+                        ColumnWidthMode="Auto"
+                        GridLinesVisibility="Both"
+                        HeaderGridLinesVisibility="Both">
+        <syncfusion:SfDataGrid.Columns>
+            <syncfusion:DataGridNumericColumn MappingName="OrderID" HeaderText="Order ID" Format="d"/>
+            <syncfusion:DataGridTextColumn MappingName="CustomerID" HeaderText="Customer ID"/>
+            <syncfusion:DataGridTextColumn MappingName="ShipName" HeaderText="Ship Name"/>
+        </syncfusion:SfDataGrid.Columns>
+    </syncfusion:SfDataGrid>
+
+
+
+</ContentPage>

SfDataGridSample/MainPage.xaml.cs

@@ -0,0 +1,18 @@
+using Syncfusion.Maui.DataGrid;
+using System;
+using System.Data;
+using System.Data.Common;
+using System.Reflection;
+namespace SfDataGridSample
+{
+    public partial class MainPage : ContentPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();            
+        }
+
+    }
+
+
+}

SfDataGridSample/MauiProgram.cs

@@ -0,0 +1,27 @@
+using Microsoft.Extensions.Logging;
+using Syncfusion.Maui.Core.Hosting;
+
+namespace SfDataGridSample
+{
+    public static class MauiProgram
+    {
+        public static MauiApp CreateMauiApp()
+        {
+            var builder = MauiApp.CreateBuilder();
+            builder
+                .UseMauiApp<App>()
+                .ConfigureSyncfusionCore()
+                .ConfigureFonts(fonts =>
+                {
+                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+                });
+
+#if DEBUG
+    		builder.Logging.AddDebug();
+#endif
+
+            return builder.Build();
+        }
+    }
+}

SfDataGridSample/Model/OrderInfo.cs

@@ -0,0 +1,17 @@
+namespace SfDataGridSample.Model
+{
+    public class OrderInfo
+    {
+        public int OrderID { get; set; }
+        public string? CustomerID { get; set; }
+        public int EmployeeID { get; set; }
+        public double Freight { get; set; }
+        public string? ShipCity { get; set; }
+        public bool Verified { get; set; }
+        public DateTime OrderDate { get; set; }
+        public string? ShipName { get; set; }
+        public string? ShipCountry { get; set; }
+        public DateTime ShippedDate { get; set; }
+        public string? ShipAddress { get; set; }
+    }
+}

SfDataGridSample/Platforms/Android/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+	<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+</manifest>

SfDataGridSample/Platforms/Android/MainActivity.cs

@@ -0,0 +1,11 @@
+using Android.App;
+using Android.Content.PM;
+using Android.OS;
+
+namespace SfDataGridSample
+{
+    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
+    public class MainActivity : MauiAppCompatActivity
+    {
+    }
+}

SfDataGridSample/Platforms/Android/MainApplication.cs

@@ -0,0 +1,16 @@
+using Android.App;
+using Android.Runtime;
+
+namespace SfDataGridSample
+{
+    [Application]
+    public class MainApplication : MauiApplication
+    {
+        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
+            : base(handle, ownership)
+        {
+        }
+
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}

SfDataGridSample/Platforms/Android/Resources/values/colors.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="colorPrimary">#512BD4</color>
+    <color name="colorPrimaryDark">#2B0B98</color>
+    <color name="colorAccent">#2B0B98</color>
+</resources>

SfDataGridSample/Platforms/MacCatalyst/AppDelegate.cs

@@ -0,0 +1,10 @@
+using Foundation;
+
+namespace SfDataGridSample
+{
+    [Register("AppDelegate")]
+    public class AppDelegate : MauiUIApplicationDelegate
+    {
+        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
+    }
+}

SfDataGridSample/Platforms/MacCatalyst/Entitlements.plist

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+    <!-- See https://aka.ms/maui-publish-app-store#add-entitlements for more information about adding entitlements.-->
+    <dict>
+        <!-- App Sandbox must be enabled to distribute a MacCatalyst app through the Mac App Store. -->
+        <key>com.apple.security.app-sandbox</key>
+        <true/>
+        <!-- When App Sandbox is enabled, this value is required to open outgoing network connections. -->
+        <key>com.apple.security.network.client</key>
+        <true/>
+    </dict>
+</plist>
+