998122: Including Adronments feature into UG documentation

ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/adornments.cs

@@ -0,0 +1,4 @@
+public ActionResult Index()
+{
+    return View();
+}

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 {
+    <div class="control-section">
+    <div class="col-lg-12 control-section">
+        <div class="content-wrapper mask-row">
+                @Html.EJS().MaskedTextBox("maskTemplate").Mask("0000-000-000").PromptChar("#").Placeholder("Enter phone number").FloatLabelType(FloatLabelType.Auto).PrependTemplate("<span id=\'user\' class=\'e-icons e-user\' title=\'User\'></span><span class=\'e-input-separator\'></span>").AppendTemplate("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>").Render()
+        </div>
+    </div>
+}
+
+@*custom code start*@
+<style>
+    .content-wrapper {
+        width: 30%;
+        margin: 0 auto;
+        min-width: 250px;
+    }
+    .control-label {
+        padding: 24px 0px 10px 0px;
+        font-size: 12px;
+    }
+    .mask-row label.e-float-text,
+    .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .mask-row .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        margin-top: -2px;
+    }
+    .bootstrap5\.3 .mask-row .e-prepend-template,
+    .bootstrap5\.3-dark .mask-row .e-prepend-template,
+    .tailwind3 .mask-row .e-prepend-template,
+    .tailwind3-dark .mask-row .e-prepend-template,
+    .e-bigger.material3 .mask-row .e-prepend-template,
+    .e-bigger.material3-dark .mask-row .e-prepend-template {
+        padding-right: 0 !important;
+    }
+    .fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: -9px !important;
+    }
+    .e-bigger.material3 .mask-row .e-maskedtextbox,
+    .e-bigger.material3-dark .mask-row .e-maskedtextbox {
+        padding-left: 10px !important;
+    }
+    .e-bigger.material3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.material3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: -3px !important;
+        padding-left: 10px !important;
+    }
+    .e-bigger.bootstrap5\.3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.bootstrap5\.3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: 20px !important;
+    }
+    .e-bigger.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        margin-top: 0 !important;
+    }
+</style>
+@*custom code end*@

ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/tagHelper

@@ -0,0 +1,68 @@
+@page
+@using EJ2CoreSampleBrowser.Models
+@using Syncfusion.EJ2
+
+@section ControlsSection{
+    <div class="col-lg-12 control-section">
+        <div class="content-wrapper">
+            <div class="mask-row">
+                <ejs-maskedtextbox id="maskTemplate" mask="0000-000-000" promptChar="#" placeholder="Enter phone number" floatLabelType="Auto"
+                    prependTemplate="@Html.Raw("<span id='user' class='e-icons e-user' title='User'></span><span class='e-input-separator'></span>")"
+                    appendTemplate="@Html.Raw("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>")">
+                </ejs-maskedtextbox>
+            </div>
+        </div>
+    </div>
+}
+@*custom code start*@
+<style>
+    .content-wrapper {
+        width: 30%;
+        margin: 0 auto;
+        min-width: 250px;
+    }
+    .control-label {
+        padding: 10px 0px 5px 0px;
+        font-size: 12px;
+    }
+    .material .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .material-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .fabric .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .fabric-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .bootstrap .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .bootstrap-dark .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .bootstrap4 .e-prepend-mask .e-append-template .e-icons.e-send:before,
+    .highcontrast .e-prepend-mask .e-append-template .e-icons.e-send:before {
+        content: '\e816' !important;
+    }
+    .mask-row label.e-float-text,
+    .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .mask-row .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        margin-top: -2px;
+    }
+    .bootstrap5\.3 .mask-row .e-prepend-template,
+    .bootstrap5\.3-dark .mask-row .e-prepend-template,
+    .tailwind3 .mask-row .e-prepend-template,
+    .tailwind3-dark .mask-row .e-prepend-template {
+        padding-right: 0 !important;
+    }
+    .fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: -8px !important;
+    }
+    .e-bigger.material3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.material3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: -3px !important;
+    }
+    .e-bigger.bootstrap5\.3 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.bootstrap5\.3-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        top: 20px !important;
+    }
+    .e-bigger.fluent2 .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.fluent2-dark .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom,
+    .e-bigger.fluent2-highcontrast .mask-row .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid~label.e-float-text.e-label-bottom {
+        margin-top: 0 !important;
+    }
+</style>
+@*custom code end*@

ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/adornments.cs

