How do you open a image file from DataGridTemplateColumn in .NET MAUI DataGrid?

README.md

@@ -1,2 +1,69 @@
-# How-to-open-a-image-file-from-DataGridTemplateColumn
-This demo shows how to open a image in a DataGridTemplateColumn
+# How do you open a image file from DataGridTemplateColumn in .NET MAUI DataGrid?  
+In this article, we will show you how to open a image file from DataGridTemplateColumn in [.Net Maui DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid).
+
+## xaml
+```
+<syncfusion:SfDataGrid x:Name="sfGrid"
+                       SelectionMode="Single"
+                       NavigationMode="Cell"
+                       GridLinesVisibility="Both"
+                       ColumnWidthMode="Auto"
+                       HeaderGridLinesVisibility="Both"
+                       AutoGenerateColumnsMode="None"
+                       ItemsSource="{Binding Employees}">
+
+    <syncfusion:SfDataGrid.Columns>
+        <syncfusion:DataGridTextColumn MappingName="EmployeeID"
+                                       HeaderText="Employee ID" />
+        <syncfusion:DataGridTextColumn MappingName="Name"
+                                       HeaderText="Employee Name" />
+        <syncfusion:DataGridTextColumn MappingName="Designation"
+                                       HeaderText="Designation" />
+        <syncfusion:DataGridTemplateColumn HeaderText="Image">
+            <syncfusion:DataGridTemplateColumn.CellTemplate>
+                <DataTemplate>
+                    <ImageButton Source="dot_icon.png"
+                                 Clicked="ImageButton_Clicked" />
+                </DataTemplate>
+            </syncfusion:DataGridTemplateColumn.CellTemplate>
+        </syncfusion:DataGridTemplateColumn>
+    </syncfusion:SfDataGrid.Columns>
+</syncfusion:SfDataGrid>
+```
+
+## C#
+The below code illustrates how to open a image file from DataGridTemplateColumn in DataGrid.
+```
+private void ImageButton_Clicked(object sender, EventArgs e)
+{
+    var imageButton = sender as ImageButton;
+    var rowData = (imageButton.BindingContext as Employee);
+
+    if (rowData != null)
+    {
+        // Assuming you have a method to show the image
+        ShowPartImage(rowData.URL);
+    }
+}
+
+private async Task ShowPartImage(string imageUrl)
+{
+    // Implement your logic to display the image
+    // For example, you can open a new page or a popup with the image
+    await Navigation.PushAsync(new PartImage(imageUrl));
+}
+```
+ ![OpenImg.gif](https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI3OTg3Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.EesChAO08inaEV5h7V57fgpJFlXIO9hZuC07jX0KIzQ)
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-open-a-image-file-from-DataGridTemplateColumn)
+
+Take a moment to explore this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more information 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 open a image file from DataGridTemplateColumn in .NET MAUI DataGrid (SfDataGrid).
+
+You can refer to our [.NET MAUI DataGrid’s feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) page to learn about its other groundbreaking feature representations. You can also explore our [.NET MAUI DataGrid Documentation](https://help.syncfusion.com/maui/datagrid/getting-started) to understand how to present and manipulate data. 
+For current customers, you can check out our .NET MAUI components on the [License and Downloads](https://www.syncfusion.com/sales/teamlicense) page. If you are new to Syncfusion, you can try our 30-day [free trial](https://www.syncfusion.com/downloads/maui) to explore our .NET MAUI DataGrid and other .NET MAUI components.
+
+If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/create) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid), or the feedback portal. 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/MainPage.xaml

@@ -0,0 +1,41 @@
+<?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:EmployeeViewModel x:Name="viewModel"/>
+    </ContentPage.BindingContext>
+
+
+    <syncfusion:SfDataGrid x:Name="sfGrid"
+                           Margin="10"
+                           SelectionMode="Single"
+                           NavigationMode="Cell"
+                           GridLinesVisibility="Both"
+                           ColumnWidthMode="Auto"
+                           HeaderGridLinesVisibility="Both"
+                           AutoGenerateColumnsMode="None"
+                           ItemsSource="{Binding Employees}">
+
+        <syncfusion:SfDataGrid.Columns>
+            <syncfusion:DataGridTextColumn MappingName="EmployeeID"
+                                           HeaderText="Employee ID" />
+            <syncfusion:DataGridTextColumn MappingName="Name"
+                                           HeaderText="Employee Name" />
+            <syncfusion:DataGridTextColumn MappingName="Designation"
+                                           HeaderText="Designation" />
+            <syncfusion:DataGridTemplateColumn HeaderText="Image">
+                <syncfusion:DataGridTemplateColumn.CellTemplate>
+                    <DataTemplate>
+                        <ImageButton Source="dot_icon.png"
+                                     Clicked="ImageButton_Clicked" />
+                    </DataTemplate>
+                </syncfusion:DataGridTemplateColumn.CellTemplate>
+            </syncfusion:DataGridTemplateColumn>
+        </syncfusion:SfDataGrid.Columns>
+    </syncfusion:SfDataGrid>
+
+</ContentPage>

