Merge pull request #874 from telerik/master

Merged from master

controls/collectionview/filtering.md

@@ -4,7 +4,7 @@ page_title: .NET MAUI CollectionView Documentation - Filtering
 description: Check the Telerik .NET MAUI CollectionView filtering options like programmatically filtering by using filter descriptors.
 position: 8
 slug: collectionview-filtering
-tags: filter, radlistview, filterdescriptor
+tags: filter, collectionview, filterdescriptor
 ---
 
 # .NET MAUI CollectionView Filtering

controls/collectionview/styling/item-style.md

@@ -1,6 +1,6 @@
 ---
 title: Item Styling
-page_title: .NET MAUI ListView Documentation - Item Styling
+page_title: .NET MAUI CollectionView Documentation - Item Styling
 description: Check the Telerik for .NET MAUI CollectionView styling options for the Item Style.
 position: 0
 slug: collectionview-item-styling

controls/dataform/validation.md

@@ -89,6 +89,70 @@ You can use the following properties for error message styling and customization
 
 ![.NET MAUI DataForm Error styling](images/dataform-error-message-styling-desktop.png)
 
+## Runtime Validation
+
+If you want to add the validation runtime, when editors are generated, then you have to use the `EditorsGenerated` event. Inside the event you can define the validation. 
+
+The following table lists the available DataForm validations:
+
+| DataForm Validation Rule | Definition |
+| ----- | ------ |
+| (DataForm level) `DataFormObjectValidationRule` | Represents a custom validation rule of the DataForm control. |
+| `DataFormEditorCustomValidationRule` | Represents a custom validation rule for the editor. The validation rule can execute a custom validation logic on the underlying business object.|
+| `DataFormEditorLengthValidationRule` | Validates that the string length of the current value is between the specified minimum and maximum length. |
+| `DataFormEditorRangeValidationRule` | Validates that the current value is between the specified minimum and maximum value. |
+| `DataFormEditorRegexValidationRule` | Executes a custom regular expression to validate the current string value. |
+| `DataFormEditorRequiredValidationRule` | Validates that the current value is not null or an empty string. |
+
+> When using both runtime validation and `ViewModel` validation (via data annotations)—the validation defined in the `ViewModel` will be applied instead of the runtime validation. The [Data Annotation Validation]({%slug dataform-data-annotations%}) has the higher priority.
+
+Here is an example for runtime validation using the `EditorGenerated` event:
+
+```C#
+var form = new RadDataForm();
+form.EditorGenerated += this.OnEditorGenerated;
+```
+
+```C#
+private void OnEditorGenerated(object sender, DataFormEditorGeneratedEventArgs eventArgs)
+{
+	switch (eventArgs.PropertyName)
+	{
+		case "FirstName":
+			eventArgs.Editor.HeaderText = "First Name";
+			// This won't be applied on FirstName property, as there is a validation set by using the DataAnnotations
+			eventArgs.Editor.ValidationRules.Clear();
+			break;
+		case "LastName":
+			eventArgs.Editor.HeaderText = "Last Name";
+			// Add validation rule here
+			eventArgs.Editor.ValidationRules.Add(new DataFormEditorRequiredValidationRule
+			{
+
+			});
+			break;
+		case "StartDate":
+			eventArgs.Editor = new DataFormRadDatePickerEditor
+			{
+				PropertyName = "StartDate",
+				HeaderText = "Start Date"
+			};
+			break;
+		case "EndDate":
+			// we remove the editor for this property
+			eventArgs.Editor = null;
+			break;
+		case "Accommodation":
+			eventArgs.Editor = new DataFormRadComboBoxEditor
+			{
+				PropertyName = "Accommodation",
+				HeaderText = "Accommodation",
+			};
+			break;
+	}
+}
+```
+
 ## See Also
 
 - [Editors]({%slug dataform-editors%})

controls/datagrid/filtering/filter-control-template.md

@@ -48,6 +48,7 @@ The example below shows how to apply the `DataGridTextFilterControl` as a `Filte
     </telerik:RadDataGrid.Columns>
 </telerik:RadDataGrid>
 ```
+
 Here is the `DataGridTextFilterControl` with the match case properties applied:
 
 ![Telerik .NET MAUI DataGrid TextFilterControl](images/datagrid-textfiltercontrol.png)

