Skip to content

Commit 727433f

Browse files
998122: Implemented suggested changes
1 parent c4c60fb commit 727433f

File tree

6 files changed

+64
-65
lines changed

6 files changed

+64
-65
lines changed

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,25 +11,23 @@ domainurl: ##DomainURL##
1111

1212
# Adornments in ##Platform_Name## MaskedTextBox control
1313

14-
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 iconsto provide context, guide entry, and offer quick actions, while preserving mask validation and float label behavior.
14+
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.
1515

16-
## Overview
16+
## Common Use Cases
1717

18-
Adornments are useful for:
19-
- **Entry Guidance**: Add icons/text to hint the expected input (e.g., user icon for username/login)
20-
- **Quick Actions**: Include buttons to submit, clear, or copy the masked value
21-
- **Context Labels**: Add static prefixes/suffixes like country code, domain, or unit suffix
22-
- **Visual Feedback**: Show status indicators without interfering with the mask
23-
- **Float Label Compatibility**: Works seamlessly with `floatLabelType` set to Auto, Always, or Never
18+
- **Entry Guidance**: Add icons/text to hint the expected input (e.g., user icon for username/login).
19+
- **Quick Actions**: Include buttons to submit, clear, or copy the masked value.
20+
- **Context Labels**: Add static prefixes/suffixes like country code, domain, or unit suffix.
21+
- **Visual Feedback**: Show status indicators without interfering with the mask.
2422

25-
## Add adornments to masked textbox
23+
## Adding Adornments to MaskedTextBox
2624

27-
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.
25+
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.
2826

29-
- **PrependTemplate**: Renders before the masked input.
30-
- **AppendTemplate**: Renders after the masked input.
27+
- **prependTemplate**: Renders elements before the masked input.
28+
- **appendTemplate**: Renders elements after the masked input.
3129

32-
## Basic implementation
30+
The following example demonstrates how to add adornments in the MaskedTextBox control.
3331

3432
{% if page.publishingplatform == "aspnet-core" %}
3533

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,23 @@ domainurl: ##DomainURL##
1111

1212
# Adornments in ##Platform_Name## NumericTextBox control
1313

14-
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.
14+
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.
1515

16-
## Overview
16+
## Common Use Cases
1717

18-
Adornments are useful for:
19-
- **Currency Symbols**: Adding currency indicators ($, €, ¥, etc.) to monetary inputs
20-
- **Unit Labels**: Displaying measurement units (kg, m, cm, km, etc.)
21-
- **Decimal Indicators**: Showing decimal points or precision information
22-
- **Action Icons**: Including buttons for increment, decrement, reset, or clear operations
23-
- **Visual Context**: Adding icons that indicate the input type or purpose
24-
- **Input Validation**: Displaying validation status or range indicators
25-
- **Improved Clarity**: Providing visuals to guide user input and enhance discoverability
18+
- **Currency Symbols**: Add indicators like $, €, ¥ for monetary inputs.
19+
- **Unit Labels**: Show measurement units (kg, cm, km).
20+
- **Action Icons**: Include buttons for clear, reset, or custom actions.
21+
- **Visual Context**: Display icons for input type or status.
2622

27-
## Add adornments to numeric textbox
23+
## Adding Adornments to NumericTextBox
2824

29-
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.
25+
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.
3026

31-
**PrependTemplate**: Renders before the numeric textbox.
32-
**AppendTemplate**: Renders after the numeric textbox.
27+
**prependTemplate**: Renders elements before the numeric textbox.
28+
**appendTemplate**: Renders elements after the numeric textbox.
3329

34-
### Basic implementation
30+
The following example demonstrates how to add adornments in the NumericTextBox control.
3531

3632
{% if page.publishingplatform == "aspnet-core" %}
3733

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

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,35 @@ domainurl: ##DomainURL##
1111

1212
# Adornments in ##Platform_Name## TextArea control
1313

14-
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.
14+
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.
1515

16-
## Overview
16+
## Common Use Cases
1717

18-
Adornments are useful for:
19-
- **Visual Context**: Adding icons that provide visual indicators about the textarea purpose (e.g., edit icon for comments, document icon for descriptions)
20-
- **Formatting Tools**: Including action buttons such as bold, italic, underline, or text formatting controls
21-
- **Content Actions**: Displaying save, delete, clear, or submit buttons for quick content management
22-
- **Input Validation**: Showing validation status icons or character count indicators
23-
- **Accessibility**: Providing visual and interactive to guide user input and improve discoverability
24-
- **Layout Flexibility**: Configurable flow (horizontal/vertical) and orientation for responsive designs
18+
- **Visual Indicators**: Icons for context (e.g., edit, comment).
19+
- **Formatting Tools**: Buttons for bold, italic, underline.
20+
- **Content Actions**: Save, clear, or submit buttons.
21+
- **Validation & Status**: Character count or error icons.
22+
- **Flexible Layout**: Horizontal or vertical adornment flow.
2523

26-
## Add adornments to textarea
24+
## Adding Adornments with Orientation to TextArea
2725

