Merge pull request #814 from telerik/development

Development

_config.yml

@@ -167,9 +167,12 @@ navigation:
     ## DataGrid
     controls/datagrid:
         title: "DataGrid"
+    controls/datagrid/populating-with-data:
+        title: "Populating with Data"
+        position: 2
     controls/datagrid/columns:
         title: "Columns"
-        position: 2
+        position: 3
     controls/datagrid/columns/column-types:
         title: "Column Types"
         position: 1

controls/accordion/getting-started.md

@@ -31,10 +31,11 @@ When your .NET MAUI application is set up, you are ready to add a Accordion cont
 **1.** Here is the Accordion definition in XAML and C#:
 
 <snippet id='accordion-getting-started-xaml' />
-<snippet id='accordion-getting-started-csharp' />
+<snippet id='accordion-gettingstarted-csharp' />
 
 >important `RadAccordion` provides a read only collection `Items` of type `IList<AccordionItem>`.
 
+
 **2.** Add the `telerik` namespace:
 
 ```XAML

controls/datagrid/aggregates/styling.md

@@ -24,6 +24,8 @@ Style the aggregates by using the following properties:
 
 Style the group header by using the following properties:
 
+| Style  | Action 		   |
+|----------------------|-------------------|
 | `BackgroundColor` | Defines the color that fills the area within the header |
 | `BorderColor`| Defines the color that fills the border region. |
 | `BorderThickness` | Defines the thickness of the border. |

controls/datagrid/getting-started.md

@@ -26,25 +26,25 @@ Before adding the DataGrid, you need to:
 
 ## Define the Control
 
-1. When your .NET MAUI application is set up, you are ready to add a DataGrid control to your page.
+**1.** When your .NET MAUI application is set up, you are ready to add a DataGrid control to your page.
 
- ```XAML
+```XAML
 <telerik:RadDataGrid x:Name="dataGrid"/>
- ```
+```
 
-1. Add the following namespace:
+**2.** Add the following namespace:
 
- ```XAML
+```XAML
 xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
- ```
+```
 
-1. Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
+**3.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
 
- ```C#
- using Telerik.Maui.Controls.Compatibility;
+```C#
+using Telerik.Maui.Controls.Compatibility;
 
- public static class MauiProgram
- {
+public static class MauiProgram
+{
 	public static MauiApp CreateMauiApp()
 	{
 		var builder = MauiApp.CreateBuilder();
@@ -58,8 +58,8 @@ xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 
 		return builder.Build();
 	}
- }           
- ```
+}           
+```
 
 ## Visualize Sample Data
 

controls/datagrid/grouping/expand-collapse.md

@@ -2,7 +2,7 @@
 title: Expand and Collapse Groups
 page_title: .NET MAUI DataGrid Documentation - Expand and Collapse
 description: "Review the Telerik .NET MAUI DataGrid Grouping Expand and Collapse documentation article to learn more about the Expand and Collapse functions you can use."
-position: 4
+position: 6
 slug: datagrid-expand-collapse
 ---
 

controls/datagrid/grouping/group-header-template.md

@@ -0,0 +1,48 @@
+---
+title: Group Header Template
+page_title: .NET MAUI DataGrid Documentation - GroupHeaderTemplate
+description: "Review the Telerik .NET MAUI DataGrid Property Group Descriptor documentation article to learn more about the property grouping function you can use."
+position: 5
+slug: datagrid-group-header-template
+---
+
+# Group Header Template for .NET MAUI DataGrid
+
+The .NET MAUI DataGrid features fully customizable group headers that allow you to tweak the appearance and behavior of the headers used to group data within the grid. You can achieve this customization by using the `GroupHeaderTemplate` property of the DataGrid, which allows you to set a custom `DataTemplate` to the group headers.
+
+The BindingContext of the `GroupHeaderTemplate` is a `GroupHeaderContext` object and it includes the following properties:
+
+* `Descriptor`: Specifies the descriptor used for the grouping.
+* `Group`: Gets details on the group such as:
+    * `Items`: Gets the child items of the group.
+    * `Key`: Gets the key specific for the group.
+* `IsExpanded`: Defines a value indicating whether the group is currently expanded (has its child items visible).
+* `Level`: Gets the zero-based level (or the depth) of the group.
+
+The following example demonstrates how to apply a sample `GroupHeaderTemplate` to the DataGrid:
+
+**1.** Add the DataGrid definition to the page with a sample `GroupHeaderTemplate`:
+
+<snippet id='datagrid-groupheader-template-xaml' />
+
+**2.** Add the `ViewModel` class:
+
+<snippet id='datagrid-grouping-viewmodel' />
+
+**3.** Add the data item used for binding the DataGrid:
+
+<snippet id='datagrid-grouping-object' />
+
+**4.** Set the binding context of the DataGrid to the `ViewModel` class:
+
+<snippet id='datagrid-grouping-propertygroupdescriptor-setvm' />
+
+Check the result at the image below:
+
+![Telerik .NET MAUI DataGrid Group Header Template](../images/datagrid-grouping-groupheadertemplate.png)
+
+## See Also
+
+- [Grouping UI]({%slug datagrid-grouping-ui%})
+- [Property Group Descriptor]({%slug datagrid-property-group-descriptor%})
+- [Delegate Group Descriptor]({%slug datagrid-delegate-group-descriptor%})

controls/datagrid/grouping/grouping-ui.md

@@ -8,7 +8,7 @@ slug: datagrid-grouping-ui
 
 # .NET MAUI DataGrid Grouping UI
 
-![Grouping UI](../images/grouping-ui-windows.gif)
+![Grouping UI](../images/datagrid-grouping-ui.gif)
 
 **Telerik UI for .NET MAUI DataGrid** provides a built-in grouping functionality, which allows the user to easy group the data by one or more columns.
 

controls/datagrid/grouping/overview.md

@@ -12,7 +12,7 @@ slug: datagrid-grouping-overview
 
 ## Grouping UI
 
-![Grouping UI](../images/grouping-ui-windows.gif)
+![Grouping UI](../images/datagrid-grouping-ui.gif)
 
 The DataGrid Grouping UI is enabled by design on desktop and disabled on mobile, it allows the user to group the DataGrid by dragging and dropping the column headers to the `DataGridGroupingPanel`. 
 
@@ -31,28 +31,16 @@ Programmatic grouping can be done by adding descriptors to the `GroupDescriptors
 
 The DataGrid supports group expand and collapse operations either through the UI by tapping on the group headers, or programmatically. By default, all the groups are expanded.
 
