Merge pull request #760 from telerik/development

Merge from Development

controls/datagrid/columns/column-types/boolean-column.md

@@ -13,6 +13,7 @@ The `DataGridBooleanColumn` is used to represent boolean values. It uses the Che
 ## Important Properties
 
 * `PropertyName`—Specifies the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 
 * `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.

controls/datagrid/columns/column-types/date-column.md

@@ -13,6 +13,7 @@ The `DataGridDateColumn` is used to represent `DateTime` objects. It uses the Te
 ## Important Properties
 
 * `PropertyName`—Specifies the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 
 * `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.

controls/datagrid/columns/column-types/numerical-column.md

@@ -13,6 +13,7 @@ The `DataGridNumericalColumn` is used to represent only numerical values. It use
 ## Important Properties
 
 * `PropertyName`—Specifies the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 
 * `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.

controls/datagrid/columns/column-types/picker-column.md

@@ -18,6 +18,7 @@ Here are the specific properties defined for `DataGridPickerColumn`:
 * `ItemsSourcePath` (`string`)—Specifies a property of your data class that will be used as a source for the Picker control.
 * `ItemDisplayBindingPath` (`string`)—Sets the display path of the items in the Picker selector. It points to a field in the items from the `ItemsSource` collection of the Picker.
 * `PropertyName`—Defines the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 
 * `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.

controls/datagrid/columns/column-types/text-column.md

@@ -17,6 +17,7 @@ A `DataGridTextColumn` converts the content of each associated cell to a `System
 Here are the specific properties for the Text Columns:
 
 * `PropertyName`—Specifies the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentFormat`—Defines the custom format for each cell value. The `String.Format` routine is used and the format passed has to be in the form required by this method.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 

controls/datagrid/columns/column-types/time-column.md

@@ -13,6 +13,7 @@ The `DataGridTimeColumn` is used to represent `TimeSpan` objects. It uses the Te
 ## Important Properties
 
 * `PropertyName`—Specifies the name of the property of the object type that represents each row within the grid.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell.
 * `HeaderText`—Defines the content that will be displayed in the Header UI that represents the column.
 * `CellContentStyle`(`DataGridTextCellStyle`)—Defines the appearance of each cell associated with this column. 
 * `CellContentStyleSelector`—Defines the `StyleSelector` instance that allows for the dynamic appearance on a per-cell basis.

controls/datagrid/columns/overview.md

@@ -1,77 +1,66 @@
 ---
-title: Overview
-page_title: .NET MAUI DataGrid Documentation - Columns Overview
+title: Defining Columns
+page_title: .NET MAUI DataGrid Documentation - Defining Columns
 description: Check our "Overview" documentation article for Telerik DataGrid for .NET MAUI.
 position: 0
 previous_url: /controls/datagrid/columns/datagrid-columns-overview
 slug: datagrid-columns-overview
 ---
 
-# .NET MAUI DataGrid Columns
+# .NET MAUI DataGrid Defining Columns
 
-You can add columns in your `RadDataGrid` by working with the Columns collection of the control. It has three approaches that you can take to define different columns:
+The DataGrid for .NET MAUI provides three approaches that you can take to define different columns:
 
-* `Manually`: by adding columns to the `RadDataGrid.Columns` collection
-* `Automatically`: by setting `RadDataGrid.AutoGenerateColumns="True"`
-* `Mixed`: by adding columns to the `RadDataGrid.Columns` collection and also set `RadDataGrid.AutoGenerateColumns="True"`
+* **Automatically**—by setting `AutoGenerateColumns` property to `True` (default value).
+* **Manually**—by adding columns to the DataGrid's `Columns` collection and setting the `AutoGenerateColumns` property to `False`.
+* **Mixed**—by adding columns to the `Columns` collection and also setting the `AutoGenerateColumns`to `True` (default value).
 
-The `RadDataGrid` control provides the following type of columns:
+## Automatic Columns Generation
 
