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>
65+
66+ @*custom code start*@
67+ <style>
68+ .content-wrapper {
69+ width: 35%;
70+ margin: 0 auto;
71+ min-width: 250px;
72+ }
73+ .custom-margin {
74+ margin: 25px 0;
75+ }
76+ .e-icons.e-search {
77+ background-color: rgba(0, 0, 0, 0) !important;
78+ }
79+ .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
80+ background-color: rgba(0,0,0,0) !important;
81+ }
82+ .bootstrap5\.3 .e-icontemplate .e-prepend-template,
83+ .bootstrap5\.3 .e-prependtemplate .e-prepend-template,
84+ .bootstrap5\.3-dark .e-icontemplate .e-prepend-template,
85+ .bootstrap5\.3-dark .e-prependtemplate .e-prepend-template,
86+ .tailwind3 .e-icontemplate .e-prepend-template,
87+ .tailwind3 .e-prependtemplate .e-prepend-template,
88+ .tailwind3-dark .e-icontemplate .e-prepend-template,
89+ .tailwind3-dark .e-prependtemplate .e-prepend-template {
90+ padding-right: 0 !important;
91+ }
92+ .fluent2 .e-icontemplate .e-prepend-template,
93+ .fluent2-dark .e-icontemplate .e-prepend-template,
94+ .fluent2-highcontrast .e-icontemplate .e-prepend-template,
95+ .fluent2 .e-prependtemplate .e-prepend-template,
96+ .fluent2-dark .e-prependtemplate .e-prepend-template,
97+ .fluent2-highcontrast .e-prependtemplate .e-prepend-template {
98+ padding-left: 8px !important;
99+ }
100+ .fluent2 .e-appendtemplate .e-numerictextbox,
101+ .fluent2-dark .e-appendtemplate .e-numerictextbox,
102+ .fluent2-highcontrast .e-appendtemplate .e-numerictextbox {
103+ padding-left: 8px !important;
104+ }
105+ .material3 .e-icontemplate .e-prepend-template,
106+ .material3-dark .e-icontemplate .e-prepend-template,
107+ .material3 .e-prependtemplate .e-prepend-template,
108+ .material3-dark .e-prependtemplate .e-prepend-template {
109+ padding-left: 0 !important;
110+ }
111+ .e-bigger.bootstrap5\.3 .row.custom-margin .e-append-template,
112+ .e-bigger.bootstrap5\.3-dark .row.custom-margin .e-append-template {
113+ padding: 7px !important;
114+ }
115+ .e-bigger.fluent2 .row.custom-margin .e-append-template,
116+ .e-bigger.fluent2-dark .row.custom-margin .e-append-template,
117+ .e-bigger.fluent2-highcontrast .row.custom-margin .e-append-template,
118+ .e-bigger.tailwind3 .row.custom-margin .e-append-template,
119+ .e-bigger.tailwind3-dark .row.custom-margin .e-append-template {
120+ padding: 8px !important;
121+ }
122+ .e-icontemplate .e-icons.e-reset,
123+ .e-icontemplate .e-icons.e-horizontal-line,
124+ .e-icontemplate .e-icons.e-plus {
125+ cursor: pointer;
126+ }
127+ </style>
128+ @*custom code end*@
0 commit comments