998122: Implemented suggested changes

Author: Ashwini-SF5049

ej2-asp-core-mvc/maskedtextbox/adornments.md

@@ -11,25 +11,23 @@ domainurl: ##DomainURL##
 
 # Adornments in ##Platform_Name## MaskedTextBox control
 
-This example highlights adornment support in the Syncfusion MaskedTextBox. Adornments let you place custom elements before or after the masked input by using the `prependTemplate` and `appendTemplate` properties—such as prefixes, suffix labels, or action icons—to provide context, guide entry, and offer quick actions, while preserving mask validation and float label behavior.
+Adornments in the MaskedTextBox control allow you to add custom elements before or after the masked input using the `prependTemplate` and `appendTemplate` properties. These elements can include prefixes, suffix labels, or action icons to provide context, guide user input, and offer quick actions while preserving mask validation and float label behavior.
 
-## Overview
+## Common Use Cases
 
-Adornments are useful for:
-- **Entry Guidance**: Add icons/text to hint the expected input (e.g., user icon for username/login)
-- **Quick Actions**: Include buttons to submit, clear, or copy the masked value
-- **Context Labels**: Add static prefixes/suffixes like country code, domain, or unit suffix
-- **Visual Feedback**: Show status indicators without interfering with the mask
-- **Float Label Compatibility**: Works seamlessly with `floatLabelType` set to Auto, Always, or Never
+- **Entry Guidance**: Add icons/text to hint the expected input (e.g., user icon for username/login).
+- **Quick Actions**: Include buttons to submit, clear, or copy the masked value.
+- **Context Labels**: Add static prefixes/suffixes like country code, domain, or unit suffix.
+- **Visual Feedback**: Show status indicators without interfering with the mask.
 
-## Add adornments to masked textbox
+## Adding Adornments to MaskedTextBox
 
-Use prependTemplate and appendTemplate to inject HTML content before and after the masked input respectively. These templates do not alter mask behavior and support any inline HTML or icon.
+Use `prependTemplate` and `appendTemplate` to inject HTML content before and after the masked input respectively. These templates do not alter mask behavior and support any inline HTML or icon.
 
-- **PrependTemplate**: Renders before the masked input.
-- **AppendTemplate**: Renders after the masked input.
+- **prependTemplate**: Renders elements before the masked input.
+- **appendTemplate**: Renders elements after the masked input.
 
-## Basic implementation
+The following example demonstrates how to add adornments in the MaskedTextBox control.
 
 {% if page.publishingplatform == "aspnet-core" %}
 

ej2-asp-core-mvc/numerictextbox/adornments.md

@@ -11,27 +11,23 @@ domainurl: ##DomainURL##
 
 # Adornments in ##Platform_Name## NumericTextBox control
 
-Adornments enhance the numeric textbox by adding custom elements such as currency symbols, unit labels, or action icons before or after the input field. This feature provides a flexible way to extend numeric textbox functionality with visual context or interactive elements for improved user experience and input clarity.
+Adornments allow you to add custom elements before or after the numeric textbox using the `prependTemplate` and `appendTemplate` properties. These elements can include currency symbols, unit labels, or action icons to provide context and quick actions without affecting numeric behavior or float label functionality.
 
-## Overview
+## Common Use Cases
 
-Adornments are useful for:
-- **Currency Symbols**: Adding currency indicators ($, €, ¥, etc.) to monetary inputs
-- **Unit Labels**: Displaying measurement units (kg, m, cm, km, etc.)
-- **Decimal Indicators**: Showing decimal points or precision information
-- **Action Icons**: Including buttons for increment, decrement, reset, or clear operations
-- **Visual Context**: Adding icons that indicate the input type or purpose
-- **Input Validation**: Displaying validation status or range indicators
-- **Improved Clarity**: Providing visuals to guide user input and enhance discoverability
+- **Currency Symbols**: Add indicators like $, €, ¥ for monetary inputs.
+- **Unit Labels**: Show measurement units (kg, cm, km).
+- **Action Icons**: Include buttons for clear, reset, or custom actions.
+- **Visual Context**: Display icons for input type or status.
 