-* `Text Column`: Represents a column that converts the content of each associated cell to a System.String object.
-* `Numerical Column`: Represents an extended `DataGridTextColumn` that presents numerical data (`int` and `double` types).
-* `Boolean Column`: A special `DataGridTypedColumn` implementation that presents Boolean data.
-* `Date Column:` An extended `DataGridTextColumn` that presents data of type `DateTime`.
-* `Time Column`: Represents an extended `DataGridTextColumn` that presents the `TimeOfDay` of a `DateTime` type.
-* `ComboBox Column`: Represents an extended `DataGridTextColumn` that uses a Picker editor to select value from a collection.
-* `Template Column`: Represents a column that uses a `DataTemplate` to describe the content of each associated grid cell.
+By default, the DataGrid will generate typed columns automatically based on the underlying data type. When, for example, you set the `ItemsSource` of the `RadDataGrid` to a collection of clubs (see the sample code below), the control will create a separate column for each public property of the `Club` object.
 
->important When `RadDataGrid.AutoGenerateColumns`="True", the `RadDataGrid` generates typed columns depending on the underlying data type.
+For example, let's have a sample `Club` object:
 
-## Properties
+```XAML
+public class Club
+{ 
+    public string Name { get; set; }
+    public DateTime Established { get; set; }
+    public bool IsChampion { get; set; }
+}
+```
+
+With the automatic columns generation DataGrid will create the following columns:
 
-All types of columns inherit from the `DataGridColumn` class which provides the following properties:
+* `DataGridTextColumn` for the `Name` property.
+* `DataGridDateColumn` for the `Established` property.
+* `DataGridBooleanColumn` for the `IsChampion` property.
 
-* `HeaderText`(`string`)—Specifies the content to be displayed in the Header UI that represents the column.
-* `HeaderStyle`(`DataGridColumnHeaderStyle`)—Specifies the Style instance that defines the appearance of the `DataGridColumnHeader` control.
-* `HeaderContentTemplate`(`DataTemplate`)—Specifies the `DataTemplate` instance that defines the appearance of the header.
-* `FooterText`—Defines the content that will be displayed in the Footer UI that represents the column.
-* `FooterStyle`(`DataGridColumnFooterStyle`)—Defines the `Style` object that sets the appearance of each footer cell associated with this column.
-* `FooterContentTemplate`(`DataTemplate`)—Defines the appearance of the footer.
-* `SizeMode`(`DataGridColumnSizeMode`)—Gets or sets the `DataGridColumnSizeMode` value that controls how the column and its associated cells are sized horizontally.
-  * Fixed—The column has a fixed width as defined by its Width property.
-  * Stretch—The column is stretched to the available width proportionally to its desired width.
-  * Auto—The columns is sized to its desired width. That is the maximum desired width of all associated cells.
-* `Width`(`double`)—Specifies the fixed width for the column. Applicable when the `SizeMode` property is set to `DataGridColumnSizeMode.Fixed`.
-* `MinimumWidth`(`double`)—Specifies the minimum width of a column. This property is applicable when setting `SizeMode` column property to `Fixed`. When `Minimumwidth` is set, you can not reduce the width of the column to a value lower than the `MinimumWidth`. 
-* `ActualWidth`(`double`)—Gets the actual width of the column.
-* `IsResizable`(`bool`)—Specifies whether the user can resize the DataGrid Column. The default value is `True`. This is only supported in `WinUI` and `MacCatalyst`.
-* `IsAutoGenerated`(bool)—Gets a value indication whether the column is auto-generated internally.
-* `CanUserEdit`(`bool`)—Specifies whether the user can edit the values in this column.
-* `CanUserFilter`(`bool`)—Specifies whether the user can filter this column by using the built-in Filtering UI.
-* `CanUserSort`(`bool`)—Specifies whether the user can sort the data by the values in this column.
-* `IsVisible`(`bool`)—Gets a value indicating if a specific column should be visualized.
-* `CellDecorationStyle`(`DataGridBorderStyle`)—Defines the Style object that defines the background of each cell associated with this column.
-* `CellDecorationStyleSelector`(DataGridStyleSelector): Defines the `StyleSelector` instance that allows for dynamic decoration on a per cell basis.
-* `CellContentTemplate`(`DataTemplate`)—Defines the appearance of each cell associated with concrete column.
-* `CellEditTemplate`(`DataTemplate`)—Defines the editor associated with the concrete column. The `CellEditTemplate` is displayed when the cell is in edit mode.
-* `IsFrozen`(`bool`)—Specifies whether the column is frozen. The default value is `False`.
-* `IsResizable`(`bool`)—Specifies whether the user can resize the DataGrid Column. The default value is `True`. This is only supported in `WinUI` and `MacCatalyst`.
+## Manual Columns Definition
 
