Skip to content

Commit b8bfcc5

Browse files
committed
Provided the UG Documentation for ColumnChooser, HyperLink and UI Grouping feature for DataGrid.
1 parent f048728 commit b8bfcc5

File tree

7 files changed

+417
-150
lines changed

7 files changed

+417
-150
lines changed

MAUI/DataGrid/Column-types.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1584,6 +1584,97 @@ internal class ItemsSourceSelector : IItemsSourceSelector
15841584

15851585
You can download the sample from the following link: (Sample)[https://github.com/SyncfusionExamples/How-to-load-different-items-for-each-row-in-MultiColumn-ComboBox-Column-in-.NET-MAUI-SfDataGrid].
15861586

1587+
## DataGridHyperlinkColumn
1588+
1589+
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.
1590+
1591+
{% tabs %}
1592+
{% highlight xaml %}
1593+
<syncfusion:SfDataGrid x:Name="dataGrid"
1594+
AutoGenerateColumnsMode="None"
1595+
ItemsSource="{Binding OrderInfoCollection}">
1596+
<syncfusion:SfDataGrid.Columns>
1597+
<syncfusion:DataGridHyperlinkColumn HeaderText="Country"
1598+
MappingName="Country" />
1599+
</syncfusion:SfDataGrid.Columns>
1600+
</syncfusion:SfDataGrid>
1601+
1602+
{% endhighlight %}
1603+
1604+
{% highlight c# %}
1605+
DataGridHyperlinkColumn hyperlinkColumn = new DataGridHyperlinkColumn()
1606+
{
1607+
MappingName = "Country",
1608+
HeaderText = "Country",
1609+
};
1610+
dataGrid.Columns.Add(hyperlinkColumn);
1611+
1612+
{% endhighlight %}
1613+
1614+
{% endtabs %}
1615+
1616+
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.
1617+
1618+
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`.
1619+
1620+
{% tabs %}
1621+
{% highlight C# %}
1622+
1623+
dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating;
1624+
1625+
private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e)
1626+
{
1627+
string address = "https://en.wikipedia.org/wiki/" + e.NavigateText;
1628+
Launcher.OpenAsync(new Uri(address));
1629+
}
1630+
1631+
{% endhighlight %}
1632+
{% endtabs %}
1633+
1634+
1635+
### Cancel the navigation
1636+
You can cancel the navigation by setting `DataGridCurrentCellRequestNavigatingEventArgs.Cancel` to true.
1637+
1638+
{% tabs %}
1639+
{% highlight C# %}
1640+
dataGrid.CurrentCellRequestNavigating += dataGrid_CurrentCellRequestNavigating;
1641+
1642+
private void dataGrid_CurrentCellRequestNavigating(object sender, DataGridCurrentCellRequestNavigatingEventArgs e)
1643+
{
1644+
e.Cancel = true;
1645+
}
1646+
1647+
{% endhighlight %}
1648+
{% endtabs %}
1649+
1650+
### Appearance
1651+
1652+
#### HyperlinkTextColor
1653+
1654+
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.
1655+
1656+
{% tabs %}
1657+
{% highlight xaml %}
1658+
1659+
<syncfusion:SfDataGrid x:Name="dataGrid"
1660+
AutoGenerateColumnsMode="None"
1661+
ItemsSource="{Binding OrderInfoCollection}">
1662+
<syncfusion:SfDataGrid.DefaultStyle>
1663+
<syncfusion:DataGridStyle HyperlinkTextColor="Yellow"/>
1664+
</syncfusion:SfDataGrid.DefaultStyle>
1665+
</syncfusion:SfDataGrid>
1666+
1667+
{% endhighlight %}
1668+
1669+
{% highlight c# %}
1670+
dataGrid.DefaultStyle = new DataGridStyle
1671+
{
1672+
HyperlinkTextColor = Colors.Yellow
1673+
};
1674+
1675+
{% endhighlight %}
1676+
{% endtabs %}
1677+
15871678
## Row header
15881679

15891680
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.`
8.79 KB
Loading
9.63 KB
Loading
18.3 KB
Loading
42 KB
Loading

MAUI/DataGrid/columns.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,5 +383,48 @@ this.dataGrid.Columns.RemoveAt(1);
383383
{% endhighlight %}
384384
{% endtabs %}
385385

386+
##Column Chooser
386387

388+
SfDataGrid allows you show or hide columns at runtime by selecting or deselecting them through the Column Chooser. You can enable this feature by setting the `SfDataGrid.ShowColumnChooser` property.
389+
390+
{% tabs %}
391+
{% highlight xaml %}
392+
393+
<syncfusion:SfDataGrid x:Name="dataGrid"
394+
ItemsSource="{Binding OrdersInfo}"
395+
ShowColumnChooser="True">
396+
</syncfusion:SfDataGrid>
397+
398+
{% endhighlight %}
399+
400+
{% highlight c# %}
401+
402+
dataGrid.ShowColumnChooser = true;
403+
404+
{% endhighlight %}
405+
{% endtabs %}
406+
407+
###Column Chooser Header Text
408+
409+
You can also customize the header text of the Column Chooser using the `SfDataGrid.ColumnChooserHeaderText` property. By default, `SfDataGrid.ColumnChooserHeaderText` property is set to `string.Empty`, so the header is not displayed. If you assign any non-empty string, the header becomes visible.
410+
411+
{% tabs %}
412+
{% highlight xaml %}
413+
414+
<syncfusion:SfDataGrid x:Name="dataGrid"
415+
ItemsSource="{Binding OrdersInfo}"
416+
ColumnChooserHeaderText="Select Visible Columns"
417+
ShowColumnChooser="True">
418+
</syncfusion:SfDataGrid>
419+
420+
{% endhighlight %}
421+
422+
{% highlight c# %}
423+
424+
dataGrid.ColumnChooserHeaderText = "Select Visible Columns";
425+
426+
{% endhighlight %}
427+
{% endtabs %}
428+
429+
<img alt="Maui DataGrid Column Chooser" src="Images\columns/maui-datagrid-columnchooser.png" width="404"/>
387430

0 commit comments

Comments
 (0)