controls/datagrid/getting-started.md

@@ -12,7 +12,7 @@ This guide provides the information you need to start using the [Telerik UI for
 
 At the end, you will achieve the following result.
 
-![DataGrid Getting Started](images/datagrid-itemssource.png)
+![DataGrid Getting Started](images/datagrid-getting-started.png)
 
 ## Prerequisites
 

knowledge-base/customize-chat-item-styles-dotnet-maui.md

@@ -0,0 +1,59 @@
+---
+title: Customizing Chat Item Styles in .NET MAUI
+description: Learn how to modify the appearance of chat items, including text color, in the Telerik UI for .NET MAUI Chat component.
+type: how-to
+page_title: How to Customize Chat Item Styles in Telerik UI for .NET MAUI
+slug: customize-chat-item-styles-dotnet-maui
+tags: chat, conversational ui, .net maui, styling, text color, item template selector, implicit style
+res_type: kb
+category: knowledge-base
+ticketid: 1652367
+---
+
+## Environment
+
+| Version | Product | Author | 
+| --- | --- | ---- | 
+| 7.0.0 | Telerik UI for .NET MAUI Conversational UI | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova)| 
+
+
+## Description
+
+This KB article answers the following questions:
+- How can I change the text color of chat items in .NET MAUI?
+- Is there a way to apply custom styles to chat items in .NET MAUI?
+- How to use item template selectors for styling chat messages?
+
+## Solution
+
+To customize the style of the chat items in the [Chat]({%slug chat-overview%}) control for .NET MAUI, choose one of the approaches described in this KB article.
+
+### Approach 1: Using Item Template Selector
+
+Refer to the [Item Template Selector]({%slug chat-itemtemplate-selector%}) documentation. You can change the text color by adding a style targeting the `Label` and setting its `TextColor` property. For example, use a style named `DefaultLabelStyle`. 
+See the example code in the <a href="https://github.com/telerik/maui-samples/tree/main/Samples/SdkBrowser/Examples/ChatControl/FeaturesCategory" target="_blank">Telerik MAUI Controls Samples Chat Examples</a>
+
+### Approach 2: Using Implicit Style
+
+Use an implicit style targeting `TextMessageView` or its derived types like `IncomingTextMessageView` and `OutgoingTextMessageView`.
+
+```xml
+<Style x:Key="LabelStyle" TargetType="Label">
+    <Setter Property="TextColor" Value="Red" />
+</Style>
+<Style TargetType="telerik:TextMessageView" ApplyToDerivedTypes="True">
+    <Setter Property="LabelStyle" Value="{StaticResource LabelStyle}" />
+</Style>
+```
+
+For further examples, refer to the <a href="https://github.com/telerik/maui-samples/blob/main/Samples/SdkBrowser/Examples/ChatControl/FeaturesCategory/CustomizationExample/Customization.xaml" target="_blank">Telerik MAUI Controls Samples Chat Customization example</a>
+
+## Notes
+
+- The `TextMessageView` and its derived types (`IncomingTextMessageView`, `OutgoingTextMessageView`) are crucial for applying text styles.
+- The `LabelStyle` is an example of how to directly modify the `TextColor` property, but you can customize other properties similarly.
+
+## See Also
+
+- [Chat Overview]({%slug chat-overview%})
+- [Item Template Selector Documentation]({%slug chat-itemtemplate-selector%})

knowledge-base/customize-selection-indicator-color-navigationview.md

