Search results

Migration from Essential JS 1

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: CssClass

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).InputMode(InputMode.Text).CssClass(“custom”)
Property: CssClass

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”)CssClass(“custom”).Render()
Destroy editor Not Applicable Method: destroy

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-000”).InputMode(InputMode.Text)

Script

var mask = document.getElementById(‘mask’).ej2_instances[0]
mask.destroy();
Disable the maskedit control Method: disable

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable();
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= false
Enable the maskedit control Method: enable

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable();
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= true
Control state Property: enabled

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-000”).InputMode(InputMode.Text).Enabled(false)
Property: Enabled

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”)Enabled(false).Render()
Persistence Property: EnablePersistence

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-000”).InputMode(InputMode.Text).EnablePersistence(true)
Property: EnablePersistence

@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”)EnablePersistence(true).Render()
Triggers when editor is focused in Event: FocusIn

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).ClientSideEvents(s => s.FocusIn(“onFocus”))

Script

function onFocus(""){}
Event: Focus

@Html.EJ().MaskedTextBox(“mask”).Mask(“0000”).InputMode(InputMode.Text).Focus(“onFocus”)
Script
function onFocus(){}
Triggers when editor is focused out Event: FocusOut

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.FocusOut(“onFocusOut”))

Script

function onFocusOut(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“focusout”, function () { });
Sets height Property: height

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Height(“30px”)
Can be achieved using,

@Html.EJ().MaskedTextBox(“mask”).Mask(“9999”).InputMode(InputMode.Text).CssClass(“custom”)

Css

.e-maskedtextbox.custom{
height: 30px
}
HTML Attributes Property: HtmlAttributes

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).HtmlAttributes(htmlAttr)

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add(“name”, “maskedtextbox”);
}
Can be achieved by
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“name”, “textbox”)
}
});
Specifies Input mode Property: InputMode

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Password)
Can be achieved by
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“type”, “password”)
}
});
Triggers on key press Event: KeyPress

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.KeyPress(“onKeyPress”))

Script

function onKeyPress(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“KeyPress”, function () { });
Triggers on key up Event: KeyUp

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.KeyUp(“onKeyUp”))

Script

function onKeyUp(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“keyup”, function () { });
Triggers on mouse out in maskedit control Event: MouseOut

@Html.EJ().MaskEdit(“mask”).MaskFormat(“000”).InputMode(InputMode.Text).ClientSideEvents(s => s.MouseOut(“onMouseOut”))

Script

function onMouseOut(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“mouseout”, function () { });
Triggers when mouse over in maskedit control Event: MouseOver

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.MouseOver(“onMouseOver”))

Script

function onMouseOver(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“mouseover”, function () { });
Name of maskedit control Property: name

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Name(“pin”)
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).setAttribute(“name”, “TextBox”)
}
});
Triggers on keydown Event: OnKeyDown

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999-9999”).InputMode(InputMode.Text).ClientSideEvents(s => s.OnKeyDown(“keyDown”))

Script

function keyDown(){}
Can be achieved using native event
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(“mask”).addEventListener(“keydown”, function () { });
Read only Property: ReadOnly

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).InputMode(InputMode.Text).ReadOnly(true)
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Enabled(false)Mask(“0000”).Render()
Css
.e-mask{
background-image: none !important;
border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}
Right to left Property: TextAlign

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).InputMode(InputMode.Text).TextAlign(“Right”)
Property: EnableRtl

@Html.EJS().MaskedTextBox(“mask”).Mask(“9999”).EnableRtl(true).Render()
Sets width Property: width

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).InputMode(InputMode.Text).Width(“100px”)
Property: Width

@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Width(“100px”).Render()

Mask Configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event Change

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Change(“onChange”))

Script

function onChange(){}
Event: Change

@Html.EJ().MaskedTextBox(“mask”).Mask(“00-00”).InputMode(InputMode.Text).Change(“onChange”)

Script

function onChange(){}
Clears maskedit text/value Method: clear

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear();
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Value(“1234”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.value = ""
Triggers on creation Event: Create

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Create(“onCreate”))

Script

function onCreate(){}
Event: Created

@Html.EJ().MaskedTextBox(“mask”).Mask(“00-00”).InputMode(InputMode.Text).Created(“onCreated”)

Script

function onCreated(){}
Custom Character Property: CustomCharacter

@Html.EJ().MaskEdit(“mask”).MaskFormat(“C-0000”).InputMode(InputMode.Text).CustomCharacter(”#“)
Property: CustomCharacters

@Html.EJ().MaskedTextBox(“mask”).Mask(“C-0000”).InputMode(InputMode.Text).CustomCharacters(ViewBag.cusObj)>

Controller

CustomCharacters customObj = new CustomCharacters();
customObj.C = ”#“;
ViewBag.cusObj = customObj;
Triggers when maskedit control is destroyed Event: Destroy

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).InputMode(InputMode.Text).ClientSideEvents(s => s.Destroy(“onDestroy”))

