Skip to content

Commit 3eb5c64

Browse files
NeelakandanKannanNeelakandanKannan
authored
Merge pull request #1 from SyncfusionExamples/845134
845134 - How to create a hyperlink column in MAUI DataGrid?
2 parents 27f05dd + a740703 commit 3eb5c64

41 files changed

Lines changed: 1268 additions & 1 deletion

Some content is hidden

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

‎DataGrid_HyperlinkLabel.png‎

13.2 KB
Loading

‎README.md‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,68 @@
1-
# How-to-create-a-hyperlink-Column-in-MAUI-DataGrid-
1+
# How to create hyperlink column in MAUI DataGrid?
2+
The [.NET MAUI DataGrid(SfDataGrid)](https://www.syncfusion.com/maui-controls/maui-datagrid) does not natively provide HyperlinkColumn support. You can achieve this by using [DataGridTemplateColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridTemplateColumn.html) and a customized label.
3+
4+
## XAML
5+
Define your DataGrid with the required customizations. Use a DataGridTemplateColumn to load a customized label for your HyperlinkColumn.
6+
7+
```XML
8+
<syncfusion:SfDataGrid x:Name="dataGrid"
9+
ItemsSource="{Binding ControlInfoCollection}"
10+
ColumnWidthMode="Auto">
11+
<syncfusion:SfDataGrid.Columns>
12+
<syncfusion:DataGridTextColumn MappingName="Control"/>
13+
<syncfusion:DataGridTextColumn MappingName="Platform"/>
14+
<syncfusion:DataGridTemplateColumn MappingName="UGLink">
15+
<syncfusion:DataGridTemplateColumn.CellTemplate>
16+
<DataTemplate>
17+
<local:HyperlinkLabel Text="User Guide documentation"
18+
Url="{Binding UGLink}"
19+
VerticalTextAlignment="Center"/>
20+
</DataTemplate>
21+
</syncfusion:DataGridTemplateColumn.CellTemplate>
22+
</syncfusion:DataGridTemplateColumn>
23+
</syncfusion:SfDataGrid.Columns>
24+
</syncfusion:SfDataGrid>
25+
```
26+
27+
## C#
28+
Define a customLabel named HyperlinkLabel that is inherited from Label. This customized control will represent the clickable hyperlink within the TemplateColumn.
29+
30+
### HyperlinkLabel.cs
31+
32+
```C#
33+
public class HyperlinkLabel : Label
34+
{
35+
public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);
36+
37+
public string Url
38+
{
39+
get { return (string)GetValue(UrlProperty); }
40+
set { SetValue(UrlProperty, value); }
41+
}
42+
43+
public HyperlinkLabel()
44+
{
45+
TextDecorations = TextDecorations.Underline;
46+
TextColor = Colors.Blue;
47+
GestureRecognizers.Add(new TapGestureRecognizer
48+
{
49+
Command = new Command(async () => await Launcher.OpenAsync(Url))
50+
});
51+
52+
}
53+
}
54+
```
55+
56+
57+
The following screenshot shows the Hyperlink Column in SfDataGrid.
58+
59+
![DataGrid with Hyperlink Column](DataGrid_HyperlinkLabel.png)
60+
61+
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.
62+
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).
63+
### Conclusion
64+
I hope you enjoyed learning about how to create Hyperlink Column in 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 know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data.
67+
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.
68+
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.sln‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.7.34009.444
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SfDataGridSample", "SfDataGridSample\SfDataGridSample.csproj", "{172E9465-C679-47DA-97CF-DE7B21758C55}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{172E9465-C679-47DA-97CF-DE7B21758C55}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {EE06CF6E-8BC8-47CB-B7B1-89EA779D01C6}
26+
EndGlobalSection
27+
EndGlobal

‎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: 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+
<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+
9+
<ShellContent
10+
Title="Home"
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</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/HyperlinkLabel/HyperlinkLabel.cs‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace SfDataGridSample
8+
{
9+
public class HyperlinkLabel : Label
10+
{
11+
public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);
12+
13+
public string Url
14+
{
15+
get { return (string)GetValue(UrlProperty); }
16+
set { SetValue(UrlProperty, value); }
17+
}
18+
19+
public HyperlinkLabel()
20+
{
21+
TextDecorations = TextDecorations.Underline;
22+
TextColor = Colors.Blue;
23+
GestureRecognizers.Add(new TapGestureRecognizer
24+
{
25+
Command = new Command(async () => await Launcher.OpenAsync(Url))
26+
});
27+
28+
}
29+
}
30+
31+
}

‎SfDataGridSample/MainPage.xaml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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:ControlInfoViewModel x:Name="viewModel" />
10+
</ContentPage.BindingContext>
11+
12+
<ContentPage.Content>
13+
<syncfusion:SfDataGrid x:Name="dataGrid"
14+
ItemsSource="{Binding ControlInfoCollection}"
15+
ColumnWidthMode="Auto">
16+
<syncfusion:SfDataGrid.Columns>
17+
<syncfusion:DataGridTextColumn MappingName="Control"/>
18+
<syncfusion:DataGridTextColumn MappingName="Platform"/>
19+
<syncfusion:DataGridTemplateColumn MappingName="UGLink">
20+
<syncfusion:DataGridTemplateColumn.CellTemplate>
21+
<DataTemplate>
22+
<local:HyperlinkLabel Text="User Guide documentation"
23+
Url="{Binding UGLink}"
24+
VerticalTextAlignment="Center"/>
25+
</DataTemplate>
26+
</syncfusion:DataGridTemplateColumn.CellTemplate>
27+
</syncfusion:DataGridTemplateColumn>
28+
</syncfusion:SfDataGrid.Columns>
29+
</syncfusion:SfDataGrid>
30+
</ContentPage.Content>
31+
32+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

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

0 commit comments

Comments
 (0)