@@ -0,0 +1,101 @@
+---
+title: Customizing Selection Indicator Color in NavigationView for .NET MAUI on Windows
+description: Learn how to change the selection indicator color of NavigationViewItemView in .NET MAUI NavigationView on Windows.
+type: how-to
+page_title: How to Customize the Selection Indicator Color in .NET MAUI NavigationView on Windows
+slug: customize-selection-indicator-color-navigationview-net-maui
+tags: navigationview, .net maui, selection indicator, color, customization
+res_type: kb
+ticketid: 1656066
+---
+
+## Environment
+
+| Product | Version |
+| --- | --- |
+| Telerik UI for .NET MAUI NavigationView | 7.0.0 |
+
+## Description
+
+When using the [NavigationView](https://docs.telerik.com/devtools/maui/controls/navigationview/overview) in a .NET MAUI application, the selection indicator (a small vertical colored bar) appears in the accent color of the device by default. This article demonstrates how to customize the color of the selection indicator in the NavigationViewItemView.
+
+This KB article also answers the following questions:
+- How can I change the NavigationViewItemView indicator color in .NET MAUI?
+- What method allows for the customization of the selection indicator in NavigationView?
+- Is it possible to override the default accent color of the selection indicator in .NET MAUI NavigationView?
+
+## Solution
+
+To customize the selection indicator color in the `NavigationViewItemView`, override its `ControlTemplate` and modify the `BackgroundColor` of the last `RadBorder` element inside the `NavigationViewItemView_ControlTemplate_WinUI`. Apply an implicit style in your application to achieve this customization.
+
+Below is an example of how to define the implicit style:
+
+```xml
+<ResourceDictionary>
+	<ControlTemplate x:Key="NavigationViewItemView_ControlTemplate">
+		<Grid BackgroundColor="Transparent">
+			<telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
+										   Background="{TemplateBinding Background}"
+										   BorderColor="{TemplateBinding BorderColor}"
+										   BorderBrush="{TemplateBinding BorderBrush}"
+										   BorderThickness="{TemplateBinding BorderThickness}"
+										   CornerRadius="{TemplateBinding CornerRadius}"
+										   Margin="{TemplateBinding ContentPadding}" />
+			<Grid ColumnDefinitions="Auto, *"
+				  ColumnSpacing="{TemplateBinding Spacing}">
+				<Grid WidthRequest="{TemplateBinding LeadingWidth}">
+					<Image Source="{TemplateBinding ActualImageSource}"
+						   Aspect="{TemplateBinding ImageAspect}"
+						   WidthRequest="{TemplateBinding ImageWidth}"
+						   HeightRequest="{TemplateBinding ImageHeight}" />
+				</Grid>
+				<ContentPresenter Grid.Column="1" />
+			</Grid>
+		</Grid>
+	</ControlTemplate>
+	<ControlTemplate x:Key="NavigationViewItemView_ControlTemplate_WinUI">
+		<Grid BackgroundColor="Transparent">
+			<telerikMauiControls:RadBorder BackgroundColor="{TemplateBinding BackgroundColor}"
+										   Background="{TemplateBinding Background}"
+										   BorderColor="{TemplateBinding BorderColor}"
+										   BorderBrush="{TemplateBinding BorderBrush}"
+										   BorderThickness="{TemplateBinding BorderThickness}"
+										   CornerRadius="{TemplateBinding CornerRadius}"
+										   Margin="{TemplateBinding ContentPadding}" />
+			<Grid ColumnDefinitions="Auto, *"
+				  ColumnSpacing="{TemplateBinding Spacing}">
+				<Grid WidthRequest="{TemplateBinding LeadingWidth}">
+					<Image Source="{TemplateBinding ActualImageSource}"
+						   Aspect="{TemplateBinding ImageAspect}"
+						   WidthRequest="{TemplateBinding ImageWidth}"
+						   HeightRequest="{TemplateBinding ImageHeight}" />
+				</Grid>
+				<ContentPresenter Grid.Column="1" />
+			</Grid>
+			<telerikMauiControls:RadBorder IsVisible="{TemplateBinding IsSelected}"
+										   BackgroundColor="Pink"
+										   HorizontalOptions="Start"
+										   CornerRadius="2"
+										   WidthRequest="3"
+										   ScaleY="0.5"
+										   Margin="{TemplateBinding ContentPadding}" />
+		</Grid>
+	</ControlTemplate>
+	<Style TargetType="telerik:NavigationViewItemView">
+		<Setter Property="ControlTemplate" Value="{OnPlatform Default={StaticResource NavigationViewItemView_ControlTemplate}, 
+															  WinUI={StaticResource NavigationViewItemView_ControlTemplate_WinUI}}" />
+	</Style>
+</ResourceDictionary>
+```
+
+This style targets the `NavigationViewItemView` and sets the `ControlTemplate` property. Depending on the platform, it uses the appropriate resource (`NavigationViewItemView_ControlTemplate` for default and `NavigationViewItemView_ControlTemplate_WinUI` for Windows).
+
+## Notes
+
+- Remember to define the `ControlTemplate` resources (`NavigationViewItemView_ControlTemplate` and `NavigationViewItemView_ControlTemplate_WinUI`) in your application resources. These templates should include the customization for the selection indicator color.
+- The process might require creating a customized control template that replicates the original but with the desired changes to the selection indicator color.
+
+## See Also
+
+- [Telerik UI for .NET MAUI NavigationView Documentation](https://docs.telerik.com/devtools/maui/controls/navigationview/overview)
+- [Customizing .NET MAUI Control Templates](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/control-templates)

knowledge-base/numericinput-overriding-winui-minwidth.md

@@ -0,0 +1,82 @@
+---
+title: Overriding MinWidth in NumericInput for MAUI
+description: Learn how to adjust the MinWidth of the NumericInput's InputEditor in MAUI to prevent content from being cut off.
+type: how-to
+page_title: How to Adjust the MinWidth of NumericInput's InputEditor in MAUI
+slug: numericinput-maui-overriding-minwidth
+tags: numericinput, maui, customization, minwidth, inputeditor
+res_type: kb
+ticketid: 1656724
+---
+
+## Environment
+
+| Product | Version |
+| --- | --- |
+| NumericInput for MAUI | 7.0.0 |
+
+## Description
+
+When styling the [NumericInput](https://docs.telerik.com/devtools/maui/controls/numericinput/overview) with `HorizontalTextAlignment` set to `End`, the value is cut off as the control's width decreases. This issue occurs because the `InputEditor` has a `MinWidth` of 64.
+
+This KB article also answers the following questions:
+- How can I prevent the NumericInput value from being cut off when aligned to the end?
+- Is it possible to customize the MinWidth of the NumericInput's InputEditor in MAUI?
+- How to adjust the NumericInput's styling to utilize unused space on the left?
+
+## Solution
+
+To address the issue of the NumericInput's value being cut off due to the `MinWidth` setting of the `InputEditor`, follow these steps:
+
+1. Define the ControlTemplate—To access RadNumericInput's internal NumericInputEntry subcomponent, follow the directions in the [NumericInput - ControlTemplate](https://docs.telerik.com/devtools/maui/controls/numericinput/control-template) documentation.
+
+2. Subscribe to the NumericInputEntry's Loaded Event:  
+
+    ```xaml
+    <telerik:NumericInputEntry x:Name="PART_Entry"
+                           Style="{TemplateBinding ActualEntryStyle}"
+                           Loaded="OnNumericInputLoaded"/>
+    ```
+    ```csharp
+        private void OnNumericInputLoaded(object sender, EventArgs e)
+        {  
+        }
+    ```
+
+3. Access the native Entry element&mdash;To access platform-specific implementation, use conditional compilation `#ifdef` for WINDOWS, and define the `Handler.PlatformView` as the abstract `RadMauiEntry` type.
+
+    ```csharp
+        private void OnNumericInputLoaded(object sender, EventArgs e)
+        {
+    #if WINDOWS
+            if ((sender as NumericInputEntry)?.Handler?.PlatformView is RadMauiEntry nativeEntry)
+            {
+            }
+    #endif
+        }
+    ```
+
+4. Set the Inputeditor's MinWdith property&mdash;With access to the handler's PlatformView, you can now set the `MinWidth` property of the concrete native WinUI `InputEditor` (which is of type RadTextBox).
+
+    ```csharp
+        private void OnNumericInputLoaded(object sender, EventArgs e)
+        {
+    #if WINDOWS
+            if ((sender as NumericInputEntry)?.Handler?.PlatformView is RadMauiEntry nativeEntry)
+            {
+                // Concrete instance of InputEditor is WinUI RadTextBox
+                nativeEntry.InputEditor.MinWidth = 0;
+            }
+    #endif
+        }
+    ```
+
+## Notes
+
+- Customizing internal settings of controls should be done with an understanding of the potential impact on control behavior and layout.
+- Always test customization thoroughly to ensure it meets your application's requirements.
+
+## See Also
+
+- [NumericInput Overview](https://docs.telerik.com/devtools/maui/controls/numericinput/overview)
+- [Customizing Entry Cursor in MAUI](https://docs.telerik.com/devtools/maui/knowledge-base/entry-cursor-customization)