->tip More information about `CellDecorationStyle` and  `CellDecorationStyleSelector` can be found in [Columns Styling]({%slug datagrid-columns-styling%}) topic.
+Using the built-in auto generation of columns does not fit all scenarios. In such cases you can manually define the needed columns. When defining a column you can choose between several column types:
 
->tip More information about `CellContentTemplate` and  `CellEditTemplate` can be found in [Columns Styling]({%slug datagrid-cell-templates%}) topic.
+* [Text Column]({%slug datagrid-columns-text-column%})—Represents a column that converts the content of each associated cell to a System.String object.
+* [Numerical Column]({%slug datagrid-columns-numerical-column%})—Represents an extended `DataGridTextColumn` that presents numerical data (`int` and `double` types).
+* [Boolean Column]({%slug datagrid-columns-boolean-column%})—An extended `DataGridTextColumn` implementation that presents Boolean data.
+* [Date Column]({%slug datagrid-columns-date-column%})—An extended `DataGridTextColumn` that presents data of type `DateTime`.
+* [Time Column]({%slug datagrid-columns-time-column%})—Represents an extended `DataGridTextColumn` that presents the `TimeOfDay` of a `DateTime` type.
+* [ComboBox Column]({%slug datagrid-columns-picker-column%})—Represents an extended `DataGridTextColumn`  which cell value editor is a Telerik.Maui.Controls.RadComboBox control.
+* [Template Column]({%slug datagrid-columns-template-column%})—Represents a column that uses a `DataTemplate` to describe the content of each associated grid cell.
+* [ToggleRowDetails Column]({%slug datagrid-columns-toggle-column%})—Represents a column that allows the user to show and hide the row details for an item.
 
->note To enable the user edit mode of the `RadDataGrid` cell, set the *RadDataGrid.UserEditMode="Cell"*.
+For the typed columns (Text, Numerical, Boolean, Date, Time and ComboBox) you can define which property of the underlying data object the column represents in the following ways:
 
-## Example with DataGrid Columns
+* `PropertyName`—Specifies the name of the property of the data object being displayed in the column's cells.
+* `DataMemberBinding`—Defines the binding which points to the data member of the underlying object being displayed in the column's cell. With `DataMemberBinding`, you have control over the way data is formatted and displayed in the DataGrid cells, for example you can add a string formatter or a value converter.
 
-Here is an example containing all types of columns `RadDataGrid` control provides.
+The example below demonstrates `RadDataGrid` with various types of columns. In addition both `PropertyName` and `DataMemberBinding` are used for the different columns to set the property each column represents. 
 
 **1.** Use the following snippet to declare a `RadDataGrid` in XAML:
 
 <snippet id='datagrid-columns-example' />
 
