Skip to content

Commit 3dff3ce

Browse files
Ashwini-SF5049Ashwini-SF5049
committed
998122: Including Adronments feature into UG documentation
1 parent 4b514d2 commit 3dff3ce

File tree

22 files changed

+650
-0
lines changed

22 files changed

+650
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Index()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/maskedtextbox/adornments/razor‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@using Syncfusion.EJ2.Inputs
2+
@using EJ2MVCSampleBrowser.Models
3+
@using Syncfusion.EJ2
4+
5+
@section ControlsSection {
6+
<div class="col-lg-8 control-section">
7+
<div class="content-wrapper">
8+
<div class="mask-row">
9+
@Html.EJS().MaskedTextBox("maskTemplate")
10+
.Mask("0000-000-000")
11+
.PromptChar("#")
12+
.Placeholder("Enter phone number")
13+
.FloatLabelType(FloatLabelType.Auto)
14+
.PrependTemplate("<span id='user' class='e-icons e-user' title='User'></span><span class='e-input-separator'></span>")
15+
.AppendTemplate("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>")
16+
.Render()
17+
</div>
18+
</div>
19+
</div>
20+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page
2+
@using EJ2CoreSampleBrowser.Models
3+
@using Syncfusion.EJ2
4+
5+
@section ControlsSection{
6+
<div class="col-lg-12 control-section">
7+
<div class="content-wrapper">
8+
<div class="mask-row">
9+
<ejs-maskedtextbox id="maskTemplate" mask="0000-000-000" promptChar="#" placeholder="Enter phone number" floatLabelType="Auto"
10+
prependTemplate="@Html.Raw("<span id='user' class='e-icons e-user' title='User'></span><span class='e-input-separator'></span>")"
11+
appendTemplate="@Html.Raw("<span class='e-input-separator'></span><span id='sendIcon' class='e-icons e-send'></span>")">
12+
</ejs-maskedtextbox>
13+
</div>
14+
</div>
15+
</div>
16+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Index()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/numeric-textbox/adornments/razor‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@using Syncfusion.EJ2.Inputs
2+
@using Syncfusion.EJ2.DropDowns
3+
@using EJ2MVCSampleBrowser.Models
4+
@using Syncfusion.EJ2
5+
@section ControlsSection {
6+
<div class="col-lg-12 control-section">
7+
<div class="content-wrapper">
8+
<div class="row custom-margin e-prependtemplate">
9+
@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()
10+
</div>
11+
<div class="row custom-margin e-appendtemplate">
12+
@Html.EJS().NumericTextBox("append").Value(5).Placeholder("Enter the kg").FloatLabelType(FloatLabelType.Auto).AppendTemplate("<span>kg</span>").Change("onKgChange").Render()
13+
</div>
14+
<div class="row custom-margin custom-margin-row e-icontemplate">
15+
@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()
16+
</div>
17+
</div>
18+
</div>
19+
}
20+
21+
<script type="text/javascript">
22+
function onPrependCreated() {
23+
var prefixLabel = new ej.dropdowns.DropDownList({width: '60px'});
24+
prefixLabel.appendTo('#select');
25+
}
26+
function onPriceChange() {
27+
var prependNumeric = document.getElementById("prepend").ej2_instances[0];
28+
var appendNumeric = document.getElementById("append").ej2_instances[0];
29+
appendNumeric.value = prependNumeric.value * 5;
30+
appendNumeric.dataBind();
31+
}
32+
function onKgChange() {
33+
var prependNumeric = document.getElementById("prepend").ej2_instances[0];
34+
var appendNumeric = document.getElementById("append").ej2_instances[0];
35+
prependNumeric.value = appendNumeric.value / 5;
36+
prependNumeric.dataBind();
37+
}
38+
function onIconTemplateCreated() {
39+
var resetSpan = document.querySelector('#reset');
40+
if (resetSpan) {
41+
resetSpan.addEventListener('click', function() {
42+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
43+
iconNumeric.value = 0;
44+
iconNumeric.dataBind();
45+
});
46+
}
47+
var subractSpan = document.querySelector('#subract');
48+
if (subractSpan) {
49+
subractSpan.addEventListener('click', function() {
50+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
51+
iconNumeric.value = iconNumeric.value - 1;
52+
iconNumeric.dataBind();
53+
});
54+
}
55+
var plusSpan = document.querySelector('#plus');
56+
if (plusSpan) {
57+
plusSpan.addEventListener('click', function() {
58+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
59+
iconNumeric.value = iconNumeric.value + 1;
60+
iconNumeric.dataBind();
61+
});
62+
}
63+
}
64+
</script>

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@page
2+
@using EJ2CoreSampleBrowser.Models
3+
@using Syncfusion.EJ2
4+
5+
@section ControlsSection{
6+
<div class="col-lg-12 control-section">
7+
<div class="content-wrapper">
8+
<div class="row custom-margin e-prependtemplate">
9+
<ejs-numerictextbox id="prepend" value="1" placeholder="Enter the price" floatLabelType="Auto" created="onPrependCreated" change="onPriceChange"
10+
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>")">
11+
</ejs-numerictextbox>
12+
</div>
13+
<div class="row custom-margin e-appendtemplate">
14+
<ejs-numerictextbox id="append" step="1" value="5" placeholder="Enter the kg" floatLabelType="Auto" change="onKgChange"
15+
appendTemplate="@Html.Raw("<span>kg</span>")">
16+
</ejs-numerictextbox>
17+
</div>
18+
<div class="row custom-margin custom-margin-row e-icontemplate">
19+
<ejs-numerictextbox id="icontemplate" value="10" placeholder="Enter the Number" floatLabelType="Auto" created="onIconTemplateCreated" ShowSpinButton="false"
20+
prependTemplate="@Html.Raw("<span id='reset' class='e-icons e-reset' title='Reset'></span><span class='e-input-separator'></span>")"
21+
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>")">
22+
</ejs-numerictextbox>
23+
</div>
24+
</div>
25+
</div>
26+
}
27+
28+
29+
@section PreScripts {
30+
<script>
31+
function onPrependCreated() {
32+
var prefixLabel = new ej.dropdowns.DropDownList({width: '60px'});
33+
prefixLabel.appendTo('#select');
34+
}
35+
function onPriceChange() {
36+
var prependNumeric = document.getElementById("prepend").ej2_instances[0];
37+
var appendNumeric = document.getElementById("append").ej2_instances[0];
38+
appendNumeric.value = prependNumeric.value * 5;
39+
appendNumeric.dataBind();
40+
}
41+
function onKgChange() {
42+
var prependNumeric = document.getElementById("prepend").ej2_instances[0];
43+
var appendNumeric = document.getElementById("append").ej2_instances[0];
44+
prependNumeric.value = appendNumeric.value / 5;
45+
prependNumeric.dataBind();
46+
}
47+
function onIconTemplateCreated() {
48+
var resetSpan = document.querySelector('#reset');
49+
if (resetSpan) {
50+
resetSpan.addEventListener('click', function() {
51+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
52+
iconNumeric.value = 0;
53+
iconNumeric.dataBind();
54+
});
55+
}
56+
var subractSpan = document.querySelector('#subract');
57+
if (subractSpan) {
58+
subractSpan.addEventListener('click', function() {
59+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
60+
iconNumeric.value = iconNumeric.value - 1;
61+
iconNumeric.dataBind();
62+
});
63+
}
64+
var plusSpan = document.querySelector('#plus');
65+
if (plusSpan) {
66+
plusSpan.addEventListener('click', function() {
67+
var iconNumeric = document.getElementById("icontemplate").ej2_instances[0];
68+
iconNumeric.value = iconNumeric.value + 1;
69+
iconNumeric.dataBind();
70+
});
71+
}
72+
}
73+
</script>
74+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Index()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/textarea/adornments/razor‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@using Syncfusion.EJ2.Inputs
2+
@using Syncfusion.EJ2.Buttons
3+
@using Syncfusion.EJ2.DropDowns
4+
@using EJ2MVCSampleBrowser.Models
5+
@using Syncfusion.EJ2
6+
@{
7+
List<string> orientationData = new List<string>() { "Horizontal", "Vertical" };
8+
}
9+
@section ControlsSection {
10+
<div class="col-lg-8 control-section multiline">
11+
<div class="content-wrapper ador-textarea">
12+
<div class="multiline-row">
13+
@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()
14+
</div>
15+
</div>
16+
</div>
17+
18+
<div class="col-lg-4 property-section">
19+
<table id="property" title="Properties" class="multiline-property">
20+
<tr>
21+
<td> Flow Direction </td>
22+
<td>
23+
<div>
24+
@Html.EJS().DropDownList("flow-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onFlowChange").Render()
25+
</div>
26+
</td>
27+
</tr>
28+
<tr>
29+
<td> Orientation Direction </td>
30+
<td>
31+
<div>
32+
@Html.EJS().DropDownList("orient-orientation").PopupHeight("200px").Index(0).DataSource(orientationData).Change("onOrientChange").Render()
33+
</div>
34+
</td>
35+
</tr>
36+
</table>
37+
</div>
38+
}
39+
40+
<script type="text/javascript">
41+
function onFlowChange(args) {
42+
var textArea = document.getElementById('icontemplate').ej2_instances[0];
43+
textArea.adornmentFlow = args.value;
44+
textArea.appendTemplate = (args.value === 'Horizontal') ?
45+
'<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>' :
46+
'<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>';
47+
textArea.dataBind();
48+
}
49+
function onOrientChange(args) {
50+
var textArea = document.getElementById('icontemplate').ej2_instances[0];
51+
textArea.adornmentOrientation = args.value;
52+
textArea.appendTemplate = (args.value === 'Horizontal') ?
53+
'<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>' :
54+
'<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>';
55+
textArea.dataBind();
56+
}
57+
</script>

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@page
2+
@using EJ2CoreSampleBrowser.Models
3+
@using Syncfusion.EJ2
4+
5+
@{
6+
List<string> orientationData = new List<string>() { "Horizontal", "Vertical" };
7+
}
8+
9+
@section ControlsSection{
10+
<div class="col-lg-8 control-section multiline">
11+
<div class="content-wrapper ador-textarea">
12+
<div class="multiline-row">
13+
<ejs-textarea id="icontemplate" floatLabelType="Auto" cssClass="e-outline" placeholder="Add a comment" rows="5" cols="500" resizeMode='None'
14+
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>")"
15+
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>
16+
</div>
17+
</div>
18+
</div>
19+
20+
<div class="col-lg-4 property-section">
21+
<table id="property" title="Properties" class="multiline-property">
22+
<tr>
23+
<td> Flow Direction </td>
24+
<td>
25+
<ejs-dropdownlist id="flow-orientation" dataSource="@orientationData" index="0" popupHeight="200px" change="onFlowChange">
26+
</ejs-dropdownlist>
27+
</td>
28+
</tr>
29+
<tr>
30+
<td> Orientation Direction </td>
31+
<td>
32+
<ejs-dropdownlist id="orient-orientation" dataSource="@orientationData" index="0" popupHeight="200px" change="onOrientChange">
33+
</ejs-dropdownlist>
34+
</td>
35+
</tr>
36+
</table>
37+
</div>
38+
}
39+
<script>
40+
41+
function onFlowChange(args) {
42+
var textArea = document.getElementById('icontemplate').ej2_instances[0];
43+
textArea.adornmentFlow = args.value;
44+
textArea.appendTemplate = (args.value === 'Horizontal') ?
45+
'<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>' :
46+
'<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>';
47+
textArea.dataBind();
48+
}
49+
function onOrientChange(args) {
50+
var textArea = document.getElementById('icontemplate').ej2_instances[0];
51+
textArea.adornmentOrientation = args.value;
52+
textArea.appendTemplate = (args.value === 'Horizontal') ?
53+
'<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>' :
54+
'<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>';
55+
textArea.dataBind();
56+
}
57+
</script>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Index()
2+
{
3+
return View();
4+
}

0 commit comments

Comments
 (0)