Contents
- Common
- Mask Configuration
- Validation
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 20249 minutes to read
This article describes the API migration process of MaskEdit component from Essential® JS 1 to Essential® JS 2.
Common
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>
|
Mask Configuration
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>
|
Validation
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); };
|