-## Group Footer
+## Group Headers Customization
 
-The DataGrid has a support for group footers. You can visualize the footers by setting the `ShowGroupFooters` to `True`. 
-
-If you want to fully customize the group footers you can use the `GroupFooterTemplate`(`DataTemplate`) property.
-
-**Defining the `GroupFooterTemplate`**
-
-```XAML
-<telerik:RadDataGrid.GroupFooterTemplate>
-    <DataTemplate>
-        <Label Text="RandomText" TextColor="Crimson"/>
-    </DataTemplate>
-</telerik:RadDataGrid.GroupFooterTemplate>
-```
-
-> `GroupFooterTemplate` overrides the aggregates of the footer.
+The DataGrid provides the ability to fully customize its group headers in order to achieve the desired look when the data is grouped. Go to [Group Header Template]({%slug datagrid-group-header-template%}) topic for detailed information on this.
 
 >tip For an outline of all DataGrid features review the [.NET MAUI DataGrid Overview]({%slug datagrid-overview%}) article.
 
 ## See Also
 
 - [Grouping UI]({%slug datagrid-grouping-ui%})
 - [Property Group Descriptor]({%slug datagrid-property-group-descriptor%})
-- [Delegate Group Descriptor]({%slug datagrid-delegate-group-descriptor%})
+- [Delegate Group Descriptor]({%slug datagrid-delegate-group-descriptor%})
+- [Group Header Template]({%slug datagrid-group-header-template%})
+- [Group Header Styling]({%slug datagrid-group-header-styling%})

controls/datagrid/grouping/property-group-descriptor.md

