diff --git a/MAUI/DataGrid/Column-types.md b/MAUI/DataGrid/Column-types.md index 219bfe04c..5db4564bf 100644 --- a/MAUI/DataGrid/Column-types.md +++ b/MAUI/DataGrid/Column-types.md @@ -1418,6 +1418,97 @@ The `DataGridNumericColumn` allows formatting the numeric data with culture-spec * `NullValue` - To set the null value when the numeric cell value is null, use the [DataGridNumericColumn.NullValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridNumericColumn.html#Syncfusion_Maui_DataGrid_DataGridNumericColumn_NullValue) property. +## DataGridHyperlinkColumn + +The `DataGridHyperlinkColumn` inherits all the properties of the `DataGridTextColumn`. It displays column data as clickable hyperlinks. It renders link text in each record cell and lets end users invoke navigation. + +{% tabs %} +{% highlight xaml %} + + + + + + +{% endhighlight %} + +{% highlight c# %} +DataGridHyperlinkColumn hyperlinkColumn = new DataGridHyperlinkColumn() +{ + MappingName = "Country", + HeaderText = "Country", +}; +dataGrid.Columns.Add(hyperlinkColumn); + +{% endhighlight %} + +{% endtabs %} + +You can enable end-users to navigate to a URI either when the cell value contains a valid URI address or by handling the `DataGridCurrentCellRequestNavigatingEventArgs` event. The `CurrentCellRequestNavigating` event is triggered whenever a cell in the `DataGridHyperlinkColumn` is clicked for navigation. + +The `DataGridCurrentCellRequestNavigatingEventArgs` associated with the `CurrentCellRequestNavigating` event provides details about the hyperlink that initiated the action. Its `DataGridCurrentCellRequestNavigatingEventArgs.NavigateText` property returns the value from the column’s `DisplayBinding` if one is defined; otherwise, it falls back to the value bound to `MappingName`. + +{% tabs %} +{% highlight C# %} + +dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating; + +private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e) +{ + string address = "https://en.wikipedia.org/wiki/" + e.NavigateText; + Launcher.OpenAsync(new Uri(address)); +} + +{% endhighlight %} +{% endtabs %} + + +### Cancel the navigation +You can cancel the navigation by setting `DataGridCurrentCellRequestNavigatingEventArgs.Cancel` to true. + +{% tabs %} +{% highlight C# %} +dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating; + +private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e) +{ + e.Cancel = true; +} + +{% endhighlight %} +{% endtabs %} + +### Appearance + +#### HyperlinkTextColor + +You can set the hyperlink text color using the `HyperlinkTextColor` property. If both HyperlinkTextColor and a DataGridCell TextColor (via implicit or explicit styles) are defined, HyperlinkTextColor takes precedence and will be used. If HyperlinkTextColor is not specified, the implicit or explicit cell styles will determine the hyperlink text color. + +{% tabs %} +{% highlight xaml %} + + + + + + + +{% endhighlight %} + +{% highlight c# %} +dataGrid.DefaultStyle = new DataGridStyle +{ + HyperlinkTextColor = Colors.Yellow +}; + +{% endhighlight %} +{% endtabs %} + ## Row header The row header is a type of column that is placed as the first cell of each row and remains frozen. To enable the row header, set [SfDataGrid.ShowRowHeader](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_ShowRowHeader) to `true` Additionally, the `SfDataGrid` allows you to customize the row header width using the [SfDataGrid.RowHeaderWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_RowHeaderWidth) property. The default value is `30.`