From 2856bdd125178b5581e4f27f84bc2f9169469bee Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Wed, 7 Aug 2024 18:38:43 +0300 Subject: [PATCH 1/2] Add Hover cell --- controls/datagrid/{ => cells}/current-cell.md | 9 ++--- controls/datagrid/cells/mouse-hover-cell.md | 35 +++++++++++++++++++ controls/datagrid/columns/reordering.md | 6 ++-- 3 files changed, 43 insertions(+), 7 deletions(-) rename controls/datagrid/{ => cells}/current-cell.md (85%) create mode 100644 controls/datagrid/cells/mouse-hover-cell.md diff --git a/controls/datagrid/current-cell.md b/controls/datagrid/cells/current-cell.md similarity index 85% rename from controls/datagrid/current-cell.md rename to controls/datagrid/cells/current-cell.md index 126b70eb..20de5e46 100644 --- a/controls/datagrid/current-cell.md +++ b/controls/datagrid/cells/current-cell.md @@ -1,8 +1,9 @@ --- -title: Cells +title: Current Cell page_title: .NET MAUI DataGrid Documentation - Current Cell -description: "Learn how to set the behavior and style the appearance of the current cell of the Telerik UI for .NET MAUI DataGrid component." -position: 5 +description: Learn how to set the behavior and style the appearance of the current cell of the Telerik UI for .NET MAUI DataGrid component. +position: 1 +previous_url: /controls/datagrid/current-cell slug: datagrid-current-cell --- @@ -25,7 +26,7 @@ The `CurrentCellChanged` event handler receives the following parameters: ## Styling the Cell -You can also style the current DataGrid cell by using the `CurrentCellStyle` of type `DataGridBorderStyle` and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties. +You can style the current DataGrid cell by using the `CurrentCellStyle` property (of type `DataGridBorderStyle`) and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties. ## Example diff --git a/controls/datagrid/cells/mouse-hover-cell.md b/controls/datagrid/cells/mouse-hover-cell.md new file mode 100644 index 00000000..bc7d2310 --- /dev/null +++ b/controls/datagrid/cells/mouse-hover-cell.md @@ -0,0 +1,35 @@ +--- +title: Mouse Hover Cell +page_title: .NET MAUI DataGrid Documentation - Hover Cell +description: Learn how to get the current hovered cell and style the appearance of the cell of the Telerik UI for .NET MAUI DataGrid component. +position: 2 +slug: datagrid-mouse-hover-cell +--- + +# .NET MAUI DataGrid Hover Cell + + The [Telerik UI for .NET MAUI DataGrid]({%slug datagrid-overview%}) provides option to get the data of the cell that the mouse is currently over. In addition, you can change the default hover style. The feature is available only on Desktop - `WinUI` and `MacCatalyst`. + +## Getting the Hovered Cell + +The DataGrid provides a `VisualStateService` property (of type `DataGridVisualStateService`). This porperty gets the service that handles visual-state related logic, such as keeping track of the element that the mouse is currently over. + +The `DataGridVisualStateService` class encapsulates visual state related logic such as mouse-hovered elements within a `Telerik.Maui.Controls.RadDataGrid` instance. This class exposes the `MouseHoverCell` property (`DataGridCellInfo`) which allows you to get the cell that the mouse is currently over. + +Here is an example how to get the hovered cell. + +```C# +var hoveredCell = dataGrid.VisualStateService.MouseHoverCell; +``` + +## Styling the Hovered Cell + +You can specify the style for the cells and rows when the mouse is over by using the `MouseHoverStyle` property (of type `DataGridBorderStyle`) and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties. + +## See Also + +- [Setting the .NET MAUI DataGrid Columns]({%slug datagrid-columns-overview%}) +- [Grouping in the DataGrid]({%slug datagrid-grouping-overview%}) +- [Using the DataGrid Commands]({%slug datagrid-aggregates%}) +- [Sorting .NET MAUI DataGrid Records]({%slug datagrid-sorting-overview%}) +- [Filtering .NET MAUI DataGrid Records]({%slug datagrid-filtering-overview%}) \ No newline at end of file diff --git a/controls/datagrid/columns/reordering.md b/controls/datagrid/columns/reordering.md index 7e0aefa2..2e4d2624 100644 --- a/controls/datagrid/columns/reordering.md +++ b/controls/datagrid/columns/reordering.md @@ -14,9 +14,9 @@ The [.NET MAUI DataGrid]({%slug datagrid-overview%}) exposes a reordering featur The following properties are relted to the reordering feature: -`CanUserReorderColumns`(`bool`)—Defines whether the user can reorder the `DataGridColumns`. The default value is `true`. -`ColumnReorderIndicatorTemplate`(`DataTemplate`)—Defines the template that presents the indicator that is displayed between two columns during reordering. -`ColumnHeaderDragVisualTemplate` (`DataTemplate`)—Specifies the template that presents the drag visual of the dragged column header. +* `CanUserReorderColumns`(`bool`)—Defines whether the user can reorder the `DataGridColumns`. The default value is `true`. +* `ColumnReorderIndicatorTemplate`(`DataTemplate`)—Defines the template that presents the indicator that is displayed between two columns during reordering. +* `ColumnHeaderDragVisualTemplate` (`DataTemplate`)—Specifies the template that presents the drag visual of the dragged column header. ## Events From 04fd4f7968e00fb6a394d0b9d64ac2d4245ddb02 Mon Sep 17 00:00:00 2001 From: Dobrinka Yordanova Date: Wed, 7 Aug 2024 18:45:17 +0300 Subject: [PATCH 2/2] updates --- _config.yml | 3 +++ controls/datagrid/cells/mouse-hover-cell.md | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index cf6fbb47..6899227c 100644 --- a/_config.yml +++ b/_config.yml @@ -226,6 +226,9 @@ navigation: controls/datagrid/row-details: title: "Row Details" position: 4 + controls/datagrid/cells: + title: "Cells" + position: 5 controls/datagrid/filtering: title: "Filtering" position: 6 diff --git a/controls/datagrid/cells/mouse-hover-cell.md b/controls/datagrid/cells/mouse-hover-cell.md index bc7d2310..8c405a30 100644 --- a/controls/datagrid/cells/mouse-hover-cell.md +++ b/controls/datagrid/cells/mouse-hover-cell.md @@ -12,7 +12,7 @@ slug: datagrid-mouse-hover-cell ## Getting the Hovered Cell -The DataGrid provides a `VisualStateService` property (of type `DataGridVisualStateService`). This porperty gets the service that handles visual-state related logic, such as keeping track of the element that the mouse is currently over. +The DataGrid provides a `VisualStateService` property (of type `DataGridVisualStateService`). This property gets the service that handles visual-state related logic, such as keeping track of the element that the mouse is currently over. The `DataGridVisualStateService` class encapsulates visual state related logic such as mouse-hovered elements within a `Telerik.Maui.Controls.RadDataGrid` instance. This class exposes the `MouseHoverCell` property (`DataGridCellInfo`) which allows you to get the cell that the mouse is currently over. @@ -22,7 +22,7 @@ Here is an example how to get the hovered cell. var hoveredCell = dataGrid.VisualStateService.MouseHoverCell; ``` -## Styling the Hovered Cell +## Styling the Cell You can specify the style for the cells and rows when the mouse is over by using the `MouseHoverStyle` property (of type `DataGridBorderStyle`) and applying the `BackgroundColor`, `BorderColor`, and `BorderThickness` properties.