28-
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.
26+
Use `prependTemplate` and `appendTemplate` to add custom HTML content before and after the TextArea.
2927

30-
**PrependTemplate**: Renders before the textarea.
31-
**AppendTemplate**: Renders after the textarea.
28+
- **`prependTemplate`**: Renders elements before the textarea.
3229

33-
## Configure flow and orientation
30+
- **`appendTemplate`**: Renders elements after the textarea.
3431

35-
The [adornmentFlow](../api/textarea) and [adornmentOrientation](../api/textarea) properties control how adornments are arranged around the textarea:
32+
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.
3633

37-
**Adornment Flow** Property to position adornments around the textarea:
38-
- `Horizontal`: prepend on the left, append on the right
39-
- `Vertical`: prepend above, append below
34+
- **`adornmentFlow`**: Defines where adornments appear around the TextArea.
35+
- **Horizontal**: Prepend on the left, append on the right.
36+
- **Vertical**: Prepend above, append below.
4037

41-
**Adornment Orientation** property to arrange content inside each adornment:
42-
- `Horizontal`:items in a row
43-
- `Vertical`: items in a column
38+
- **`adornmentOrientation`**: Defines how items inside each adornment are arranged.
39+
- **Horizontal**: Items displayed in a row.
40+
- **Vertical**: Items displayed in a column.
4441

45-
### Basic implementation
42+
The following example demonstrates how to add adornments with orientation in the TextArea control.
4643

4744
{% if page.publishingplatform == "aspnet-core" %}
4845

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ documentation: ug
99
domainurl: ##DomainURL##
1010
---
1111

12-
# Adornments in ##Platform_Name## Textbox control
12+
# Adornments in ##Platform_Name## TextBox control
1313

14-
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.
14+
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.
1515

1616
## Overview
1717

@@ -22,14 +22,22 @@ Adornments are useful for:
2222
- **Unit Indicators**: Showing currency symbols, temperature units, domain extensions, or measurement units
2323
- **Accessibility**: Providing visual and interactive guidance to help users input and improve discoverability
2424

25-
## Add adornments to textbox
25+
## Common Use Cases
2626

27-
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.
27+
- **Visual Indicators**: Icons for expected input type (e.g., user icon for username, envelope icon for email).
28+
- **Functional Enhancements**: Buttons for password visibility toggle or clear input.
29+
- **Validation Status**: Icons for error or success indicators.
30+
- **Unit Indicators**: Currency symbols, measurement units, or domain extensions.
2831

29-
**PrependTemplate**: Renders before the textbox.
30-
**AppendTemplate**: Renders after the textbox.
3132

32-
### Basic implementation
33+
## Adding Adornments to TextBox
34+
35+
Use `prependTemplate` and `appendTemplate` properties to add custom HTML content before and after the TextBox.
36+
37+
- **`prependTemplate`**: Renders elements before the TextBox.
38+
- **`appendTemplate`**: Renders elements after the TextBox.
39+
40+
The following example demonstrates how to add adornments in the TextBox control.
3341

3442
{% if page.publishingplatform == "aspnet-core" %}
3543

ej2-asp-core-toc.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1718,9 +1718,9 @@
17181718
<ul>
17191719
<li><a href="/ej2-asp-core/maskedtextbox/getting-started">Getting Started</a></li>
17201720
<li><a href="/ej2-asp-core/maskedtextbox/mask-configuration">Mask Configuration</a></li>
1721+
<li><a href="/ej2-asp-core/maskedtextbox/adornments">Adornments</a></li>
17211722
<li><a href="/ej2-asp-core/maskedtextbox/accessibility">Accessibility</a></li>
17221723
<li><a href="/ej2-asp-core/maskedtextbox/style-appearance">Style and Appearance</a></li>
1723-
<li><a href="/ej2-asp-core/maskedtextbox/adornments">Adornments</a></li>
17241724
<li>How To
17251725
<ul>
17261726
<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 @@
18501850
<ul>
18511851
<li><a href="/ej2-asp-core/numerictextbox/getting-started">Getting Started</a></li>
18521852
<li><a href="/ej2-asp-core/numerictextbox/formats">Number Formats</a></li>
1853+
<li><a href="/ej2-asp-core/numerictextbox/adornments">Adornments</a></li>
18531854
<li><a href="/ej2-asp-core/numerictextbox/globalization">Globalization</a></li>
18541855
<li><a href="/ej2-asp-core/numerictextbox/accessibility">Accessibility</a></li>
18551856
<li><a href="/ej2-asp-core/numerictextbox/style-appearance">Style and Appearance</a></li>
1856-
<li><a href="/ej2-asp-core/numerictextbox/adornments">Adornments</a></li>
18571857
<li>How To
18581858
<ul>
18591859
<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 @@
26592659
<li><a href="/ej2-asp-core/textbox/sizing">Sizing</a></li>
26602660
<li><a href="/ej2-asp-core/textbox/validation">Validation</a></li>
26612661
<li><a href="/ej2-asp-core/textbox/multiline">Multiline</a></li>
2662+
<li><a href="/ej2-asp-core/textbox/adornments">Adornments</a></li>
26622663
<li><a href="/ej2-asp-core/textbox/accessibility">Accessibility</a></li>
26632664
<li><a href="/ej2-asp-core/textbox/style-appearance">Style and Appearance</a></li>
2664-
<li><a href="/ej2-asp-core/textbox/adornments">Adornments</a></li>
26652665
<li>How To
26662666
<ul>
26672667
<li><a href="/ej2-asp-core/textbox/how-to/set-the-rounded-corner">Set the Rounded Corner</a></li>
@@ -2704,8 +2704,8 @@
27042704
<li><a href="/ej2-asp-core/textarea/resize">Resize</a></li>
27052705
<li><a href="/ej2-asp-core/textarea/max-length">Maximum Length</a></li>
27062706
<li><a href="/ej2-asp-core/textarea/form-support">Form Support</a></li>
2707-
<li><a href="/ej2-asp-core/textarea/style-appearance">Style and Appearance</a></li>
27082707
<li><a href="/ej2-asp-core/textarea/adornments">Adornments</a></li>
2708+
<li><a href="/ej2-asp-core/textarea/style-appearance">Style and Appearance</a></li>
27092709
<li><a href="/ej2-asp-core/textarea/events">Events</a></li>
27102710
<li><a href="/ej2-asp-core/textarea/methods">Methods</a></li>
27112711
<li>

