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: css-class <ej-mask-edit id="maskedit" mask-format="9999" input-mode="@InputMode.Text" css-class="custom"/> |
Property: cssClass<ejs-maskedtextbox mask='9999' cssClass = "custom"></ejs-maskedtextbox> |
Destroy editor | Not Applicable | Method: destroy<ejs-maskedtextbox id="mask "mask='00-000'></ejs-maskedtextbox> Script var mask = document.getElementById('mask').ej2_instances[0] mask.destroy(); |
Disable the maskedit control | Method: disable <ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/> Script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.disable(); |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created= "onCreate"></ejs-maskedtextbox> Script function onCreate(){ var maskObj = this; maskObj.enabled= false; } |
Enable the maskedit control | Method: enable<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/> Script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.enable(); |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created="onCreate" ></ejs-maskedtextbox> Script function onCreate{ var maskObj =this; maskObj.enabled= true ;} |
Control state | Property: enabled<ej-mask-edit id="mask" mask-format="00-000" input-mode="@InputMode.Text" enabled=false/> |
Property: enabled<ejs-maskedtextbox id="mask" mask='00-000' enabled=false></ejs-maskedtextbox> |
Persistence | Property: enable-persistence<ej-mask-edit id="mask" mask-format="00-000" input-mode="@InputMode.Text" enable-persistence=true/> |
Property: enablePersistence<ejs-maskedtextbox id="mask" "mask='00-000' enablePersistence=true></ejs-maskedtextbox> |
Triggers when editor is focused in | Event: focus-in<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" focus-in="onFocus"/> Script function onFocus(){} |
Event: focus<ejs-maskedtextbox id="mask" focus="onFocus" mask='0000'></ejs-maskedtextbox> Script function onFocus(){} |
Triggers when editor is focused out | Event: focus-out<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" focus-out="onFocusOut"/> Script function onFocusOut(){} |
Event: blur<ejs-maskedtextbox id="mask" blur="onBlur" mask="000-000" value="1234"></ejs-maskedtextbox> Script function onBlur(){} |
Sets height | Property: height<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" height="30px"/> |
Can be achieved using, <ejs-maskedtextbox id="mask" cssClass = "custom" mask='0000'></ejs-maskedtextbox> Css .e-maskedtextbox.custom{ height: 30px } |
HTML Attributes | Property: html-attributes<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" html-attributes="htmlAttr"/> Script @{ Dictionary<string, object> htmlAttr = new Dictionary<string, object>(); htmlAttr.Add("name", "maskedtextbox"); } |
Can be achieved using<ejs-maskedtextbox id="mask" created="onCreate" mask="99-999" value="1234" ></ejs-maskedtextbox> Script function onCreate{ this.element.setAttribute("name", "textbox")} } |
Specifies Input mode | Property: input-mode<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Password"/> |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" type="password"></ejs-maskedtextbox> |
Triggers on key press | Event: key-press<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" key-press="onKeyPress"/> Script function onKeyPress(){} |
Can be achieved using<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox> Script function onCreate(args){ document.getElementById("mask").addEventListener("keypress", function () {} }); } |
Triggers on key up | Event: key-up<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" key-up="onKeyUp"/> Script function onKeyUp(){} |
Can be achieved using<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox> Script function onCreate(args){ document.getElementById("mask").addEventListener("keyup", function () {} }); } |
Triggers on mouse out in maskedit control | Event: mouse-out<ej-mask-edit id="mask" mask-format="000" input-mode="@InputMode.Text" mouse-out="mouseOut"/> Script function mouseOut(){} |
Can be achieved using<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox> Script function onCreate(args){ document.getElementById("mask").addEventListener("mouseout", function () {}}); |
Triggers when mouse over in maskedit control | Event: mouse-over<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" mouse-over="mouseOver"/> Script function mouseOver(){} |
Can be achieved using<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox> Script function onCreate(args){ document.getElementById("mask").addEventListener("mouseover", function () {} }); } |
Name of maskedit control | Property: name<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" name="pin"/> |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="99-999" value="1234" ></ejs-maskedtextbox> |
Triggers on keydown | Event: on-key-down<ej-mask-edit id="mask" mask-format="9999-9999" input-mode="@InputMode.Text" on-key-down="onKeyDown"/> Script function onKeyDown(){} |
Can be achieved using<ejs-maskedtextbox id="mask" mask="000-000" value="1234" created="onCreate"></ejs-maskedtextbox> Script function onCreate(args){ document.getElementById("mask").addEventListener("keydown", function () {} }); } |
Read only | Property: read-only<ej-mask-edit id="mask" mask-format="99-999" input-mode="@InputMode.Text" read-only=true/> |
Can be achieved using<ejs-maskedtextbox id="mask" enabled=false mask='0000'></ejs-maskedtextbox> CSS .e-mask{ background-image: none !important; border-bottom-color: rgba(0, 0, 0, 0.42) !important; } |
Right to left | Property: text-align<ej-mask-edit id="mask" mask-format="9999" input-mode="@InputMode.Text" text-align="Right"/> |
Property: enableRtl<ejs-maskedtextbox id="mask enableRtl = true mask='9999'></ejs-maskedtextbox> |
Sets width | Property: width<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" width="100px"/> |
Property: width<ejs-maskedtextbox id="mask" width="100px" mask='0000'></ejs-maskedtextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers on value change | Event change<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" change="onChange"/> Script function onChange(){} |
Event: change<ejs-maskedtextbox id="mask" change="onChange" mask='00-00'></ejs-maskedtextbox> Script function onChange(){} |
Clears maskedit text/value | Method: clear<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/> Script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.clear(); |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" created="onCreate" ></ejs-maskedtextbox> Script function onCreate{ var maskObj = this; maskObj.value= "" ;} |
Triggers on creation | Event: create<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" create="onCreate"/> Script function onCreate(){} |
Event: created<ejs-maskedtextbox id="mask" created="onCreated" mask='00-00'></ejs-maskedtextbox> Script function onCreated(){} |
Custom Character | Property: custom-character<ej-mask-edit id="mask" mask-format="C-0000" input-mode="@InputMode.Text" custom-character="#"/> |
Property: customCharacters<ejs-maskedtextbox id="mask" mask='C-0000' customCharacters= "ViewBag.cusObj"></ejs-maskedtextbox> Controller CustomCharacters customObj = new CustomCharacters(); customObj.C = "#"; ViewBag.cusObj = customObj; |
Triggers when maskedit control is destroyed | Event: destroy<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" destroy="onDestroy"/> Script function onDestroy(){} |
Event: destroyed<ejs-maskedtextbox id="mask" destroyed="onDestroy" mask='00-00'></ejs-maskedtextbox> Script function onDestroy(){} |
Placeholder float type | Not Applicable | Property: floatLabelType<ejs-maskedtextbox id="mask" placeholder="Enter value" floatLabelType="Auto" mask='9999'></ejs-maskedtextbox> |
Gets pure value of maskedit control | Method: get_StrippedValue<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="123"/> Script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.get_StrippedValue(); |
Can be achieved using<ejs-maskedtextbox id="mask" name="maskedtextbox" mask="000-000" value="1234" ></ejs-maskedtextbox> Script var maskObj = document.getElementById("mask").ej2_instances[0]; alert(maskObj.value); |
Get whole maskedit value | Method: get_UnstrippedValue<ej-mask-edit id="mask" mask-format="00-00" input-mode="@InputMode.Text" value="1234"/> Script var maskObj = $(“#mask”).data(“ejMaskEdit”); maskObj.get_UnstrippedValue(); |
Method: getMaskedValue<ejs-maskedtextbox id="mask" mask='00-00' value='1234' created="onCreate"></ejs-maskedtextbox> Script function onCreate(){ var mask = this } mask.getMaskedValue(); |
Hides prompt character on focus out | Property: hide-prompt-on-leave<ej-mask-edit id="mask" mask-format="aaaa" input-mode="@InputMode.Text" hide-prompt-on-leave=true/> |
Can be achieved by<ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always" value="1234" created="onCreate" focus="Focus"></ejs-maskedtextbox> Script function Focus(args) { this.promptChar = "_"; } function onCreate(args) { document.getElementById("mask1").addEventListener("focusout", function () { this.ej2_instances[0].promptChar = " "; }); } |
Mask format | Property: maskFormat<ej-mask-edit id="mask" mask-format="99,999" input-mode="@InputMode.Text"/> |
Property: mask<ejs-maskedtextbox id="mask" mask='99,999' ></ejs-maskedtextbox> |
Prompt character | Not Applicable | Property: promptChar<ejs-maskedtextbox id="mask" mask='0000' promptChar='#'></ejs-maskedtextbox> |
Clear Button | Not Applicable | Property: showClearButton<ejs-maskedtextbox id="mask" mask='0000' showClearButton=true></ejs-maskedtextbox> |
Prompt character display | Property: show-prompt-char<ej-mask-edit id="mask" mask-format="$ 99-999" input-mode="@InputMode.Text" show-prompt-char=false/> |
Can be achieved using<ejs-maskedtextbox id="mask" mask='0000' promptChar=' '></ejs-maskedtextbox> |
Show rounded corner | Property: show-rounded-corner<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" show-rounded-corner=true/> |
Can be achieved using<ejs-maskedtextbox id="mask" mask='0000' value='1234' cssClass="e-style" floatLabelType= "Always"></ejs-maskedtextbox> 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-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" value="1234"/> |
Property: value<ejs-maskedtextbox id="mask" mask='0000' value='1234'></ejs-maskedtextbox> |
Displays hint on maskedit control | Property: watermark-text<ej-mask-edit id="mask" mask-format="9999" input-mode="@InputMode.Text" watermark-text="Enter value"/> |
Property: placeholder<ejs-maskedtextbox id="mask" mask='9999' placeholder="Enter value"></ejs-maskedtextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Displays error until correct value is entered | Property: show-error<ej-mask-edit id="mask" mask-format="99-999" input-mode="@InputMode.Text" show-error=true/> |
MaskedTextBox by default shows error until the correct value is entered<ejs-maskedtextbox id="mask" mask='0000' value='1234'></ejs-maskedtextbox> |
Validation message | Property: validation-message<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" validation-rules="rule" validation-message="messages"/> Script @{ Dictionary<string, object> rule = new Dictionary<string, object>(); rule.Add("required",true); Dictionary<string, object> messages = new Dictionary<string, object>(); messages.Add("required", "Required value"); } |
Can be achieved using Form Validator<form id="form-element"> <ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always"></ejs-maskedtextbox> <form> Script var customFn = function (args) { var argsLength = args.element.ej2_instances[0].value.length; if (argsLength == 0) { return 0; } else return argsLength; }; } var options = { rules: { 'mask_value': { maxLength: [customFn, 'Enter valid mobile number'] }, } var formObject = new ej.inputs.FormValidator('#form-element', options); formObject.customPlacement = function (element, errorElement) { element.parentNode.parentNode.appendChild(errorElement); }; |
Validation Rules | Property: validation-rules<ej-mask-edit id="mask" mask-format="0000" input-mode="@InputMode.Text" validation-rules="rule"/> Script @{ Dictionary<string, object> rule = new Dictionary<string, object>(); rule.Add("required",true); } |
Can be achieved using Form Validator<form id="form-element"> <ejs-maskedtextbox id="mask1" name="mask_value" mask="000-000-0000" placeholder="Mobile Number" floatLabelType="Always"></ejs-maskedtextbox> <form> Script var options = { rules: { 'mask_value': { required: [true] }, } var formObject = new ej.inputs.FormValidator('#form-element', options); formObject.customPlacement = function (element, errorElement) { element.parentNode.parentNode.appendChild(errorElement); }; |