Skip to content

Commit 0b1f6eb

Browse files
Merge pull request #3817 from syncfusion-content/DataGridHyperLinkColumnUG
Provided UG for DataGridHyperlinkColumn
2 parents b291fe5 + 689d845 commit 0b1f6eb

File tree

1 file changed

+91
-0
lines changed

1 file changed

+91
-0
lines changed

MAUI/DataGrid/Column-types.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1418,6 +1418,97 @@ The `DataGridNumericColumn` allows formatting the numeric data with culture-spec
14181418

14191419
* `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.
14201420

1421+
## DataGridHyperlinkColumn
1422+
1423+
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.
1424+
1425+
{% tabs %}
1426+
{% highlight xaml %}
1427+
<syncfusion:SfDataGrid x:Name="dataGrid"
1428+
AutoGenerateColumnsMode="None"
1429+
ItemsSource="{Binding OrderInfoCollection}">
1430+
<syncfusion:SfDataGrid.Columns>
1431+
<syncfusion:DataGridHyperlinkColumn HeaderText="Country"
1432+
MappingName="Country" />
1433+
</syncfusion:SfDataGrid.Columns>
1434+
</syncfusion:SfDataGrid>
1435+
1436+
{% endhighlight %}
1437+
1438+
{% highlight c# %}
1439+
DataGridHyperlinkColumn hyperlinkColumn = new DataGridHyperlinkColumn()
1440+
{
1441+
MappingName = "Country",
1442+
HeaderText = "Country",
1443+
};
1444+
dataGrid.Columns.Add(hyperlinkColumn);
1445+
1446+
{% endhighlight %}
1447+
1448+
{% endtabs %}
1449+
1450+
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.
1451+
1452+
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`.
1453+
1454+
{% tabs %}
1455+
{% highlight C# %}
1456+
1457+
dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating;
1458+
1459+
private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e)
1460+
{
1461+
string address = "https://en.wikipedia.org/wiki/" + e.NavigateText;
1462+
Launcher.OpenAsync(new Uri(address));
1463+
}
1464+
1465+
{% endhighlight %}
1466+
{% endtabs %}
1467+
1468+
1469+
### Cancel the navigation
1470+
You can cancel the navigation by setting `DataGridCurrentCellRequestNavigatingEventArgs.Cancel` to true.
1471+
1472+
{% tabs %}
1473+
{% highlight C# %}
1474+
dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating;
1475+
1476+
private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e)
1477+
{
1478+
e.Cancel = true;
1479+
}
1480+
1481+
{% endhighlight %}
1482+
{% endtabs %}
1483+
1484+
### Appearance
1485+
1486+
#### HyperlinkTextColor
1487+
1488+
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.
1489+
1490+
{% tabs %}
1491+
{% highlight xaml %}
1492+
1493+
<syncfusion:SfDataGrid x:Name="dataGrid"
1494+
AutoGenerateColumnsMode="None"
1495+
ItemsSource="{Binding OrderInfoCollection}">
1496+
<syncfusion:SfDataGrid.DefaultStyle>
1497+
<syncfusion:DataGridStyle HyperlinkTextColor="Yellow"/>
1498+
</syncfusion:SfDataGrid.DefaultStyle>
1499+
</syncfusion:SfDataGrid>
1500+
1501+
{% endhighlight %}
1502+
1503+
{% highlight c# %}
1504+
dataGrid.DefaultStyle = new DataGridStyle
1505+
{
1506+
HyperlinkTextColor = Colors.Yellow
1507+
};
1508+
1509+
{% endhighlight %}
1510+
{% endtabs %}
1511+
14211512
## Row header
14221513

14231514
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.`

0 commit comments

Comments
 (0)