-## Add adornments to numeric textbox
+## Adding Adornments to NumericTextBox
 
-Adornments are added using the prependTemplate and appendTemplate properties. These properties accept HTML content that renders before and after the numeric input field respectively, enabling flexible customization without modifying the core numeric textbox structure.
+Use `prependTemplate` and `appendTemplate` to inject HTML content before and after the masked input respectively. These templates do not alter mask behavior and support any inline HTML or icon.
 
-**PrependTemplate**: Renders before the numeric textbox.
-**AppendTemplate**: Renders after the numeric textbox.
+**prependTemplate**: Renders elements before the numeric textbox.
+**appendTemplate**: Renders elements after the numeric textbox.
 
-### Basic implementation
+The following example demonstrates how to add adornments in the NumericTextBox control.
 
 {% if page.publishingplatform == "aspnet-core" %}
 

ej2-asp-core-mvc/textarea/adornments.md

@@ -11,38 +11,35 @@ domainurl: ##DomainURL##
 
 # Adornments in ##Platform_Name## TextArea control
 
-Adornments enhance the textarea by adding custom elements such as icons, text, or buttons before or after the text input area. This feature provides a flexible way to extend textarea functionality with visual indicators, formatting options, or interactive elements for improved user experience and content management.
+Adornments allow you to add custom elements before or after the TextArea using the `prependTemplate` and `appendTemplate` properties. These elements can include icons, text labels, or action buttons for formatting and content management. With orientation support, you can arrange adornments horizontally or vertically using `adornmentFlow` and `adornmentOrientation` for flexible layouts.
 
-## Overview
+## Common Use Cases
 
-Adornments are useful for:
-- **Visual Context**: Adding icons that provide visual indicators about the textarea purpose (e.g., edit icon for comments, document icon for descriptions)
-- **Formatting Tools**: Including action buttons such as bold, italic, underline, or text formatting controls
-- **Content Actions**: Displaying save, delete, clear, or submit buttons for quick content management
-- **Input Validation**: Showing validation status icons or character count indicators
-- **Accessibility**: Providing visual and interactive to guide user input and improve discoverability
-- **Layout Flexibility**: Configurable flow (horizontal/vertical) and orientation for responsive designs
+- **Visual Indicators**: Icons for context (e.g., edit, comment).
+- **Formatting Tools**: Buttons for bold, italic, underline.
+- **Content Actions**: Save, clear, or submit buttons.
+- **Validation & Status**: Character count or error icons.
+- **Flexible Layout**: Horizontal or vertical adornment flow.
 
-## Add adornments to textarea
+## Adding Adornments with Orientation to TextArea
 
-Adornments are added using the prependTemplate and appendTemplate properties. These properties accept HTML content that renders before and after the textarea respectively, enabling flexible customization without modifying the core textarea structure.
+Use `prependTemplate` and `appendTemplate` to add custom HTML content before and after the TextArea.
 
-**PrependTemplate**: Renders before the textarea.
-**AppendTemplate**: Renders after the textarea.
+- **`prependTemplate`**: Renders elements before the textarea.
 
-## Configure flow and orientation
+- **`appendTemplate`**: Renders elements after the textarea.
 
-The [adornmentFlow](../api/textarea) and [adornmentOrientation](../api/textarea) properties control how adornments are arranged around the textarea:
+You can control how adornments are positioned and arranged using the `adornmentFlow` and `adornmentOrientation` properties. Both properties accept only `Horizontal` or `Vertical` values defined in the `AdornmentsDirection` type.
 
-**Adornment Flow** Property to position adornments around the textarea:
-- `Horizontal`:  prepend on the left, append on the right
-- `Vertical`: prepend above, append below
+- **`adornmentFlow`**: Defines where adornments appear around the TextArea.
+  - **Horizontal**: Prepend on the left, append on the right.
+  - **Vertical**: Prepend above, append below.
 