@@ -0,0 +1,4 @@
+public ActionResult Index()
+{
+    return View();
+}

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 {
+    <div class="col-lg-12 control-section">
+        <div class="content-wrapper">
+            <div class="row custom-margin e-prependtemplate">
+                @Html.EJS().NumericTextBox("prepend").Value(1).Placeholder("Enter the price").FloatLabelType(FloatLabelType.Auto).PrependTemplate("<span id=\'menu\' class=\'e-icons e-menu\' title=\'Menu\'></span><span class=\'e-input-separator\'></span><span id=\'search\' class=\'e-icons e-search\' title=\'Search\'></span><span class=\'e-input-separator\'></span>").Created("onPrependCreated").Change("onPriceChange").Render()
+            </div>
+            <div class="row custom-margin e-appendtemplate">
+                @Html.EJS().NumericTextBox("append").Value(5).Placeholder("Enter the kg").FloatLabelType(FloatLabelType.Auto).AppendTemplate("<span>kg</span>").Change("onKgChange").Render()
+            </div>
+            <div class="row custom-margin custom-margin-row e-icontemplate">
+                @Html.EJS().NumericTextBox("icontemplate").Value(10).Placeholder("Enter the Number").FloatLabelType(FloatLabelType.Auto).ShowSpinButton(false).Created("onIconTemplateCreated").PrependTemplate("<span id='reset' class='e-icons e-reset' title='Reset'></span><span class='e-input-separator'></span>").AppendTemplate("<span class='e-input-separator'></span><span id='subract' class='e-icons e-horizontal-line'></span><span class='e-input-separator'></span><span id='plus' class='e-icons e-plus'></span>").Render()
+            </div>
+        </div>
+    </div>
+}
+
+<script type="text/javascript">
+    function onPrependCreated() {
+        var prefixLabel = new ej.dropdowns.DropDownList({width: '60px'});
+        prefixLabel.appendTo('#select');
+    }
+    function onPriceChange() {
+        var prependNumeric = document.getElementById("prepend").ej2_instances[0];
+        var appendNumeric = document.getElementById("append").ej2_instances[0];
+        appendNumeric.value = prependNumeric.value * 5;
+        appendNumeric.dataBind();
+    }
+    function onKgChange() {
+        var prependNumeric = document.getElementById("prepend").ej2_instances[0];
+        var appendNumeric = document.getElementById("append").ej2_instances[0];
+        prependNumeric.value = appendNumeric.value / 5;
+        prependNumeric.dataBind();
+    }
+    function onIconTemplateCreated() {
+        var resetSpan = document.querySelector('#reset');
+        if (resetSpan) {
+            resetSpan.addEventListener('click', function() {
+                var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
+                iconNumeric.value = 0;
+                iconNumeric.dataBind();
+            });
+        }
+        var subractSpan = document.querySelector('#subract');
+        if (subractSpan) {
+            subractSpan.addEventListener('click', function() {
+                var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
+                iconNumeric.value = iconNumeric.value - 1;
+                iconNumeric.dataBind();
+            });
+        }
+        var plusSpan = document.querySelector('#plus');
+        if (plusSpan) {
+            plusSpan.addEventListener('click', function() {
+                var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
+                iconNumeric.value = iconNumeric.value + 1;
+                iconNumeric.dataBind();
+            });
+        }
+    }
+</script>
+
+@*custom code start*@
+<style>
+    .content-wrapper {
+        width: 35%;
+        margin: 0 auto;
+        min-width: 250px;
+    }
+    .custom-margin {
+        margin: 25px 0;
+    }
+    .e-icons.e-search {
+        background-color: rgba(0, 0, 0, 0) !important;
+    }
+    .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
+        background-color: rgba(0,0,0,0) !important;
+    }
+    .bootstrap5\.3 .e-icontemplate .e-prepend-template,
+    .bootstrap5\.3 .e-prependtemplate .e-prepend-template,
+    .bootstrap5\.3-dark .e-icontemplate .e-prepend-template,
+    .bootstrap5\.3-dark .e-prependtemplate .e-prepend-template,
+    .tailwind3 .e-icontemplate .e-prepend-template,
+    .tailwind3 .e-prependtemplate .e-prepend-template,
+    .tailwind3-dark .e-icontemplate .e-prepend-template,
+    .tailwind3-dark .e-prependtemplate .e-prepend-template {
+        padding-right: 0 !important;
+    }
+    .fluent2 .e-icontemplate .e-prepend-template,
+    .fluent2-dark .e-icontemplate .e-prepend-template,
+    .fluent2-highcontrast .e-icontemplate .e-prepend-template,
+    .fluent2 .e-prependtemplate .e-prepend-template,
+    .fluent2-dark .e-prependtemplate .e-prepend-template,
+    .fluent2-highcontrast .e-prependtemplate .e-prepend-template {
+        padding-left: 8px !important;
+    }
+    .fluent2 .e-appendtemplate .e-numerictextbox,
+    .fluent2-dark .e-appendtemplate .e-numerictextbox,
+    .fluent2-highcontrast .e-appendtemplate .e-numerictextbox {
+        padding-left: 8px !important;
+    }
+    .material3 .e-icontemplate .e-prepend-template,
+    .material3-dark .e-icontemplate .e-prepend-template,
+    .material3 .e-prependtemplate .e-prepend-template,
+    .material3-dark .e-prependtemplate .e-prepend-template {
+        padding-left: 0 !important;
+    }
+    .e-bigger.bootstrap5\.3 .row.custom-margin .e-append-template,
+    .e-bigger.bootstrap5\.3-dark .row.custom-margin .e-append-template {
+        padding: 7px !important;
+    }
+    .e-bigger.fluent2 .row.custom-margin .e-append-template,
+    .e-bigger.fluent2-dark .row.custom-margin .e-append-template,
+    .e-bigger.fluent2-highcontrast .row.custom-margin .e-append-template,
+    .e-bigger.tailwind3 .row.custom-margin .e-append-template,
+    .e-bigger.tailwind3-dark .row.custom-margin .e-append-template {
+        padding: 8px !important;
+    }
+    .e-icontemplate .e-icons.e-reset,
+    .e-icontemplate .e-icons.e-horizontal-line,
+    .e-icontemplate .e-icons.e-plus {
+        cursor: pointer;
+    }
+</style>
+@*custom code end*@