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,20 @@
+@using Syncfusion.EJ2.Inputs
+@using EJ2MVCSampleBrowser.Models
+@using Syncfusion.EJ2
+
+@section ControlsSection {
+    <div class="col-lg-8 control-section">
+        <div class="content-wrapper">
+            <div class="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>
+    </div>
+}

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

@@ -0,0 +1,16 @@
+@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>
+}

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,64 @@
+@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>

ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/tagHelper

@@ -0,0 +1,74 @@
+@page
+@using EJ2CoreSampleBrowser.Models
+@using Syncfusion.EJ2
+
+@section ControlsSection{
+    <div class="col-lg-12 control-section">
+        <div class="content-wrapper">
+            <div class="row custom-margin e-prependtemplate">
+                <ejs-numerictextbox id="prepend" value="1" placeholder="Enter the price" floatLabelType="Auto" created="onPrependCreated" change="onPriceChange" 
+                    prependTemplate="@Html.Raw("<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>")">
+                </ejs-numerictextbox>
+            </div>
+            <div class="row custom-margin e-appendtemplate">
+                <ejs-numerictextbox id="append" step="1" value="5" placeholder="Enter the kg" floatLabelType="Auto" change="onKgChange" 
+                    appendTemplate="@Html.Raw("<span>kg</span>")">
+                </ejs-numerictextbox>
+            </div>
+            <div class="row custom-margin custom-margin-row e-icontemplate">
+                <ejs-numerictextbox id="icontemplate" value="10" placeholder="Enter the Number" floatLabelType="Auto" created="onIconTemplateCreated" ShowSpinButton="false"
+                    prependTemplate="@Html.Raw("<span id='reset' class='e-icons e-reset' title='Reset'></span><span class='e-input-separator'></span>")" 
+                    appendTemplate="@Html.Raw("<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>")">
+                </ejs-numerictextbox>
+            </div>
+        </div>
+    </div>
+}
+
+
+@section PreScripts {
+    <script>
+        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>
+}

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

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

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<string> orientationData = new List<string>() { "Horizontal", "Vertical" };
+}
+@section ControlsSection {
+    <div class="col-lg-8 control-section multiline">
+        <div class="content-wrapper ador-textarea">
+            <div class="multiline-row">
+                @Html.EJS().TextArea("icontemplate").Placeholder("Add a comment").CssClass("e-outline").FloatLabelType(FloatLabelType.Auto).PrependTemplate("<span class='e-icons e-bold'></span><span class='e-input-separator'></span><span class='e-icons e-italic'></span><span class='e-input-separator'></span>").AppendTemplate("<span class='e-input-separator'></span><span class='e-icons e-save'></span><span class='e-input-separator'></span><span class='e-icons e-trash'></span>").Rows(5).Cols(500).ResizeMode(Resize.None).Render()
+            </div>
+        </div>
+    </div>
+
+    <div class="col-lg-4 property-section">
+        <table id="property" title="Properties" class="multiline-property">
+            <tr>
+                <td> Flow Direction </td>
+                <td>
+                    <div>
+                        @Html.EJS().DropDownList("flow-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onFlowChange").Render()
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <td> Orientation Direction </td>
+                <td>
+                    <div>
+                        @Html.EJS().DropDownList("orient-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onOrientChange").Render()
+                    </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+}
+
+<script type="text/javascript">
+    function onFlowChange(args) {
+        var textArea = document.getElementById('icontemplate').ej2_instances[0];
+        textArea.adornmentFlow = args.value;
+        textArea.appendTemplate = (args.value === 'Horizontal') ?
+            '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
+            '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
+        textArea.dataBind();
+    }
+    function onOrientChange(args) {
+        var textArea = document.getElementById('icontemplate').ej2_instances[0];
+        textArea.adornmentOrientation = args.value;
+        textArea.appendTemplate = (args.value === 'Horizontal') ?
+            '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
+            '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
+        textArea.dataBind();
+    }
+</script>

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