SfDataGridSample/MainPage.xaml.cs

@@ -0,0 +1,33 @@
+using Syncfusion.Maui.DataGrid;
+using System.Collections;
+using System.Reflection;
+
+namespace SfDataGridSample
+{
+    public partial class MainPage : ContentPage
+    {
+        public MainPage()
+        {
+            InitializeComponent();
+        }
+
+        private void ImageButton_Clicked(object sender, EventArgs e)
+        {
+            var imageButton = sender as ImageButton;
+            var rowData = (imageButton.BindingContext as Employee);
+
+            if (rowData != null)
+            {
+                // Assuming you have a method to show the image
+                ShowPartImage(rowData.URL);
+            }
+        }
+
+        private async Task ShowPartImage(string imageUrl)
+        {
+            // Implement your logic to display the image
+            // For example, you can open a new page or a popup with the image
+            await Navigation.PushAsync(new PartImage(imageUrl));
+        }
+    }
+}

SfDataGridSample/MauiProgram.cs

@@ -0,0 +1,27 @@
+using Microsoft.Extensions.Logging;
+using Syncfusion.Maui.Core;
+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/Employee.cs

@@ -0,0 +1,13 @@
+using System.ComponentModel;
+
+namespace SfDataGridSample
+{
+    public class Employee
+    {
+        public int EmployeeID { get; set; }
+        public string Name { get; set; }
+        public string Designation { get; set; }
+        public string URL { get; set; }
+        public string MapUrl { get; set; }
+    }
+}

SfDataGridSample/PartImage.xaml

@@ -0,0 +1,10 @@
+<?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"
+             x:Class="SfDataGridSample.PartImage"
+             Title="PartImage">
+    <StackLayout>
+        <Image x:Name="imageView" WidthRequest="1400" HeightRequest="500"
+               Aspect="AspectFit" />
+    </StackLayout>
+</ContentPage>

SfDataGridSample/PartImage.xaml.cs

@@ -0,0 +1,10 @@
+namespace SfDataGridSample;
+
+public partial class PartImage : ContentPage
+{
+	public PartImage(string imageUrl)
+	{
+		InitializeComponent();
+		imageView.Source = imageUrl;
+	}
+}

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>
+

SfDataGridSample/Platforms/MacCatalyst/Info.plist

@@ -0,0 +1,38 @@
+<?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">
+<dict>
+    <!-- The Mac App Store requires you specify if the app uses encryption. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/itsappusesnonexemptencryption -->
+    <!-- <key>ITSAppUsesNonExemptEncryption</key> -->
+    <!-- Please indicate <true/> or <false/> here. -->
+
+    <!-- Specify the category for your app here. -->
+    <!-- Please consult https://developer.apple.com/documentation/bundleresources/information_property_list/lsapplicationcategorytype -->
+    <!-- <key>LSApplicationCategoryType</key> -->
+    <!-- <string>public.app-category.YOUR-CATEGORY-HERE</string> -->
+	<key>UIDeviceFamily</key>
+	<array>
+		<integer>2</integer>
+	</array>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>XSAppIconAssets</key>
+	<string>Assets.xcassets/appicon.appiconset</string>
+</dict>
+</plist>

SfDataGridSample/Platforms/MacCatalyst/Program.cs

@@ -0,0 +1,16 @@
+using ObjCRuntime;
+using UIKit;
+
+namespace SfDataGridSample
+{
+    public class Program
+    {
+        // This is the main entry point of the application.
+        static void Main(string[] args)
+        {
+            // if you want to use a different Application Delegate class from "AppDelegate"
+            // you can specify it here.
+            UIApplication.Main(args, null, typeof(AppDelegate));
+        }
+    }
+}