From 3dff3ceab2d958ac34ab64154b1e09a6ccc41f1c Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Wed, 10 Dec 2025 16:44:22 +0530 Subject: [PATCH 1/6] 998122: Including Adronments feature into UG documentation --- .../maskedtextbox/adornments/adornments.cs | 4 + .../maskedtextbox/adornments/razor | 20 +++++ .../maskedtextbox/adornments/tagHelper | 16 ++++ .../numeric-textbox/adornments/adornments.cs | 4 + .../numeric-textbox/adornments/razor | 64 +++++++++++++++ .../numeric-textbox/adornments/tagHelper | 74 ++++++++++++++++++ .../textarea/adornments/adornments.cs | 4 + .../code-snippet/textarea/adornments/razor | 57 ++++++++++++++ .../textarea/adornments/tagHelper | 57 ++++++++++++++ .../textbox/adornments/adornments.cs | 4 + .../code-snippet/textbox/adornments/razor | 48 ++++++++++++ .../code-snippet/textbox/adornments/tagHelper | 63 +++++++++++++++ ej2-asp-core-mvc/maskedtextbox/adornments.md | 53 +++++++++++++ .../maskedtextbox/images/adornments.png | Bin 0 -> 3164 bytes ej2-asp-core-mvc/numerictextbox/adornments.md | 55 +++++++++++++ .../numerictextbox/images/adornments.png | Bin 0 -> 8314 bytes ej2-asp-core-mvc/textarea/adornments.md | 66 ++++++++++++++++ .../textarea/images/textarea-adornments.png | Bin 0 -> 6223 bytes ej2-asp-core-mvc/textbox/adornments.md | 53 +++++++++++++ .../textbox/images/textbox-adornments.png | Bin 0 -> 5872 bytes ej2-asp-core-toc.html | 4 + ej2-asp-mvc-toc.html | 4 + 22 files changed, 650 insertions(+) create mode 100644 ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/adornments.cs create mode 100644 ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor create mode 100644 ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/adornments.cs create mode 100644 ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor create mode 100644 ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/textarea/adornments/adornments.cs create mode 100644 ej2-asp-core-mvc/code-snippet/textarea/adornments/razor create mode 100644 ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/textbox/adornments/adornments.cs create mode 100644 ej2-asp-core-mvc/code-snippet/textbox/adornments/razor create mode 100644 ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper create mode 100644 ej2-asp-core-mvc/maskedtextbox/adornments.md create mode 100644 ej2-asp-core-mvc/maskedtextbox/images/adornments.png create mode 100644 ej2-asp-core-mvc/numerictextbox/adornments.md create mode 100644 ej2-asp-core-mvc/numerictextbox/images/adornments.png create mode 100644 ej2-asp-core-mvc/textarea/adornments.md create mode 100644 ej2-asp-core-mvc/textarea/images/textarea-adornments.png create mode 100644 ej2-asp-core-mvc/textbox/adornments.md create mode 100644 ej2-asp-core-mvc/textbox/images/textbox-adornments.png diff --git a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/adornments.cs b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/adornments.cs new file mode 100644 index 0000000000..2d555a9aad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/adornments.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor new file mode 100644 index 0000000000..f3b464d1af --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor @@ -0,0 +1,20 @@ +@using Syncfusion.EJ2.Inputs +@using EJ2MVCSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection { +
+
+
+ @Html.EJS().MaskedTextBox("maskTemplate") + .Mask("0000-000-000") + .PromptChar("#") + .Placeholder("Enter phone number") + .FloatLabelType(FloatLabelType.Auto) + .PrependTemplate("") + .AppendTemplate("") + .Render() +
+
+
+} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper new file mode 100644 index 0000000000..2cb77ea837 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper @@ -0,0 +1,16 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")" + appendTemplate="@Html.Raw("")"> + +
+
+
+} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/adornments.cs b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/adornments.cs new file mode 100644 index 0000000000..2d555a9aad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/adornments.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor new file mode 100644 index 0000000000..37b793b2b8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor @@ -0,0 +1,64 @@ +@using Syncfusion.EJ2.Inputs +@using Syncfusion.EJ2.DropDowns +@using EJ2MVCSampleBrowser.Models +@using Syncfusion.EJ2 +@section ControlsSection { +
+
+
+ @Html.EJS().NumericTextBox("prepend").Value(1).Placeholder("Enter the price").FloatLabelType(FloatLabelType.Auto).PrependTemplate("").Created("onPrependCreated").Change("onPriceChange").Render() +
+
+ @Html.EJS().NumericTextBox("append").Value(5).Placeholder("Enter the kg").FloatLabelType(FloatLabelType.Auto).AppendTemplate("kg").Change("onKgChange").Render() +
+
+ @Html.EJS().NumericTextBox("icontemplate").Value(10).Placeholder("Enter the Number").FloatLabelType(FloatLabelType.Auto).ShowSpinButton(false).Created("onIconTemplateCreated").PrependTemplate("").AppendTemplate("").Render() +
+
+
+} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper new file mode 100644 index 0000000000..ee737bbf5d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper @@ -0,0 +1,74 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")"> + +
+
+ kg")"> + +
+
+ ")" + appendTemplate="@Html.Raw("")"> + +
+
+
+} + + +@section PreScripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textarea/adornments/adornments.cs b/ej2-asp-core-mvc/code-snippet/textarea/adornments/adornments.cs new file mode 100644 index 0000000000..2d555a9aad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/adornments.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textarea/adornments/razor b/ej2-asp-core-mvc/code-snippet/textarea/adornments/razor new file mode 100644 index 0000000000..e837d8b84e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/razor @@ -0,0 +1,57 @@ +@using Syncfusion.EJ2.Inputs +@using Syncfusion.EJ2.Buttons +@using Syncfusion.EJ2.DropDowns +@using EJ2MVCSampleBrowser.Models +@using Syncfusion.EJ2 +@{ + List orientationData = new List() { "Horizontal", "Vertical" }; +} +@section ControlsSection { +
+
+
+ @Html.EJS().TextArea("icontemplate").Placeholder("Add a comment").CssClass("e-outline").FloatLabelType(FloatLabelType.Auto).PrependTemplate("").AppendTemplate("").Rows(5).Cols(500).ResizeMode(Resize.None).Render() +
+
+
+ +
+ + + + + + + + + +
Flow Direction +
+ @Html.EJS().DropDownList("flow-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onFlowChange").Render() +
+
Orientation Direction +
+ @Html.EJS().DropDownList("orient-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onOrientChange").Render() +
+
+
+} + + diff --git a/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper new file mode 100644 index 0000000000..5828623a33 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper @@ -0,0 +1,57 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@{ + List orientationData = new List() { "Horizontal", "Vertical" }; +} + +@section ControlsSection{ +
+
+
+ ")" + prependTemplate="@Html.Raw("")"> +
+
+
+ +
+ + + + + + + + + +
Flow Direction + + +
Orientation Direction + + +
+
+} + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textbox/adornments/adornments.cs b/ej2-asp-core-mvc/code-snippet/textbox/adornments/adornments.cs new file mode 100644 index 0000000000..2d555a9aad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/adornments.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textbox/adornments/razor b/ej2-asp-core-mvc/code-snippet/textbox/adornments/razor new file mode 100644 index 0000000000..6efcbfb5c6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/razor @@ -0,0 +1,48 @@ +@using Syncfusion.EJ2.Inputs +@using Syncfusion.EJ2.DropDowns +@using EJ2MVCSampleBrowser.Models +@using Syncfusion.EJ2 +@section ControlsSection { +
+
+
+ @Html.EJS().TextBox("prepend").Placeholder("Enter your Name").CssClass("e-prepend-textbox").FloatLabelType(FloatLabelType.Auto).PrependTemplate("").Render() +
+
+ @Html.EJS().TextBox("append").Placeholder("Password").CssClass("e-eye-icon").FloatLabelType(FloatLabelType.Auto).AppendTemplate("").Created("onAppendCreated").Render() +
+
+ @Html.EJS().TextBox("iconTextbox").Placeholder("Enter the Mail Address").CssClass("e-icon-textbox").FloatLabelType(FloatLabelType.Auto).Created("onIconTemplateCreated").PrependTemplate("").AppendTemplate(".com").Render() +
+
+
+} + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper new file mode 100644 index 0000000000..12bbbb816c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper @@ -0,0 +1,63 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")"> + +
+
+ ")"> + +
+
+ ")" + appendTemplate="@Html.Raw(".com")"> + +
+
+
+} + + + +@section PreScripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/maskedtextbox/adornments.md b/ej2-asp-core-mvc/maskedtextbox/adornments.md new file mode 100644 index 0000000000..60a67b0230 --- /dev/null +++ b/ej2-asp-core-mvc/maskedtextbox/adornments.md @@ -0,0 +1,53 @@ +--- +layout: post +title: Adornments in ##Platform_Name## MaskedTextBox control | Syncfusion +description: Learn here all about Adornments in Syncfusion ##Platform_Name## MaskedTextBox control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Adornments +publishingplatform: ##Platform_Name## +documentation: ug +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. + +## Overview + +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 + +## Add adornments to masked textbox + +Use [prependTemplate](../api/maskedtextbox/#prependtemplate) and [appendTemplate](../api/maskedtextbox/#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. + +- **Prepend (Prefix)**: Renders before the masked input. +- **Append (Suffix)**: Renders after the masked input. + +## Basic implementation + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maskedtextbox/adornments/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maskedtextbox/adornments/razor %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![MaskedTextBox](./images/adornments.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/maskedtextbox/images/adornments.png b/ej2-asp-core-mvc/maskedtextbox/images/adornments.png new file mode 100644 index 0000000000000000000000000000000000000000..4a9f6c4bdb6e04b4c1d3992b778781f09b683997 GIT binary patch literal 3164 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 literal 0 HcmV?d00001 diff --git a/ej2-asp-core-mvc/numerictextbox/adornments.md b/ej2-asp-core-mvc/numerictextbox/adornments.md new file mode 100644 index 0000000000..e6ce28af6f --- /dev/null +++ b/ej2-asp-core-mvc/numerictextbox/adornments.md @@ -0,0 +1,55 @@ +--- +layout: post +title: Adornments in ##Platform_Name## NumericTextBox control | Syncfusion +description: Learn here all about Adornments in Syncfusion ##Platform_Name## NumericTextBox control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Adornments +publishingplatform: ##Platform_Name## +documentation: ug +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. + +## Overview + +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 + +## Add adornments to numeric textbox + +Adornments are added using the [prependTemplate](../api/numerictextbox/#prependtemplate) and [appendTemplate](../api/numerictextbox/#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. + +**Prepend Adornments (Prefix)**: Displayed at the beginning of the numeric textbox (left side for LTR layouts) +**Append Adornments (Suffix)**: Displayed at the end of the numeric textbox (right side for LTR layouts) + +### Basic implementation + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/nnumeric-textbox/adornments/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/numeric-textbox/adornments/razor %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![numeric-textbox](./images/adornments.png) diff --git a/ej2-asp-core-mvc/numerictextbox/images/adornments.png b/ej2-asp-core-mvc/numerictextbox/images/adornments.png new file mode 100644 index 0000000000000000000000000000000000000000..f0d8da66adeaae628544ed8293af91679f163b7c GIT binary patch literal 8314 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 L)KI7dngsnDQB-j% literal 0 HcmV?d00001 diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index c70651d244..37a97ff28a 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1720,6 +1720,7 @@
  • Mask Configuration
  • Accessibility
  • Style and Appearance
    • +
  • Adornments
  • How To
    • Perform custom validation using FormValidator
      • @@ -1852,6 +1853,7 @@
    • Globalization
    • Accessibility
    • Style and Appearance
      • +
    • Adornments
    • How To
      • Customize the UI appearance of the control
        • @@ -2659,6 +2661,7 @@
      • Multiline
      • Accessibility
      • Style and Appearance
        • +
      • Adornments
      • How To
        • Set the Rounded Corner
          • @@ -2702,6 +2705,7 @@
        • Maximum Length
        • Form Support
        • Style and Appearance
          • +
        • Adornments
        • Events
        • Methods
        • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index 0ef284eefd..ae8445f477 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1674,6 +1674,7 @@
        • Mask Configuration
        • Accessibility
        • Style and Appearance
          • +
        • Adornments
        • How To
          • Perform custom validation using FormValidator
            • @@ -1806,6 +1807,7 @@
          • Globalization
          • Accessibility
          • Style and Appearance
            • +
          • Adornments
          • How To
            • Customize the UI appearance of the control
              • @@ -2586,6 +2588,7 @@
            • Multiline
            • Accessibility
            • Style and Appearance
              • +
            • Adornments
            • How To
              • Set the Rounded Corner
                • @@ -2629,6 +2632,7 @@
              • Maximum Length
              • Form Support
              • Style and Appearance
                • +
              • Adornments
              • Events
              • Methods
              • From cd8baaaa6aa7e0b9a6040b412a56db14bd4943a7 Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Wed, 10 Dec 2025 17:18:50 +0530 Subject: [PATCH 2/6] 998122: updated --- ej2-asp-core-mvc/maskedtextbox/adornments.md | 2 +- ej2-asp-core-mvc/numerictextbox/adornments.md | 4 ++-- ej2-asp-core-mvc/textarea/adornments.md | 4 ++-- ej2-asp-core-mvc/textbox/adornments.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/ej2-asp-core-mvc/maskedtextbox/adornments.md b/ej2-asp-core-mvc/maskedtextbox/adornments.md index 60a67b0230..116100d935 100644 --- a/ej2-asp-core-mvc/maskedtextbox/adornments.md +++ b/ej2-asp-core-mvc/maskedtextbox/adornments.md @@ -24,7 +24,7 @@ Adornments are useful for: ## Add adornments to masked textbox -Use [prependTemplate](../api/maskedtextbox/#prependtemplate) and [appendTemplate](../api/maskedtextbox/#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](../api/maskedtextbox) and [appendTemplate](../api/maskedtextbox) 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. - **Prepend (Prefix)**: Renders before the masked input. - **Append (Suffix)**: Renders after the masked input. diff --git a/ej2-asp-core-mvc/numerictextbox/adornments.md b/ej2-asp-core-mvc/numerictextbox/adornments.md index e6ce28af6f..90cba559ae 100644 --- a/ej2-asp-core-mvc/numerictextbox/adornments.md +++ b/ej2-asp-core-mvc/numerictextbox/adornments.md @@ -26,7 +26,7 @@ Adornments are useful for: ## Add adornments to numeric textbox -Adornments are added using the [prependTemplate](../api/numerictextbox/#prependtemplate) and [appendTemplate](../api/numerictextbox/#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. +Adornments are added using the [prependTemplate](../api/numerictextbox) and [appendTemplate](../api/numerictextbox) 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. **Prepend Adornments (Prefix)**: Displayed at the beginning of the numeric textbox (left side for LTR layouts) **Append Adornments (Suffix)**: Displayed at the end of the numeric textbox (right side for LTR layouts) @@ -37,7 +37,7 @@ Adornments are added using the [prependTemplate](../api/numerictextbox/#prependt {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/nnumeric-textbox/adornments/tagHelper %} +{% include code-snippet/numeric-textbox/adornments/tagHelper %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/textarea/adornments.md b/ej2-asp-core-mvc/textarea/adornments.md index 05f829ce7f..df57077d3c 100644 --- a/ej2-asp-core-mvc/textarea/adornments.md +++ b/ej2-asp-core-mvc/textarea/adornments.md @@ -25,14 +25,14 @@ Adornments are useful for: ## Add adornments to textarea -Adornments are added using the [prependTemplate](../api/textarea/#prependtemplate) and [appendTemplate](../api/textarea/#appendtemplate) properties. These properties accept HTML content that renders before and after the textarea respectively, enabling flexible customization without modifying the core textarea structure. +Adornments are added using the [prependTemplate](../api/textarea) and [appendTemplate](../api/textarea) properties. These properties accept HTML content that renders before and after the textarea respectively, enabling flexible customization without modifying the core textarea structure. **Prepend Adornments (Prefix)**: Displayed at the beginning of the textarea. **Append Adornments (Suffix)**: Displayed at the end of the textarea. ## Configure flow and orientation -The [adornmentFlow](../api/textarea/#adornmentflow) and [adornmentOrientation](../api/textarea/#adornmentorientation) properties control how adornments are arranged around the textarea: +The [adornmentFlow](../api/textarea) and [adornmentOrientation](../api/textarea) properties control how adornments are arranged around the textarea: **Adornment Flow** Property to position adornments around the textarea: - `Horizontal`: prepend on the left, append on the right diff --git a/ej2-asp-core-mvc/textbox/adornments.md b/ej2-asp-core-mvc/textbox/adornments.md index a5afcd831c..169dde5226 100644 --- a/ej2-asp-core-mvc/textbox/adornments.md +++ b/ej2-asp-core-mvc/textbox/adornments.md @@ -24,7 +24,7 @@ Adornments are useful for: ## Add adornments to textbox -Adornments are added using the [prependTemplate](../api/textbox/#prependtemplate) and [appendTemplate](../api/textbox/#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. +Adornments are added using the [prependTemplate](../api/textbox) and [appendTemplate](../api/textbox) properties. These properties accept HTML content that renders before and after the input field respectively, enabling flexible customization without modifying the core textbox structure. **Prepend Adornments**: Displayed at the beginning of the textbox. **Append Adornments**: Displayed at the end of the textbox. From c4c60fb0112f9833a054a3294cb07a9e3a5e580e Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Thu, 11 Dec 2025 13:16:17 +0530 Subject: [PATCH 3/6] 998122: updated --- ej2-asp-core-mvc/maskedtextbox/adornments.md | 6 +++--- ej2-asp-core-mvc/numerictextbox/adornments.md | 6 +++--- ej2-asp-core-mvc/textarea/adornments.md | 6 +++--- ej2-asp-core-mvc/textbox/adornments.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/ej2-asp-core-mvc/maskedtextbox/adornments.md b/ej2-asp-core-mvc/maskedtextbox/adornments.md index 116100d935..2af239872c 100644 --- a/ej2-asp-core-mvc/maskedtextbox/adornments.md +++ b/ej2-asp-core-mvc/maskedtextbox/adornments.md @@ -24,10 +24,10 @@ Adornments are useful for: ## Add adornments to masked textbox -Use [prependTemplate](../api/maskedtextbox) and [appendTemplate](../api/maskedtextbox) 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. -- **Prepend (Prefix)**: Renders before the masked input. -- **Append (Suffix)**: Renders after the masked input. +- **PrependTemplate**: Renders before the masked input. +- **AppendTemplate**: Renders after the masked input. ## Basic implementation diff --git a/ej2-asp-core-mvc/numerictextbox/adornments.md b/ej2-asp-core-mvc/numerictextbox/adornments.md index 90cba559ae..de32a5f054 100644 --- a/ej2-asp-core-mvc/numerictextbox/adornments.md +++ b/ej2-asp-core-mvc/numerictextbox/adornments.md @@ -26,10 +26,10 @@ Adornments are useful for: ## Add adornments to numeric textbox -Adornments are added using the [prependTemplate](../api/numerictextbox) and [appendTemplate](../api/numerictextbox) 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. +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. -**Prepend Adornments (Prefix)**: Displayed at the beginning of the numeric textbox (left side for LTR layouts) -**Append Adornments (Suffix)**: Displayed at the end of the numeric textbox (right side for LTR layouts) +**PrependTemplate**: Renders before the numeric textbox. +**AppendTemplate**: Renders after the numeric textbox. ### Basic implementation diff --git a/ej2-asp-core-mvc/textarea/adornments.md b/ej2-asp-core-mvc/textarea/adornments.md index df57077d3c..7493a84fc1 100644 --- a/ej2-asp-core-mvc/textarea/adornments.md +++ b/ej2-asp-core-mvc/textarea/adornments.md @@ -25,10 +25,10 @@ Adornments are useful for: ## Add adornments to textarea -Adornments are added using the [prependTemplate](../api/textarea) and [appendTemplate](../api/textarea) properties. These properties accept HTML content that renders before and after the textarea respectively, enabling flexible customization without modifying the core textarea structure. +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. -**Prepend Adornments (Prefix)**: Displayed at the beginning of the textarea. -**Append Adornments (Suffix)**: Displayed at the end of the textarea. +**PrependTemplate**: Renders before the textarea. +**AppendTemplate**: Renders after the textarea. ## Configure flow and orientation diff --git a/ej2-asp-core-mvc/textbox/adornments.md b/ej2-asp-core-mvc/textbox/adornments.md index 169dde5226..5b4ee17a71 100644 --- a/ej2-asp-core-mvc/textbox/adornments.md +++ b/ej2-asp-core-mvc/textbox/adornments.md @@ -24,10 +24,10 @@ Adornments are useful for: ## Add adornments to textbox -Adornments are added using the [prependTemplate](../api/textbox) and [appendTemplate](../api/textbox) properties. These properties accept HTML content that renders before and after the input field respectively, enabling flexible customization without modifying the core textbox structure. +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. -**Prepend Adornments**: Displayed at the beginning of the textbox. -**Append Adornments**: Displayed at the end of the textbox. +**PrependTemplate**: Renders before the textbox. +**AppendTemplate**: Renders after the textbox. ### Basic implementation From 727433f0fa6766e15db6c0c72f4f5736327d3ccc Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 15 Dec 2025 11:51:02 +0530 Subject: [PATCH 4/6] 998122: Implemented suggested changes --- ej2-asp-core-mvc/maskedtextbox/adornments.md | 24 +++++------ ej2-asp-core-mvc/numerictextbox/adornments.md | 26 +++++------- ej2-asp-core-mvc/textarea/adornments.md | 41 +++++++++---------- ej2-asp-core-mvc/textbox/adornments.md | 22 ++++++---- ej2-asp-core-toc.html | 8 ++-- ej2-asp-mvc-toc.html | 8 ++-- 6 files changed, 64 insertions(+), 65 deletions(-) diff --git a/ej2-asp-core-mvc/maskedtextbox/adornments.md b/ej2-asp-core-mvc/maskedtextbox/adornments.md index 2af239872c..0c37aa6a51 100644 --- a/ej2-asp-core-mvc/maskedtextbox/adornments.md +++ b/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" %} diff --git a/ej2-asp-core-mvc/numerictextbox/adornments.md b/ej2-asp-core-mvc/numerictextbox/adornments.md index de32a5f054..e880bdfd7a 100644 --- a/ej2-asp-core-mvc/numerictextbox/adornments.md +++ b/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" %} diff --git a/ej2-asp-core-mvc/textarea/adornments.md b/ej2-asp-core-mvc/textarea/adornments.md index 7493a84fc1..bc78584be3 100644 --- a/ej2-asp-core-mvc/textarea/adornments.md +++ b/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" %} diff --git a/ej2-asp-core-mvc/textbox/adornments.md b/ej2-asp-core-mvc/textbox/adornments.md index 5b4ee17a71..f8c3cfa432 100644 --- a/ej2-asp-core-mvc/textbox/adornments.md +++ b/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" %} diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 37a97ff28a..64902153a8 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1718,9 +1718,9 @@
                • Getting Started
                • Mask Configuration
                  • +
                • Adornments
                • Accessibility
                • Style and Appearance
                  • -
                • Adornments
                • How To
                  • Perform custom validation using FormValidator
                    • @@ -1850,10 +1850,10 @@
                    • Getting Started
                    • Number Formats
                      • +
                    • Adornments
                    • Globalization
                    • Accessibility
                    • Style and Appearance
                      • -
                    • Adornments
                    • How To
                      • Customize the UI appearance of the control
                        • @@ -2659,9 +2659,9 @@
                      • Sizing
                      • Validation
                      • Multiline
                        • +
                      • Adornments
                      • Accessibility
                      • Style and Appearance
                        • -
                      • Adornments
                      • How To
                        • Set the Rounded Corner
                          • @@ -2704,8 +2704,8 @@
                        • Resize
                        • Maximum Length
                        • Form Support
                          • -
                        • Style and Appearance
                        • Adornments
                          • +
                        • Style and Appearance
                        • Events
                        • Methods
                        • diff --git a/ej2-asp-mvc-toc.html b/ej2-asp-mvc-toc.html index ae8445f477..c6cc1d5963 100644 --- a/ej2-asp-mvc-toc.html +++ b/ej2-asp-mvc-toc.html @@ -1672,9 +1672,9 @@
                          • Getting Started
                          • Mask Configuration
                            • +
                          • Adornments
                          • Accessibility
                          • Style and Appearance
                            • -
                          • Adornments
                          • How To
                            • Perform custom validation using FormValidator
                              • @@ -1804,10 +1804,10 @@
                              • Getting Started
                              • Number Formats
                                • +
                              • Adornments
                              • Globalization
                              • Accessibility
                              • Style and Appearance
                                • -
                              • Adornments
                              • How To
                                • Customize the UI appearance of the control
                                  • @@ -2586,9 +2586,9 @@
                                • Sizing
                                • Validation
                                • Multiline
                                  • +
                                • Adornments
                                • Accessibility
                                • Style and Appearance
                                  • -
                                • Adornments
                                • How To
                                  • Set the Rounded Corner
                                    • @@ -2631,8 +2631,8 @@
                                  • Resize
                                  • Maximum Length
                                  • Form Support
                                    • -
                                  • Style and Appearance
                                  • Adornments
                                    • +
                                  • Style and Appearance
                                  • Events
                                  • Methods
                                  • From 9919e6d5aed50921f0d0238e43b14c64af07623c Mon Sep 17 00:00:00 2001 From: Ashwini-SF5049 Date: Mon, 15 Dec 2025 14:03:08 +0530 Subject: [PATCH 5/6] 998122: Implemented suggested changes --- .../maskedtextbox/adornments/razor | 70 +++++++++++++++---- .../maskedtextbox/adornments/tagHelper | 54 +++++++++++++- .../numeric-textbox/adornments/razor | 66 ++++++++++++++++- .../numeric-textbox/adornments/tagHelper | 63 +++++++++++++++++ .../code-snippet/textarea/adornments/razor | 68 ++++++++++++++++++ .../textarea/adornments/tagHelper | 68 ++++++++++++++++++ .../code-snippet/textbox/adornments/razor | 54 +++++++++++++- .../code-snippet/textbox/adornments/tagHelper | 51 +++++++++++++- 8 files changed, 476 insertions(+), 18 deletions(-) diff --git a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor index f3b464d1af..fdaa3b17f5 100644 --- a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor @@ -1,20 +1,62 @@ @using Syncfusion.EJ2.Inputs +@using Syncfusion.EJ2.DropDowns @using EJ2MVCSampleBrowser.Models @using Syncfusion.EJ2 - @section ControlsSection { -
                                    -
                                    -
                                    - @Html.EJS().MaskedTextBox("maskTemplate") - .Mask("0000-000-000") - .PromptChar("#") - .Placeholder("Enter phone number") - .FloatLabelType(FloatLabelType.Auto) - .PrependTemplate("") - .AppendTemplate("") - .Render() -
                                    +
                                    +
                                    +
                                    + @Html.EJS().MaskedTextBox("maskTemplate").Mask("0000-000-000").PromptChar("#").Placeholder("Enter phone number").FloatLabelType(FloatLabelType.Auto).PrependTemplate("").AppendTemplate("").Render()
                                    -} \ No newline at end of file +} + +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper index 2cb77ea837..cf05ec3ad6 100644 --- a/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper @@ -13,4 +13,56 @@
                                    -} \ No newline at end of file +} +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor index 37b793b2b8..c24b24707c 100644 --- a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor @@ -61,4 +61,68 @@ }); } } - \ No newline at end of file + + +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper index ee737bbf5d..cd2b452142 100644 --- a/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper @@ -25,6 +25,69 @@ } +@*custom code start*@ + +@*custom code end*@ @section PreScripts { + +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper index 5828623a33..028aee7928 100644 --- a/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper @@ -36,6 +36,74 @@ } + +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file + + +@*custom code start*@ + +@*custom code end*@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper b/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper index 12bbbb816c..2c4202c9d3 100644 --- a/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper @@ -25,7 +25,56 @@ } - +@*custom code start*@ + +@*custom code end*@ @section PreScripts {