@@ -41,8 +41,9 @@ this.dataGrid.GroupDescriptors.Add(new Telerik.Maui.Controls.Compatibility.Commo
 
 Here is how the DataGrid looks when it's grouped:
 
-![DataGrid Property GroupDescriptor](../images/datagrid_grouping.png)
+![DataGrid Property GroupDescriptor](../images/datagrid-delegate-group-descriptor.png)
 
 ## See Also
 
-- [Grouping UI]({%slug datagrid-grouping-ui%})
+- [Grouping UI]({%slug datagrid-grouping-ui%})
+- [Group Header Template]({%slug datagrid-group-header-template%})

controls/datagrid/populating-with-data/data-binding.md

@@ -0,0 +1,85 @@
+---
+title: Binding to Collection
+page_title: .NET MAUI DataGrid Documentation - Data Binding
+description: Learn how to bind the Telerik .NET MAUI DataGrid to a collection of items and configure the data bindings for its columns.
+position: 1
+slug: datagrid-data-binding
+tags: binding, collection, data, dotnet maui, maui, datagrid, enumerable
+---
+
+# .NET MAUI DataGrid Data Binding: Binding to a Collection
+
+This article lists the source types supported by Telerik's .NET MAUI DataGrid. It guides you through the process of binding the DataGrid control to a collection of items and configuring the data binding for its columns.
+
+## Supported Collection Sources
+
+To populate the DataGrid with data, use the `ItemsSource` property of the control. For compatibility reasons, the `ItemsSource` property of the .NET MAUI DataGrid is declared as a `System.Object` type. However, using collections that implement the `IEnumerable` interface is recommended as it gives you more flexibility.
+
+## Binding to an ObservableCollection
+
+When you bind the `RadDataGrid` to a collection that implements the `INotifyCollectionChanged` interface, the DataGrid reflects and displays all changes to that collection, for example, any adding or removing of data items. The .NET MAUI framework implements the `INotifyCollectionChanged` interface in the `ObservableCollection<T>` class.
+
+Implementations of the `System.ComponentModel.ICollection` interface are also fully supported. When using such collection sources, the `RadDataGrid` automatically picks up any group, sort, or filter descriptions defined in the collection and uses them to display the data. This makes the `System.ComponentModel.ICollection` interface implementations the recommended collection source for the DataGrid.
+
+The next example demonstrates how to bind the DataGrid to an `ObservableCollection`. For this example, the DataGrid control is bound to a collection of `Club` objects. Note that the `Club` class inherits from `NotifyPropertyChangedBase`, which is the Telerik implementation of the `INotifyPropertyChanged` interface.
+
+**1.** Define the `Club` class:
+
+<snippet id='datagrid-club-model' />
+
+**2.** Create an `ObservableCollection` in the `ViewModel` class:
+
+<snippet id='datagrid-column-view-model' />
+
+**3.** Bind the collection to the `RadDataGrid` control:
+
+```xaml
+<telerik:RadDataGrid x:Name="grid" 
+                     ItemsSource="{Binding Clubs}" />
+```
+
+**4.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+## Binding the Columns
+
+By default, DataGrid will generate typed columns automatically based on the public properties of the underlying data objects. When, for example, you set the `ItemsSource` of the `RadDataGrid` to a collection of clubs (see the sample above), the control will create a separate column for each public property of the `Club` object.
+
+To disable the automatic generation of DataGrid columns and manually define them, set the control's `AutoGenerateColumns` property to `False` and manually populate the `Columns` collection.
+
+**1.** Define the columns:
+
+<snippet id='datagrid-columns-example' />
+
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**3.** Define the `Club` class:
+
+<snippet id='datagrid-club-model' />
+
+**4.** Create an `ObservableCollection` in the `ViewModel` class:
+
+<snippet id='datagrid-column-view-model' />
+
+> To learn more about defining columns and the different types of columns, you can take a look at the [Columns Section]({%slug datagrid-columns-overview%}).
+
+## Additional Resources
+
+- [.NET MAUI DataGrid Product Page](https://www.telerik.com/maui-ui/datagrid)
+- [.NET MAUI DataGrid Forum Page](https://www.telerik.com/forums/maui?tagId=1801)
+- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
+- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
+
+## See Also
+
+- [Filtering UI in the Telerik UI for .NET MAUI DataGrid]({%slug datagrid-filtering-ui%})
+- [Programmatic Filtering in the DataGrid]({%slug datagrid-programmatic-filtering%})
+- [Grouping in the DataGrid]({%slug datagrid-grouping-overview%})
+- [Styling the Appearance of the DataGrid]({%slug datagrid-styling%})

controls/datagrid/datatable-support.md → controls/datagrid/populating-with-data/datatable-support.md

@@ -1,12 +1,14 @@
 ---
-title: DataTable Support
+title: Binding to DataTable
 page_title: .NET MAUI DataGrid Documentation - DataTable Support
 description: Learn how to bind the Telerik UI for .NET MAUI DataGrid to a DataTable and enable all available features such as filtering, sorting, grouping, CRUD operations, and commands.
-position: 14
+position: 3
+previous_url: /controls/datagrid/datatable-support
+tags: binding, datatable, data, dotnet maui, maui, datagrid
 slug: datagrid-datatable-support
 ---
 
-# .NET MAUI DataGrid Support for DataTable
+# .NET MAUI DataGrid Data Binding: Binding to DataTable
 
 As of the Telerik UI for .NET MAUI 5.1.0 version, the DataGrid provides full and seamless support for all its features in the DataTable.