-**2.** Where the `telerikDataGrid` namespace is the following:
+**2.** Where the `telerik` namespace is the following:
 
 ```XAML
 xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
@@ -91,10 +80,50 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 <snippet id='datagrid-club-model' />
 
+**6.** Add the `BoolToValueConverter` to the page's resources:
+
+<snippet id='datagrid-columns-converter' />
+
+## Columns Features
+
+Find below a quick overview of the DataGrid's Columns features.
+
+### Column Headers
+
+The top cell of a column is called Header. Its purpose is to set a caption for the column, which describes the data displayed in it. The .NET MAUI DataGrid provides fully customizable column headers, check [Column Headers]({%slug datagrid-column-header%}) for detailed information.
+
+### Columns Cell Templates
+
+The DataGrid provides a set of predefined column types such as Text Column, Numerical Column, etc. In case you need to extend the functionality of a column, for example customize the default appearance or add more UI elements, use the exposed templates - `CellContentTemplate` and `CellEditTemplate`. For detailed information, see the [Columns Cells Templates]({%slug datagrid-cell-templates%}) topic.
+
+### Column Footers
+
+The DataGrid allows you to display additional information which applies to the columns in a specific row placed at the bottom of the control. This row consists of individual footer cells for each column. Take a look at the [Column Footers]({%slug datagrid-column-footer%}) for detailed information.
+
+### Column Resizing
+
+Columns inside the Telerik .NET MAUI DataGrid are resizable by default. The feature is available only on Desktop - WinUI and MacCatalyst. For more details see the [Column Resizing]({%slug datagrid-column-resizing%}) topic.
+
+### Columns Width
+
+The DataGrid provides a flexible mechanism for setting columns' width through columns' `SizeMode` and `Width` properties. For more details see the [Columns Width]({%slug datagrid-columns-width%}) topic.
+
+### Frozen Columns
+
+You can pin a column on the left side of the DataGrid by setting the `IsFrozen` property to the column. By default the value is `False`. When setting it to `True` to a concrete column, it makes the column frozen. For detailed information, see the [Frozen Columns]({%slug datagrid-frozen-columns%}) topic.
+
+### Columns Reordering
+
+The DataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order. For more details, see the [Columns Reordering]({%slug datagrid-columns-reordering%}) topic.
+
 >tip For an outline of all DataGrid features review the [.NET MAUI DataGrid Overview]({%slug datagrid-overview%}) article.
 
 ## See Also
 
-- [ComboBox Column]({%slug datagrid-columns-picker-column %})
-- [Template Column]({%slug datagrid-columns-template-column %})
-- [Text Column]({%slug datagrid-columns-text-column %})
+- [Column Headers]({%slug datagrid-column-header%})
+- [Columns Cells Templates]({%slug datagrid-cell-templates%})
+- [Column Footers]({%slug datagrid-column-footer%})
+- [Column Resizing]({%slug datagrid-column-resizing%})
+- [Columns Width]({%slug datagrid-columns-width%})
+- [Frozen Columns]({%slug datagrid-frozen-columns%})
+- [Columns Reordering]({%slug datagrid-columns-reordering%})

controls/datagrid/columns/reordering.md

@@ -1,12 +1,12 @@
 ---
-title: Column Reordering
+title: Columns Reordering
 page_title: .NET MAUI DataGrid Documentation - Column Reordering
 description: Check our "Reordering" documentation article for Telerik DataGrid for .NET MAUI control.
 position: 7
 slug: datagrid-columns-reordering
 ---
 
-# .NET MAUI DataGrid Column Reordering
+# .NET MAUI DataGrid Columns Reordering
 
 The DataGrid exposes a reordering feature allowing the user to drag and drop columns and change their order.
 

controls/rangeslider/range-thumb.md

@@ -25,7 +25,7 @@ RangeSlider supports different dragging options—only the start thumb, only
 
 You can control the available dragging options through the `DragMode` property of the RangeSlider:
 
-* `DragMode`(`Telerik.Maui.Controls.RangeSlider.RangeSliderDragMode`)—Defines the available elemenents of the range thumb that can be dragged. You can choose from:
+* `DragMode`(`Telerik.Maui.Controls.RangeSlider.RangeSliderDragMode`)—Defines the available elements of the range thumb that can be dragged. You can choose from:
     * `Disabled`—drag is not enabled.
     * `StartThumb`—the start thumb can be dragged.
     * `RangeTrack`—the range track (the part between the start and end thumbs) can be dragged.
@@ -49,4 +49,4 @@ Check below some quick examples:
 
 - [Visual Structure]({% slug rangeslider-visual-structure%})
 - [Track Configuration]({% slug rangeslider-track-configuration%})
-- [Range Thumb Styling]({% slug rangeslider-rangethumb-styling%})
+- [Range Thumb Styling]({% slug rangeslider-rangethumb-styling%})