Skip to content

Commit 1756aca

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/openImage
How do you open a image file from DataGridTemplateColumn in .NET MAUI DataGrid?
2 parents 9de10b0 + b803bbd commit 1756aca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1266
-2
lines changed

‎README.md‎

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,69 @@
1-
# How-to-open-a-image-file-from-DataGridTemplateColumn
2-
This demo shows how to open a image in a DataGridTemplateColumn
1+
# How do you open a image file from DataGridTemplateColumn in .NET MAUI DataGrid?
2+
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).
3+
4+
## xaml
5+
```
6+
<syncfusion:SfDataGrid x:Name="sfGrid"
7+
SelectionMode="Single"
8+
NavigationMode="Cell"
9+
GridLinesVisibility="Both"
10+
ColumnWidthMode="Auto"
11+
HeaderGridLinesVisibility="Both"
12+
AutoGenerateColumnsMode="None"
13+
ItemsSource="{Binding Employees}">
14+
15+
<syncfusion:SfDataGrid.Columns>
16+
<syncfusion:DataGridTextColumn MappingName="EmployeeID"
17+
HeaderText="Employee ID" />
18+
<syncfusion:DataGridTextColumn MappingName="Name"
19+
HeaderText="Employee Name" />
20+
<syncfusion:DataGridTextColumn MappingName="Designation"
21+
HeaderText="Designation" />
22+
<syncfusion:DataGridTemplateColumn HeaderText="Image">
23+
<syncfusion:DataGridTemplateColumn.CellTemplate>
24+
<DataTemplate>
25+
<ImageButton Source="dot_icon.png"
26+
Clicked="ImageButton_Clicked" />
27+
</DataTemplate>
28+
</syncfusion:DataGridTemplateColumn.CellTemplate>
29+
</syncfusion:DataGridTemplateColumn>
30+
</syncfusion:SfDataGrid.Columns>
31+
</syncfusion:SfDataGrid>
32+
```
33+
34+
## C#
35+
The below code illustrates how to open a image file from DataGridTemplateColumn in DataGrid.
36+
```
37+
private void ImageButton_Clicked(object sender, EventArgs e)
38+
{
39+
var imageButton = sender as ImageButton;
40+
var rowData = (imageButton.BindingContext as Employee);
41+
42+
if (rowData != null)
43+
{
44+
// Assuming you have a method to show the image
45+
ShowPartImage(rowData.URL);
46+
}
47+
}
48+
49+
private async Task ShowPartImage(string imageUrl)
50+
{
51+
// Implement your logic to display the image
52+
// For example, you can open a new page or a popup with the image
53+
await Navigation.PushAsync(new PartImage(imageUrl));
54+
}
55+
```
56+
![OpenImg.gif](https://support.syncfusion.com/kb/agent/attachment/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI3OTg3Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.EesChAO08inaEV5h7V57fgpJFlXIO9hZuC07jX0KIzQ)
57+
58+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-open-a-image-file-from-DataGridTemplateColumn)
59+
60+
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).
61+
62+
##### Conclusion
63+
64+
I hope you enjoyed learning about how to open a image file from DataGridTemplateColumn in .NET MAUI DataGrid (SfDataGrid).
65+
66+
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.
67+
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.
68+
69+
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‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:SfDataGridSample"
5+
x:Class="SfDataGridSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎SfDataGridSample/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎SfDataGridSample/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="SfDataGridSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:SfDataGridSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SfDataGridSample/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SfDataGridSample/MainPage.xaml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
5+
xmlns:local="clr-namespace:SfDataGridSample"
6+
x:Class="SfDataGridSample.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<local:EmployeeViewModel x:Name="viewModel"/>
10+
</ContentPage.BindingContext>
11+
12+
13+
<syncfusion:SfDataGrid x:Name="sfGrid"
14+
Margin="10"
15+
SelectionMode="Single"
16+
NavigationMode="Cell"
17+
GridLinesVisibility="Both"
18+
ColumnWidthMode="Auto"
19+
HeaderGridLinesVisibility="Both"
20+
AutoGenerateColumnsMode="None"
21+
ItemsSource="{Binding Employees}">
22+
23+
<syncfusion:SfDataGrid.Columns>
24+
<syncfusion:DataGridTextColumn MappingName="EmployeeID"
25+
HeaderText="Employee ID" />
26+
<syncfusion:DataGridTextColumn MappingName="Name"
27+
HeaderText="Employee Name" />
28+
<syncfusion:DataGridTextColumn MappingName="Designation"
29+
HeaderText="Designation" />
30+
<syncfusion:DataGridTemplateColumn HeaderText="Image">
31+
<syncfusion:DataGridTemplateColumn.CellTemplate>
32+
<DataTemplate>
33+
<ImageButton Source="dot_icon.png"
34+
Clicked="ImageButton_Clicked" />
35+
</DataTemplate>
36+
</syncfusion:DataGridTemplateColumn.CellTemplate>
37+
</syncfusion:DataGridTemplateColumn>
38+
</syncfusion:SfDataGrid.Columns>
39+
</syncfusion:SfDataGrid>
40+
41+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using Syncfusion.Maui.DataGrid;
2+
using System.Collections;
3+
using System.Reflection;
4+
5+
namespace SfDataGridSample
6+
{
7+
public partial class MainPage : ContentPage
8+
{
9+
public MainPage()
10+
{
11+
InitializeComponent();
12+
}
13+
14+
private void ImageButton_Clicked(object sender, EventArgs e)
15+
{
16+
var imageButton = sender as ImageButton;
17+
var rowData = (imageButton.BindingContext as Employee);
18+
19+
if (rowData != null)
20+
{
21+
// Assuming you have a method to show the image
22+
ShowPartImage(rowData.URL);
23+
}
24+
}
25+
26+
private async Task ShowPartImage(string imageUrl)
27+
{
28+
// Implement your logic to display the image
29+
// For example, you can open a new page or a popup with the image
30+
await Navigation.PushAsync(new PartImage(imageUrl));
31+
}
32+
}
33+
}

‎SfDataGridSample/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core;
3+
using Syncfusion.Maui.Core.Hosting;
4+
namespace SfDataGridSample
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎SfDataGridSample/Model/Employee.cs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
using System.ComponentModel;
2+
3+
namespace SfDataGridSample
4+
{
5+
public class Employee
6+
{
7+
public int EmployeeID { get; set; }
8+
public string Name { get; set; }
9+
public string Designation { get; set; }
10+
public string URL { get; set; }
11+
public string MapUrl { get; set; }
12+
}
13+
}

‎SfDataGridSample/PartImage.xaml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
x:Class="SfDataGridSample.PartImage"
5+
Title="PartImage">
6+
<StackLayout>
7+
<Image x:Name="imageView" WidthRequest="1400" HeightRequest="500"
8+
Aspect="AspectFit" />
9+
</StackLayout>
10+
</ContentPage>

0 commit comments

Comments
 (0)