ej2-asp-mvc-toc.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1672,9 +1672,9 @@
16721672
<ul>
16731673
<li><a href="/ej2-asp-mvc/maskedtextbox/getting-started">Getting Started</a></li>
16741674
<li><a href="/ej2-asp-mvc/maskedtextbox/mask-configuration">Mask Configuration</a></li>
1675+
<li><a href="/ej2-asp-mvc/maskedtextbox/adornments">Adornments</a></li>
16751676
<li><a href="/ej2-asp-mvc/maskedtextbox/accessibility">Accessibility</a></li>
16761677
<li><a href="/ej2-asp-mvc/maskedtextbox/style-appearance">Style and Appearance</a></li>
1677-
<li><a href="/ej2-asp-mvc/maskedtextbox/adornments">Adornments</a></li>
16781678
<li>How To
16791679
<ul>
16801680
<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 @@
18041804
<ul>
18051805
<li><a href="/ej2-asp-mvc/numerictextbox/getting-started">Getting Started</a></li>
18061806
<li><a href="/ej2-asp-mvc/numerictextbox/formats">Number Formats</a></li>
1807+
<li><a href="/ej2-asp-mvc/numerictextbox/adornments">Adornments</a></li>
18071808
<li><a href="/ej2-asp-mvc/numerictextbox/globalization">Globalization</a></li>
18081809
<li><a href="/ej2-asp-mvc/numerictextbox/accessibility">Accessibility</a></li>
18091810
<li><a href="/ej2-asp-mvc/numerictextbox/style-appearance">Style and Appearance</a></li>
1810-
<li><a href="/ej2-asp-mvc/numerictextbox/adornments">Adornments</a></li>
18111811
<li>How To
18121812
<ul>
18131813
<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 @@
25862586
<li><a href="/ej2-asp-mvc/textbox/sizing">Sizing</a></li>
25872587
<li><a href="/ej2-asp-mvc/textbox/validation">Validation</a></li>
25882588
<li><a href="/ej2-asp-mvc/textbox/multiline">Multiline</a></li>
2589+
<li><a href="/ej2-asp-mvc/textbox/adornments">Adornments</a></li>
25892590
<li><a href="/ej2-asp-mvc/textbox/accessibility">Accessibility</a></li>
25902591
<li><a href="/ej2-asp-mvc/textbox/style-appearance">Style and Appearance</a></li>
2591-
<li><a href="/ej2-asp-mvc/textbox/adornments">Adornments</a></li>
25922592
<li>How To
25932593
<ul>
25942594
<li><a href="/ej2-asp-mvc/textbox/how-to/set-the-rounded-corner">Set the Rounded Corner</a></li>
@@ -2631,8 +2631,8 @@
26312631
<li><a href="/ej2-asp-mvc/textarea/resize">Resize</a></li>
26322632
<li><a href="/ej2-asp-mvc/textarea/max-length">Maximum Length</a></li>
26332633
<li><a href="/ej2-asp-mvc/textarea/form-support">Form Support</a></li>
2634-
<li><a href="/ej2-asp-mvc/textarea/style-appearance">Style and Appearance</a></li>
26352634
<li><a href="/ej2-asp-mvc/textarea/adornments">Adornments</a></li>
2635+
<li><a href="/ej2-asp-mvc/textarea/style-appearance">Style and Appearance</a></li>
26362636
<li><a href="/ej2-asp-mvc/textarea/events">Events</a></li>
26372637
<li><a href="/ej2-asp-mvc/textarea/methods">Methods</a></li>
26382638
<li>

0 commit comments

Comments
 (0)