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..fdaa3b17f5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor @@ -0,0 +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() +
+
+} + +@*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 new file mode 100644 index 0000000000..cf05ec3ad6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper @@ -0,0 +1,68 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")" + appendTemplate="@Html.Raw("")"> + +
+
+
+} +@*custom code start*@ + +@*custom code end*@ \ 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..c24b24707c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor @@ -0,0 +1,128 @@ +@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() +
+
+
+} + + + +@*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 new file mode 100644 index 0000000000..cd2b452142 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper @@ -0,0 +1,137 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")"> + +
+
+ kg")"> + +
+
+ ")" + appendTemplate="@Html.Raw("")"> + +
+
+
+} + +@*custom code start*@ + +@*custom code end*@ + +@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..7d1d6b3b96 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/razor @@ -0,0 +1,125 @@ +@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() +
+
+
+} + + + +@*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 new file mode 100644 index 0000000000..028aee7928 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textarea/adornments/tagHelper @@ -0,0 +1,125 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@{ + List orientationData = new List() { "Horizontal", "Vertical" }; +} + +@section ControlsSection{ +
+
+
+ ")" + prependTemplate="@Html.Raw("")"> +
+
+
+ +
+ + + + + + + + + +
Flow Direction + + +
Orientation Direction + + +
+
+} + +@*custom code start*@ + +@*custom code end*@ + \ 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..a4b58c3590 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/razor @@ -0,0 +1,100 @@ +@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() +
+
+
+} + + + +@*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 new file mode 100644 index 0000000000..2c4202c9d3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/textbox/adornments/tagHelper @@ -0,0 +1,112 @@ +@page +@using EJ2CoreSampleBrowser.Models +@using Syncfusion.EJ2 + +@section ControlsSection{ +
+
+
+ ")"> + +
+
+ ")"> + +
+
+ ")" + appendTemplate="@Html.Raw(".com")"> + +
+
+
+} + +@*custom code start*@ + +@*custom code end*@ + +@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..0c37aa6a51 --- /dev/null +++ b/ej2-asp-core-mvc/maskedtextbox/adornments.md @@ -0,0 +1,51 @@ +--- +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 + +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. + +## Common Use Cases + +- **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. + +## 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. + +- **prependTemplate**: Renders elements before the masked input. +- **appendTemplate**: Renders elements after the masked input. + +The following example demonstrates how to add adornments in the MaskedTextBox control. + +{% 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 0000000000..4a9f6c4bdb Binary files /dev/null and b/ej2-asp-core-mvc/maskedtextbox/images/adornments.png differ diff --git a/ej2-asp-core-mvc/numerictextbox/adornments.md b/ej2-asp-core-mvc/numerictextbox/adornments.md new file mode 100644 index 0000000000..e880bdfd7a --- /dev/null +++ b/ej2-asp-core-mvc/numerictextbox/adornments.md @@ -0,0 +1,51 @@ +--- +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 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. + +## Common Use Cases + +- **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. + +## Adding Adornments to NumericTextBox + +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 elements before the numeric textbox. +**appendTemplate**: Renders elements after the numeric textbox. + +The following example demonstrates how to add adornments in the NumericTextBox control. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/numeric-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 0000000000..f0d8da66ad Binary files /dev/null and b/ej2-asp-core-mvc/numerictextbox/images/adornments.png differ diff --git a/ej2-asp-core-mvc/textarea/adornments.md b/ej2-asp-core-mvc/textarea/adornments.md new file mode 100644 index 0000000000..bc78584be3 --- /dev/null +++ b/ej2-asp-core-mvc/textarea/adornments.md @@ -0,0 +1,63 @@ +--- +layout: post +title: Adornments in ##Platform_Name## TextArea control | Syncfusion +description: Learn here all about Adornments in Syncfusion ##Platform_Name## TextArea 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## TextArea control + +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. + +## Common Use Cases + +- **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. + +## Adding Adornments with Orientation to TextArea + +Use `prependTemplate` and `appendTemplate` to add custom HTML content before and after the TextArea. + +- **`prependTemplate`**: Renders elements before the textarea. + +- **`appendTemplate`**: Renders elements after 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. + +- **`adornmentFlow`**: Defines where adornments appear around the TextArea. + - **Horizontal**: Prepend on the left, append on the right. + - **Vertical**: Prepend above, append below. + +- **`adornmentOrientation`**: Defines how items inside each adornment are arranged. + - **Horizontal**: Items displayed in a row. + - **Vertical**: Items displayed in a column. + +The following example demonstrates how to add adornments with orientation in the TextArea control. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/textarea/adornments/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/textarea/adornments/razor %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![textarea](./images/textarea-adornments.png) diff --git a/ej2-asp-core-mvc/textarea/images/textarea-adornments.png b/ej2-asp-core-mvc/textarea/images/textarea-adornments.png new file mode 100644 index 0000000000..ebb64752e2 Binary files /dev/null and b/ej2-asp-core-mvc/textarea/images/textarea-adornments.png differ diff --git a/ej2-asp-core-mvc/textbox/adornments.md b/ej2-asp-core-mvc/textbox/adornments.md new file mode 100644 index 0000000000..f8c3cfa432 --- /dev/null +++ b/ej2-asp-core-mvc/textbox/adornments.md @@ -0,0 +1,61 @@ +--- +layout: post +title: Adornments in ##Platform_Name## Textbox control | Syncfusion +description: Learn here all about Adornments in Syncfusion ##Platform_Name## Textbox 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## TextBox control + +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 + +Adornments are useful for: +- **Visual Context**: Adding icons that indicate the expected input type (e.g., user icon for username, envelope icon for email) +- **Functional Enhancement**: Including action buttons such as password visibility toggles or clear buttons +- **Input Validation**: Displaying validation status icons or error indicators +- **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 + +## Common Use Cases + +- **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. + + +## 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" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/textbox/adornments/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/textbox/adornments/razor %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +Output be like the below. + +![textbox](./images/textbox-adornments.png) \ No newline at end of file diff --git a/ej2-asp-core-mvc/textbox/images/textbox-adornments.png b/ej2-asp-core-mvc/textbox/images/textbox-adornments.png new file mode 100644 index 0000000000..41de5e9780 Binary files /dev/null and b/ej2-asp-core-mvc/textbox/images/textbox-adornments.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index c70651d244..64902153a8 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1718,6 +1718,7 @@