-**Adornment Orientation** property to arrange content inside each adornment:
-- `Horizontal`:items in a row
-- `Vertical`: items in a column
+- **`adornmentOrientation`**: Defines how items inside each adornment are arranged.
+  - **Horizontal**: Items displayed in a row.
+  - **Vertical**: Items displayed in a column.
 
-### Basic implementation
+The following example demonstrates how to add adornments with orientation in the TextArea control.
 
 {% if page.publishingplatform == "aspnet-core" %}
 

ej2-asp-core-mvc/textbox/adornments.md

@@ -9,9 +9,9 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Adornments in ##Platform_Name## Textbox control
+# Adornments in ##Platform_Name## TextBox control
 
-Adornments enhance the textbox by adding custom elements such as icons, text, or buttons at the before or after of the input field. This feature provides a flexible way to extend textbox functionality with visual indicators or interactive elements for improved user experience.
+Adornments allow you to add custom elements before or after the TextBox using `prependTemplate` and `appendTemplate`. These elements can include icons, text labels, or action buttons to improve usability and provide visual context.
 
 ## Overview
 
@@ -22,14 +22,22 @@ Adornments are useful for:
 - **Unit Indicators**: Showing currency symbols, temperature units, domain extensions, or measurement units
 - **Accessibility**: Providing visual and interactive guidance to help users input and improve discoverability
 
-## Add adornments to textbox
+## Common Use Cases
 
-Adornments are added using the prependTemplate and appendTemplate properties. These properties accept HTML content that renders before and after the input field respectively, enabling flexible customization without modifying the core textbox structure.
+- **Visual Indicators**: Icons for expected input type (e.g., user icon for username, envelope icon for email).
+- **Functional Enhancements**: Buttons for password visibility toggle or clear input.
+- **Validation Status**: Icons for error or success indicators.
+- **Unit Indicators**: Currency symbols, measurement units, or domain extensions.
 
-**PrependTemplate**: Renders before the textbox. 
-**AppendTemplate**: Renders after the textbox.
 
-### Basic implementation
+## Adding Adornments to TextBox
+
+Use `prependTemplate` and `appendTemplate` properties to add custom HTML content before and after the TextBox.
+
+- **`prependTemplate`**: Renders elements before the TextBox.
+- **`appendTemplate`**: Renders elements after the TextBox.
+
+The following example demonstrates how to add adornments in the TextBox control.
 
 {% if page.publishingplatform == "aspnet-core" %}
 

ej2-asp-core-toc.html

@@ -1718,9 +1718,9 @@
 		<ul>
 		<li><a href="/ej2-asp-core/maskedtextbox/getting-started">Getting Started</a></li>
 		<li><a href="/ej2-asp-core/maskedtextbox/mask-configuration">Mask Configuration</a></li>
+		<li><a href="/ej2-asp-core/maskedtextbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-core/maskedtextbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-core/maskedtextbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-core/maskedtextbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-core/maskedtextbox/how-to/perform-custom-validation-using-form-validator">Perform custom validation using FormValidator</a></li>
@@ -1850,10 +1850,10 @@
 		<ul>
 		<li><a href="/ej2-asp-core/numerictextbox/getting-started">Getting Started</a></li>
 		<li><a href="/ej2-asp-core/numerictextbox/formats">Number Formats</a></li>
+		<li><a href="/ej2-asp-core/numerictextbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-core/numerictextbox/globalization">Globalization</a></li>
 		<li><a href="/ej2-asp-core/numerictextbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-core/numerictextbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-core/numerictextbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-core/numerictextbox/how-to/customize-the-ui-appearance-of-the-control">Customize the UI appearance of the control</a></li>
@@ -2659,9 +2659,9 @@
 		<li><a href="/ej2-asp-core/textbox/sizing">Sizing</a></li>
 		<li><a href="/ej2-asp-core/textbox/validation">Validation</a></li>
 		<li><a href="/ej2-asp-core/textbox/multiline">Multiline</a></li>