@@ -0,0 +1,57 @@
+@page
+@using EJ2CoreSampleBrowser.Models
+@using Syncfusion.EJ2
+
+@{
+     List<string> orientationData = new List<string>() { "Horizontal", "Vertical" };
+}
+
+@section ControlsSection{
+    <div class="col-lg-8 control-section multiline">
+        <div class="content-wrapper ador-textarea">
+            <div class="multiline-row">
+                <ejs-textarea id="icontemplate" floatLabelType="Auto" cssClass="e-outline" placeholder="Add a comment" rows="5" cols="500" resizeMode='None'
+                    appendTemplate="@Html.Raw("<span class='e-input-separator'></span><span class='e-icons e-save'></span><span class='e-input-separator'></span><span class='e-icons e-trash'></span>")" 
+                    prependTemplate="@Html.Raw("<span class='e-icons e-bold'></span><span class='e-input-separator'></span><span class='e-icons e-italic'></span><span class='e-input-separator'></span>")"></ejs-textarea>
+            </div>
+        </div>
+    </div>  
+
+    <div class="col-lg-4 property-section">
+        <table id="property" title="Properties" class="multiline-property">
+        <tr>
+            <td> Flow Direction </td>
+            <td>
+                <ejs-dropdownlist id="flow-orientation" dataSource="@orientationData" index="0" popupHeight="200px" change="onFlowChange">
+                </ejs-dropdownlist>
+            </td>
+        </tr>
+        <tr>
+            <td> Orientation Direction </td>
+            <td>
+                <ejs-dropdownlist id="orient-orientation" dataSource="@orientationData" index="0" popupHeight="200px" change="onOrientChange">
+                </ejs-dropdownlist>
+            </td>
+        </tr>
+        </table>
+    </div>
+}
+    <script>
+
+            function onFlowChange(args) {
+                var textArea = document.getElementById('icontemplate').ej2_instances[0];
+                textArea.adornmentFlow = args.value;
+                textArea.appendTemplate = (args.value === 'Horizontal') ?
+                    '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
+                    '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
+                textArea.dataBind();
+            }
+            function onOrientChange(args) {
+                var textArea = document.getElementById('icontemplate').ej2_instances[0];
+                textArea.adornmentOrientation = args.value;
+                textArea.appendTemplate = (args.value === 'Horizontal') ?
+                    '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>' :
+                    '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';
+                textArea.dataBind();
+            }
+    </script>

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

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

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 {
+    <div class="col-lg-12 control-section">
+        <div class="content-wrapper ador-textbox">
+            <div class="row">
+                @Html.EJS().TextBox("prepend").Placeholder("Enter your Name").CssClass("e-prepend-textbox").FloatLabelType(FloatLabelType.Auto).PrependTemplate("<span class=\'e-icons e-user\'></span><span class=\'e-input-separator\'></span>").Render()
+            </div>
+            <div class="row">
+                @Html.EJS().TextBox("append").Placeholder("Password").CssClass("e-eye-icon").FloatLabelType(FloatLabelType.Auto).AppendTemplate("<span class='e-input-separator'></span><span id='text-icon' class='e-icons e-eye'></span>").Created("onAppendCreated").Render()
+            </div>
+            <div class="row">
+                @Html.EJS().TextBox("iconTextbox").Placeholder("Enter the Mail Address").CssClass("e-icon-textbox").FloatLabelType(FloatLabelType.Auto).Created("onIconTemplateCreated").PrependTemplate("<span class='e-icons e-people'></span><span class='e-input-separator'></span>").AppendTemplate("<span>.com</span><span class='e-input-separator'></span><span id='delete-text' class='e-icons e-trash'></span>").Render()
+            </div>
+        </div>
+    </div>
+}
+
+<script type="text/javascript">
+    function onAppendCreated() {
+        var textIcon = document.querySelector('#text-icon');
+        if (textIcon) {
+            textIcon.addEventListener('click', function() {
+                var appendTextbox = document.getElementById("append").ej2_instances[0];
+                if (appendTextbox.type === 'text') {
+                    appendTextbox.type = 'Password';
+                    textIcon.className = 'e-icons e-eye-slash';
+                } else {
+                    appendTextbox.type = 'text';
+                    textIcon.className = 'e-icons e-eye';
+                }
+                appendTextbox.dataBind();
+            });
+        }
+    }
+    function onIconTemplateCreated() {
+        var deleteIcon = document.querySelector('#delete-text');
+        if (deleteIcon) {
+            deleteIcon.addEventListener('click', function() {
+                var iconTextbox = document.getElementById("iconTextbox").ej2_instances[0];
+                iconTextbox.value = '';
+                iconTextbox.dataBind();
+            });
+        }
+    }
+</script>