Script

function onDestroy(){}
Event: Destroyed

@Html.EJ().MaskedTextBox(“mask”).Mask(“00-00”).InputMode(InputMode.Text).Destroyed(“onDestroy”)

Script

function onDestroy(){}
Placeholder float type Not Applicable Property: floatLabelType

@Html.EJ().MaskedTextBox(“mask”).Mask(“9,999”).InputMode(InputMode.Text).Placeholder(“Enter value”).FloatLabelType(“Auto”)
Gets pure value of maskedit control Method: get_StrippedValue

@Html.EJ().MaskEdit(“mask”).Mask(“000”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue();
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“00-000”).Value(“1234”).Render()
Script
var maskObj = document.getElementById(“mask”).ej2_instances[0];
alert(maskObj.value)
Get whole maskedit value Method: get_UnstrippedValue

@Html.EJ().MaskEdit(“mask”).MaskFormat(“00-00”).Value(“1234”).InputMode(InputMode.Text)

Script

var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue();
Method: getMaskedValue

@Html.EJ().MaskedTextBox(“mask”).Mask(“00-000”).InputMode(InputMode.Text)

Script

var mask = document.getElementById(‘mask’).ej2_instances[0]
mask.getMaskedValue();
Hides prompt character on focus out Property: HidePromptOnLeave

@Html.EJ().MaskEdit(“mask”).MaskFormat(“aaaa”).InputMode(InputMode.Text).HidePromptOnLeave(true)
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Created(“onCreate”).Focus(“onFocus”).Render()
Script
function onCreate() {
var maskObj = this;
document.getElementById(“mask”).addEventListener(“focusout”, function () {
maskObj.promptChar = ” “;
});
}
function onFocus() {
this.promptChar = ”_“;
}
Mask format Property: maskFormat

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99,999”)
Property: mask

@Html.EJ().MaskedTextBox(“mask”).Mask(“99,999”).InputMode(InputMode.Text)
Prompt character Not Applicable Property: PromptChar

@Html.EJ().MaskedTextBox(“mask”).Mask(“99,999”).InputMode(InputMode.Text).PromptChar(”#“)
Clear Button Not Applicable Property: ShowClearButton

@Html.EJ().MaskedTextBox(“mask”).Mask(“99,999”).InputMode(InputMode.Text).ShowClearButton(true)
Prompt character display Property: ShowPromptChar

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).ShowPromptChar(false)
@Html.EJS().MaskedTextBox(“mask”).Mask(“99999”).PromptChar(”#“)
Show rounded corner Property: ShowRoundedCorner

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ShowRoundedCorner(true)
Can be achieved using
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Render()
*Css**
#mask {
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

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).Value(“1234”)
Property: value

@Html.EJ().MaskedTextBox(“mask”).Mask(“0000”).Value(“1234”).InputMode(InputMode.Text)
Displays hint on maskedit control Property: WatermarkText

@Html.EJ().MaskEdit(“mask”).MaskFormat(“9999”).WatermarkText(“Enter value”)
Property: Placeholder

@Html.EJ().MaskedTextBox(“mask”).Mask(“9999”).InputMode(InputMode.Text).Placeholder(“Enter value”)

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Displays error until correct value is entered Property: show-error

@Html.EJ().MaskEdit(“mask”).MaskFormat(“99-999”).ShowError(true)
MaskedTextBox by default shows error until correct value is entered
@Html.EJS().MaskedTextBox(“mask”).Mask(“0000”).Render()
Validation message Property: validation-message

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ValidationRules(rule => rule.AddRule(“required”, true)).ValidationMessage(msg => msg.AddMessage(“required”, “Required value”))
Validation in MaskedTextBox can be achieved by Form validation
<form id=“form-element”>
@Html.EJS().MaskedTextBox(“mask”).Mask(“000-000-0000”).Placeholder(“Mobile Number”).FloatLabelType(FloatLabelType.Always).Created(“onCreate”).Render()
</form>
Script
var options = {
rules: {
‘mask’: { required: [true, ‘Enter valid mobile number’] },
},
};
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function (element, errorElement) {
document.querySelector(“#mask”).parentNode.appendChild(errorElement);
};
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “mask”);
}
Validation Rules Property: validation-rules

@Html.EJ().MaskEdit(“mask”).MaskFormat(“0000”).ValidationRules(rule => rule.AddRule(“required”, true))
Not Applicable