Add TextBox Programmatically in ASP.NET Core TextBox control
14 Apr 2021 / 1 minute to read
Create a TypeScript file and import the Input modules
from ej2-inputs library as shown below.
Copied to clipboard
import{Input}from'@syncfusion/ej2-inputs';
Pass the HTML Input element as parameter to the createInput method.
You can also add the icons on the input by passing buttons property value with the class
name e-input-group-icon as parameter to the createInput method.
tagHelper
textbox.cs
Copied to clipboard
<divclass="control_wrapper accordion-control-section"><divid="input-container"></div></div><script>
ej.base.enableRipple(true);var element = document.createElement('input');
document.getElementById('input-container').appendChild(element);newej.inputs.Input.createInput({
element: element,
properties:{
placeholder:'Enter Name'}});var element2 = document.createElement('input');
document.getElementById('input-container').appendChild(element2);newej.inputs.Input.createInput({
element: element2,
buttons:['e-input-group-icon e-input-down'],
properties:{
placeholder:'Enter Value'}});// To get the all input fields and its container.var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.for(var i =0; i < inputElement.length; i++){
inputElement[i].addEventListener("focus",function(){this.parentNode.classList.add('e-input-focus')});
inputElement[i].addEventListener("blur",function(){this.parentNode.classList.remove('e-input-focus')});}// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.var inputIcon = document.querySelectorAll('.e-input-group-icon');for(var i =0; i < inputIcon.length; i++){
inputIcon[i].addEventListener('mousedown',function(){this.classList.add('e-input-btn-ripple');});
inputIcon[i].addEventListener('mouseup',function(){var element =this;setTimeout(function(){
element.classList.remove('e-input-btn-ripple');},500);});}</script><style>.e-input-group-icon:before{font-family: e-icons;}.e-input-group-icon.e-input-down:before{/* csslint allow: adjoining-classes */content:"";}</style>