How to Trigger Hyperlink on Cell Clicked Event of MAUI DataGrid?

In this article, we will show you how to trigger a hyperlink on the cell double clicked event of the .NET MAUI DataGrid.

xaml

<ContentPage.BindingContext>
    <local:ControlInfoViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <syncfusion:SfDataGrid x:Name="dataGrid" CellDoubleTapped="dataGrid_CellDoubleTapped"
                            ItemsSource="{Binding ControlInfoCollection}" ColumnWidthMode="Auto">
        <syncfusion:SfDataGrid.Columns>
            <syncfusion:DataGridTextColumn MappingName="Control"/>
            <syncfusion:DataGridTextColumn MappingName="Platform"/>
            <syncfusion:DataGridTemplateColumn MappingName="UgLink">
                <syncfusion:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <local:HyperlinkLabel Text="User Guide documentation"
                            Url="{Binding UgLink}"
                            HorizontalOptions="Center"
                            LineBreakMode="NoWrap" />
                    </DataTemplate>
                </syncfusion:DataGridTemplateColumn.CellTemplate>
            </syncfusion:DataGridTemplateColumn>
                                            
        </syncfusion:SfDataGrid.Columns>
    </syncfusion:SfDataGrid>
</ContentPage.Content>

C#
The below code illustrates how to trigger a hyperlink on the cell double clicked event of the DataGrid. The HyperlinkLabel class is a custom Label that defines a bindable property Url and visually styles the label as an underlined, blue hyperlink.

private void dataGrid_CellDoubleTapped(object sender, Syncfusion.Maui.DataGrid.DataGridCellDoubleTappedEventArgs e)
{
    if (e.RowData is ControlInfo item && e.Column.MappingName == "UgLink")
    {
        // Get the URL from the tapped row's data
        var url = item.UgLink;

        // Ensure the URL is not null or empty before trying to open it
        if (!string.IsNullOrEmpty(url))
        {
            // Open the URL using the Launcher
            Launcher.OpenAsync(url);
        }
    }
}

public class HyperlinkLabel : Label
{
    public static readonly BindableProperty UrlProperty = BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkLabel), null);

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }

    public HyperlinkLabel()
    {
        TextDecorations = TextDecorations.Underline;
        TextColor = Colors.Blue;
    }
}

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to trigger a hyperlink on the cell clicked event of the .NET MAUI DataGrid.

You can refer to our .NET MAUI DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. Explore our .NET MAUI DataGrid example to understand how to create and manipulate data.

For current customers, check out our components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!