+		<li><a href="/ej2-asp-core/textbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-core/textbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-core/textbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-core/textbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-core/textbox/how-to/set-the-rounded-corner">Set the Rounded Corner</a></li>
@@ -2704,8 +2704,8 @@
 			<li><a href="/ej2-asp-core/textarea/resize">Resize</a></li>
 			<li><a href="/ej2-asp-core/textarea/max-length">Maximum Length</a></li>
 			<li><a href="/ej2-asp-core/textarea/form-support">Form Support</a></li>
-			<li><a href="/ej2-asp-core/textarea/style-appearance">Style and Appearance</a></li>
 			<li><a href="/ej2-asp-core/textarea/adornments">Adornments</a></li>
+			<li><a href="/ej2-asp-core/textarea/style-appearance">Style and Appearance</a></li>
 			<li><a href="/ej2-asp-core/textarea/events">Events</a></li>
 			<li><a href="/ej2-asp-core/textarea/methods">Methods</a></li>
 			<li>

ej2-asp-mvc-toc.html

@@ -1672,9 +1672,9 @@
 		<ul>
 		<li><a href="/ej2-asp-mvc/maskedtextbox/getting-started">Getting Started</a></li>
 		<li><a href="/ej2-asp-mvc/maskedtextbox/mask-configuration">Mask Configuration</a></li>
+		<li><a href="/ej2-asp-mvc/maskedtextbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-mvc/maskedtextbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-mvc/maskedtextbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-mvc/maskedtextbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-mvc/maskedtextbox/how-to/perform-custom-validation-using-form-validator">Perform custom validation using FormValidator</a></li>
@@ -1804,10 +1804,10 @@
 		<ul>
 		<li><a href="/ej2-asp-mvc/numerictextbox/getting-started">Getting Started</a></li>
 		<li><a href="/ej2-asp-mvc/numerictextbox/formats">Number Formats</a></li>
+		<li><a href="/ej2-asp-mvc/numerictextbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-mvc/numerictextbox/globalization">Globalization</a></li>
 		<li><a href="/ej2-asp-mvc/numerictextbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-mvc/numerictextbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-mvc/numerictextbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-mvc/numerictextbox/how-to/customize-the-ui-appearance-of-the-control">Customize the UI appearance of the control</a></li>
@@ -2586,9 +2586,9 @@
 		<li><a href="/ej2-asp-mvc/textbox/sizing">Sizing</a></li>
 		<li><a href="/ej2-asp-mvc/textbox/validation">Validation</a></li>
 		<li><a href="/ej2-asp-mvc/textbox/multiline">Multiline</a></li>
+		<li><a href="/ej2-asp-mvc/textbox/adornments">Adornments</a></li>
 		<li><a href="/ej2-asp-mvc/textbox/accessibility">Accessibility</a></li>
 		<li><a href="/ej2-asp-mvc/textbox/style-appearance">Style and Appearance</a></li>
-		<li><a href="/ej2-asp-mvc/textbox/adornments">Adornments</a></li>
 		<li>How To
 		<ul>
 		<li><a href="/ej2-asp-mvc/textbox/how-to/set-the-rounded-corner">Set the Rounded Corner</a></li>
@@ -2631,8 +2631,8 @@
 			<li><a href="/ej2-asp-mvc/textarea/resize">Resize</a></li>
 			<li><a href="/ej2-asp-mvc/textarea/max-length">Maximum Length</a></li>
 			<li><a href="/ej2-asp-mvc/textarea/form-support">Form Support</a></li>
-			<li><a href="/ej2-asp-mvc/textarea/style-appearance">Style and Appearance</a></li>
 			<li><a href="/ej2-asp-mvc/textarea/adornments">Adornments</a></li>
+			<li><a href="/ej2-asp-mvc/textarea/style-appearance">Style and Appearance</a></li>
 			<li><a href="/ej2-asp-mvc/textarea/events">Events</a></li>
 			<li><a href="/ej2-asp-mvc/textarea/methods">Methods</a></li>
 			<li>