This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Adding custom class | Property: cssClass <EJ.MaskEdit id="mask" maskFormat="9999" cssClass="custom"></EJ.MaskEdit> |
Property: cssClass<MaskedTextBoxComponent id="mask" mask='9999' cssClass = "custom"></MaskedTextBoxComponent> |
Destroy editor | Not Applicable | Method: destroy<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; mask.destroy(); |
Disable the maskedit control | Method: disable <EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit> var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.disable(); |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; mask.enabled= false; |
Enable the maskedit control | Method: enable<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit> var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.enable(); |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; mask.enabled= true; |
Control state | Property: enabled<EJ.MaskEdit id="mask" maskFormat="0-0000" enabled={false}></EJ.MaskEdit> |
Property: enabled<MaskedTextBoxComponent id="mask" mask='00-000' enabled=false></MaskedTextBoxComponent> |
Persistence | Property: enablePersistence<EJ.MaskEdit id="mask" maskFormat="0000" enablePersistence={{true}}></EJ.MaskEdit> |
Property: enablePersistence<MaskedTextBoxComponent id="mask" mask='0000' enablePersistence=true></MaskedTextBoxComponent> |
Triggers when editor is focused in | Event: focusIn<EJ.MaskEdit id="mask" maskFormat="00-00" focusIn={this.focusIn}></EJ.MaskEdit> script focusIn: function() {} |
Event: focus<MaskedTextBoxComponent id="mask" mask='00-00' focus={this.onFocus.bind(this)}></MaskedTextBoxComponent> public onFocus() {} |
Triggers when editor is focused out | Event: focusOut<EJ.MaskEdit id="mask" maskFormat="0000" focusOut={this.focusOut}></EJ.MaskEdit> script focusOut: function() {} |
Event: blur<MaskedTextBoxComponent id="mask" mask='00-00' blur={this.onBlur.bind(this)}></MaskedTextBoxComponent> script public onBlur() {} |
Sets height | Property: height<EJ.MaskEdit id="mask" maskFormat="0000" height="30px"></EJ.MaskEdit> |
Can be achieved using, <MaskedTextBoxComponent id="mask" mask='0000' cssClass = "custom"></MaskedTextBoxComponent> Css .e-maskedtextbox.custom{ height: 30px } |
HTML Attributes | Property: htmlAttributes<EJ.MaskEdit id="mask" maskFormat="0000" htmlAttributes= {htmlAttr}></EJ.MaskEdit> script var htmlAttr = {name: "maskedtextbox"}; |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent> |
Specifies Input mode | Property: inputMode<EJ.MaskEdit id="mask" maskFormat="0000" inputMode="password"></EJ.MaskEdit> |
Can be achieved using<MaskedTextBoxComponent type="password" name="mask"></MaskedTextBoxComponent> |
Triggers on key press | Event: keyPress<EJ.MaskEdit id="mask" maskFormat="0000" keyPress={this.keyPress}></EJ.MaskEdit> script keyPress: function() {} |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> public onCreated(){ document.getElementById("mask").addEventListener('keypress',function(){}); } |
Triggers on key up | Event: keyUp<EJ.MaskEdit id="mask" maskFormat="0000" keyUp={this.keyUp}></EJ.MaskEdit> script keyUp: function() {} |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> public onCreated(){ document.getElementById("mask").addEventListener('keyup',function(){}); } |
Triggers on mouse out in maskedit control | Event: mouseOut<EJ.MaskEdit id="mask" maskFormat="0000-000" mouseOut={this.onMouseOut}></EJ.MaskEdit> script onMouseOut: function() {} |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> public onCreated(){ document.getElementById("mask").addEventListener('mouseout',function(){} ); } |
Triggers when mouse over in maskedit control | Event: mouseOver<EJ.MaskEdit id="mask" maskFormat="00-00" mouseOver={this.onMouseOver}></EJ.MaskEdit> script onMouseOver: function() {} |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> public onCreated(){ document.getElementById("mask").addEventListener('mouseover',function(){}); } |
Name of maskedit control | Property: name<EJ.MaskEdit id="mask" maskFormat="0000" name="pin"></EJ.MaskEdit> |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent> |
Triggers on keydown | Event: onKeyDown<EJ.MaskEdit id="mask" maskFormat="9999-9999" onKeyDown={this.onKeyDown}></EJ.MaskEdit> script onKeyDown: function() {} |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> public onCreated(){ document.getElementById("mask").addEventListener('keydown',function(){}); } |
Read only | Property: readOnly<EJ.MaskEdit id="mask" maskFormat="99-999" readOnly={true}></EJ.MaskEdit> |
Can be achieved by<MaskedTextBoxComponent mask='000-000-0000' enabled={false}></MaskedTextBoxComponent> CSS .e-mask{ background-image: none !important ; border-bottom-color: rgba(0, 0, 0, 0.42) !important ; } |
Right to left | Property: textAlign<EJ.MaskEdit id="mask" maskFormat="9999" textAlign="Right"></EJ.MaskEdit> |
Property: enableRtl<MaskedTextBoxComponent id="mask" mask='9999' enableRtl = true></MaskedTextBoxComponent> |
Sets width | Property: width<EJ.MaskEdit id="mask" maskFormat="0000" width="100px"></EJ.MaskEdit> |
Property: width<MaskedTextBoxComponent id="mask" mask='0000' width ="100px"></MaskedTextBoxComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers on value change | Event change<EJ.MaskEdit id="mask" maskFormat="00-00" change={this.onChange}></EJ.MaskEdit> script onChange: function() {} |
Event: change<MaskedTextBoxComponent id="mask" mask='00-00' change={this.onChange.bind(this)}></MaskedTextBoxComponent> public onChange() {} |
Clears maskedit text/value | Method: clear<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit> var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.clear(); |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000' value="1234"></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; mask.value= ""; |
Triggers on creation | Event: create<EJ.MaskEdit id="mask" maskFormat="00-00" create={this.onCreate}></EJ.MaskEdit> script onCreate: function() {} |
Event: created<MaskedTextBoxComponent id="mask" mask='00-00' created={this.onCreated.bind(this)}></MaskedTextBoxComponent> public onCreated() {} |
Custom Character | Property: customCharacter<EJ.MaskEdit id="mask" maskFormat="C-0000" customCharacter="#"></EJ.MaskEdit> |
Property: customCharacters<MaskedTextBoxComponent id="mask" mask='C-0000' customCharacters= {this.chars}></MaskedTextBoxComponent> public customCharacters: object = {C: '#'}; |
Triggers when maskedit control is destroyed | Event: destroy<EJ.MaskEdit id="mask" maskFormat="00-00" destroy={this.onDestroy}></EJ.MaskEdit> script onDestroy: function() {} |
Event: destroyed<MaskedTextBoxComponent id="mask" mask='00-00' destroyed={this.onDestroyed.bind(this)}></MaskedTextBoxComponent> public onDestroyed() {} |
Placeholder float type | Not Applicable | Property: floatLabelType<MaskedTextBoxComponent id="mask" mask='9,999' placeholder="Enter value" floatLabelType="Auto"></MaskedTextBoxComponent> |
Gets pure value of maskedit control | Method: get_StrippedValue<EJ.MaskEdit id="mask" maskFormat="0000" value={123}></EJ.MaskEdit> script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.get_StrippedValue(); |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; alert(mask.value); |
Get whole maskedit value | Method: get_UnstrippedValue<EJ.MaskEdit id="mask" maskFormat="00-00" value={1234}></EJ.MaskEdit> var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.get_UnstrippedValue(); |
Method: getMaskedValue script <MaskedTextBoxComponent id="mask" mask='00-00' value="1234"></MaskedTextBoxComponent> var mask = document.getElementById('mask').ej2_instances[0]; mask.getMaskedValue(); |
Hides prompt character on focus out | Property: hidePromptOnLeave<EJ.MaskEdit id="mask" maskFormat="aaaa" hidePromptOnLeave={true}></EJ.MaskEdit> |
Can be achieved by<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} focus={this.onfocus.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent> Script public onCreated(){ var maskObj = document.getElementById("mask"); maskObj.addEventListener('focusout',function(){ maskObj.ej2_instances[0].promptChar = " " })' } public onfocus(){ var maskObj = document.getElementById("mask").ej2_instances[0]; maskObj.promptChar= "_"; } |
Mask format | Property: maskFormat<EJ.MaskEdit id="mask" maskFormat="99,999"></EJ.MaskEdit> |
Property: mask<MaskedTextBoxComponent id="mask" mask='99,999'></MaskedTextBoxComponent> |
Prompt character | Not Applicable | Property: promptChar<MaskedTextBoxComponent id="mask" mask='0000' promptChar="#"></MaskedTextBoxComponent> |
Clear Button | Not Applicable | Property: showClearButton<MaskedTextBoxComponent id="mask" mask='aaaa' showClearButton=true></MaskedTextBoxComponent> |
Prompt character display | Property: showPromptChar<EJ.MaskEdit id="mask" maskFormat="$99-999" showPromptChar={false}></EJ.MaskEdit> |
Can be achieved using<MaskedTextBoxComponent id="mask" mask='0000' promptChar=" "></MaskedTextBoxComponent> |
Show rounded corner | Property: showRoundedCorner<EJ.MaskEdit id="mask" maskFormat="0000" showRoundedCorner={true}></EJ.MaskEdit> |
Can be achieved using<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask1" placeholder="Numeric TextBox" cssClass = "e-style" floatLabelType="Always"> </MaskedTextBoxComponent> CSS #mask1{ border: 2px solid grey; padding: 7px; border-radius: 10px; } .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before, .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after { background: none ; } |
Value of maskedit control | Property: value<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit> |
Property: value<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent> |
Displays hint on maskedit control | Property: watermarkText<EJ.MaskEdit id="mask" maskFormat="9999" watermarkText="Enter value"></EJ.MaskEdit> |
Property: placeholder<MaskedTextBoxComponent id="mask" mask='9999' placeholder="Enter value"></MaskedTextBoxComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Displays error until correct value is entered | Property: showError<EJ.MaskEdit id="mask" maskFormat="99-999" showError={true}></EJ.MaskEdit> |
MaskedTextBox by default shows error until the correct value is entered<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent> |
Validation message | Property: validationMessage<EJ.MaskEdit id="mask" maskFormat="0000" validationRules= {validationRules} validationMessage= {validationMessage}></EJ.MaskEdit> var validationRules = {required: {true}}; var validationMessage = {required: "Required value"}; |
Validation can be performed using Form Validation<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' /> let options: FormValidatorModel = { rules: { 'mask_value': { numberValue: [required, 'Enter valid mobile number'] } }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { document.querySelector("#masktextbox").appendChild(errorElement); } }; let formObject: FormValidator = new FormValidator('#form-element', options); HTML <form id="form-element" class="form-horizontal"> <div id='masktextbox'></div> </form> |
Validation Rules | Property: validationRules<EJ.MaskEdit id="mask" maskFormat="00-00" validationRules= {validationRules}></EJ.MaskEdit> var validationRules = {required: {true}}; |
Validation can be performed using Form Validation<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' /> let options: FormValidatorModel = { rules: { 'mask_value': { numberValue: [required, true] } }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { document.querySelector("#masktextbox").appendChild(errorElement); } }; let formObject: FormValidator = new FormValidator('#form-element', options); HTML <form id="form-element" class="form-horizontal"> <div id='masktextbox'></div> </form> |