NumericTextBox is used to display only numeric values. It has Spin buttons to increase or decrease the values in the Text Box.

CurrencyTextBox is used to display only currency values. It has Spin buttons to increase or decrease the values in the Text Box.

PercentageTextBox is used to display only percentage values. It has Spin buttons to increase or decrease the values in the Text Box.

{% highlight html %}

{% endhighlight %}

{% highlight html %}

{% endhighlight %}

• module:jQuery

• module:ej.core.js

• module:ej.globalize.js

• module:ej.editor.js

{:#members:currencysymbol}

Specifies the currency symbol of currency textbox, used when the user wants to overwrite the currency symbol commonly instead of the current culture symbol.

• Based on the culture

{% highlight html %}

<input id="currency" type="text" ej-currencytextbox [positivePattern]="pattern" [value]="currencyValue" [currencySymbol]="currencySymbol" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { pattern:string; currencyValue:number; currencySymbol:string; constructor(){ this.pattern = "$ n"; this.currencyValue = 100; this.currencySymbol = "€"; } }

{% endhighlight %}

{:#members:cssclass}

Sets the root CSS class for Editors which allow us to customize the appearance.

• ""

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [cssClass]="customCss" />

<input id="currency" type="text" ej-currencytextbox value="100" [cssClass]="customCss" />

<input id="percent" type="text" ej-percentagetextbox value="505" [cssClass]="customCss" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { customCss:string; constructor(){ this.customCss = "gradient-lime"; } }

{% endhighlight %}

{:#members:decimalplaces}

Specifies the number of digits that should be allowed after the decimal point.

• 0

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="value" [decimalPlaces]="decimalPlaces" />

<input id="currency" type="text" ej-currencytextbox [value]="value" [decimalPlaces]="decimalPlaces" />

<input id="percent" type="text" ej-percentagetextbox [value]="value" [decimalPlaces]="decimalPlaces" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { decimalPlaces:number; value:number; constructor(){ this.decimalPlaces = 2; this.value = 5; } }

{% endhighlight %}

{:#members:enabled}

Specifies the editor control state.

• true

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="1200" [enabled]="false" />

<input id="currency" type="text" ej-currencytextbox value="50" [enabled]="false" />

<input id="percent" type="text" ej-percentagetextbox value="100" [enabled]="false" />

{% endhighlight %}

{:#members:enablepersistence}

Specify the enablePersistence to editor to save current editor control value to browser cookies for state maintenance.

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [enablePersistence]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [enablePersistence]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [enablePersistence]="true" />

{% endhighlight %}

{:#members:enablertl}

Specifies the Right to Left Direction to editor.

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [enableRTL]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [enableRTL]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [enableRTL]="true" />

{% endhighlight %}

{:#members:enablestrictmode}

When enableStrictMode true it allows the value outside of the range also but it highlights the textbox with error class,otherwise it internally changed to the correct value.

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [enableStrictMode]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [enableStrictMode]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [enableStrictMode]="true" />

{% endhighlight %}

{:#members:groupsize}

Specifies the number of digits in each group to the editor.

• Based on the culture.

#Example

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="500" [groupSize]="groupSize" />

<input id="currency" type="text" ej-currencytextbox value="100" [groupSize]="groupSize" />

<input id="percent" type="text" ej-percentagetextbox value="505" [groupSize]="groupSize" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { groupSize:string; constructor(){ this.groupSize = "2"; } }

{% endhighlight %}

{:#members:groupseparator}

It provides the options to get the customized character to separate the digits. If not set, the separator defined by the current culture.

• Based on the culture

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [groupSeparator]="groupSeparator" />

<input id="currency" type="text" ej-currencytextbox value="55" [groupSeparator]="groupSeparator" />

<input id="percent" type="text" ej-percentagetextbox value="555" [groupSeparator]="groupSeparator" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { groupSeparator:string; constructor(){ this.groupSeparator = "-"; } }

{% endhighlight %}

{:#members:height}

Specifies the height of the editor.

• 30

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [height]="height" />

<input id="currency" type="text" ej-currencytextbox value="55" [height]="height" />

<input id="percent" type="text" ej-percentagetextbox value="555" [height]="height" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { height:string; constructor(){ this.height = "30px"; } }

{% endhighlight %}

{:#members:htmlattributes}

It allows to define the characteristics of the Editors control. It will helps to extend the capability of an HTML element.

• {}

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [htmlAttributes]="htmlAttributes" />

<input id="currency" type="text" ej-currencytextbox value="55" [htmlAttributes]="htmlAttributes" />

<input id="percent" type="text" ej-percentagetextbox value="555" [htmlAttributes]="htmlAttributes" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { htmlAttributes:Object; constructor(){ this.htmlAttributes = {disabled:"disabled"}; } }

{% endhighlight %}

{:#members:incrementstep}

The Editor value increment or decrement based an incrementStep value.

• 1

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [incrementStep]="incrementStep" />

<input id="currency" type="text" ej-currencytextbox value="55" [incrementStep]="incrementStep" />

<input id="percent" type="text" ej-percentagetextbox value="50" [incrementStep]="incrementStep" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { incrementStep:number; constructor(){ this.incrementStep = 2; } }

{% endhighlight %}

{:#members:locale}

Defines the localization culture for editor.

• en-US

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [locale]="locale" />

<input id="currency" type="text" ej-currencytextbox value="5000" [locale]="locale" />

<input id="percent" type="text" ej-percentagetextbox value="455" [locale]="locale" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { locale:string; constructor(){ this.locale = "de-DE"; } }

{% endhighlight %}

{:#members:maxvalue}

Specifies the maximum value of the editor.

• Number.MAX_VALUE

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="500" [maxValue]="maxValue" />

<input id="currency" type="text" ej-currencytextbox value="550" [maxValue]="maxValue" />

<input id="percent" type="text" ej-percentagetextbox value="50" [maxValue]="maxValue" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { maxValue:number; constructor(){ this.maxValue = 100; } }

{% endhighlight %}

{:#members:minvalue}

Specifies the minimum value of the editor.

• -(Number.MAX_VALUE) and 0 for Currency Textbox.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="55" [minValue]="minValue" />

<input id="currency" type="text" ej-currencytextbox value="5" [minValue]="minValue" />

<input id="percent" type="text" ej-percentagetextbox value="555" [minValue]="minValue" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { minValue:number; constructor(){ this.minValue = 50; } }

{% endhighlight %}

{:#members:name}

Specifies the name of the editor.

• Sets id as name if it is null.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [name]="numericName" />

<input id="currency" type="text" ej-currencytextbox value="55" [name]="currencyName" />

<input id="percent" type="text" ej-percentagetextbox value="500" [name]="percentName" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { numericName:string; currencyName:string; percentName:string; constructor(){ this.numericName = "numeric"; this.currencyName = "currency"; this.percentName = "percentage"; } }

{% endhighlight %}

{:#members:negativepattern}

Specifies the pattern for formatting positive values in editor.We have maintained some standard to define the negative pattern. you have to specify 'n' to place the digit in your pattern.ejTextbox allows you to define a currency or percent symbol where you want to place it.

• Based on the culture

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="numericValue" [negativePattern]="numericPattern" />

<input id="currency" type="text" ej-currencytextbox [value]="currencyValue" [negativePattern]="currencyPattern" />

<input id="percent" type="text" ej-percentagetextbox [value]="percentValue" [negativePattern]="percentPattern" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { numericPattern:string; currencyPattern:string; percentPattern:string; numericValue:number; currencyValue:number; percentValue:number; constructor(){ this.numericPattern = "( n)"; this.currencyPattern = "-% n"; this.percentPattern = "-n $"; this.numericValue = -5; this.currencyValue = -100; this.percentValue = -600; } }

{% endhighlight %}

{:#members:positivepattern}

Specifies the pattern for formatting positive values in editor.We have maintained some standard to define the positive pattern. you have to specify 'n' to place the digit in your pattern.ejTextbox allows you to define a currency or percent symbol where you want to place it.

N>Numeric Textbox support positivePattern for all the cultures. The default Value of positivePattern is “n”.

• Based on the culture

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="numericValue" [positivePattern]="numericPattern" />

<input id="currency" type="text" ej-currencytextbox [value]="currencyValue" [positivePattern]="currencyPattern" />

<input id="percent" type="text" ej-percentagetextbox [value]="percentValue" [positivePattern]="percentPattern" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { numericPattern:string; currencyPattern:string; percentPattern:string; numericValue:number; currencyValue:number; percentValue:number; constructor(){ this.numericPattern = "n kg"; this.currencyPattern = "% n"; this.percentPattern = "n $"; this.numericValue = 100; this.currencyValue = 100; this.percentValue = 505; } }

{% endhighlight %}

{:#members:readonly}

Toggles the readonly state of the editor. When the Editor is readonly it doesn't allow user interactions.

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [readOnly]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [readOnly]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [readOnly]="true" />

{% endhighlight %}

{:#members:showroundedcorner}

Specifies to Change the sharped edges into rounded corner for the Editor.

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [showRoundedCorner]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [showRoundedCorner]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [showRoundedCorner]="true" />

{% endhighlight %}

{:#members:showspinbutton}

Specifies whether the up and down spin buttons should be displayed in editor.

• true

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [showSpinButton]="false" />

<input id="currency" type="text" ej-currencytextbox value="55" [showSpinButton]="false" />

<input id="percent" type="text" ej-percentagetextbox value="580" [showSpinButton]="false" />

{% endhighlight %}

{:#members:validateontype}

Enables decimal separator position validation on type .

• false

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox value="5" [validateOnType]="true" />

<input id="currency" type="text" ej-currencytextbox value="5" [validateOnType]="true" />

<input id="percent" type="text" ej-percentagetextbox value="5" [validateOnType]="true" />

{% endhighlight %}

{:#members:validationmessage}

Set the jQuery validation error message in editor.

N> The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.

• null

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [validationRules]="validationRules" [validationMessage]="numericMessage" />

<input id="currency" type="text" ej-currencytextbox [validationRules]="validationRules" [validationMessage]="currencyMessage" />

<input id="percent" type="text" ej-percentagetextbox [validationRules]="validationRules" [validationMessage]="percentMessage" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { validationRules:object; numericMessage:object; currencyMessage:object; percentMessage:object; constructor(){ this.validationRules = {required:true}; this.numericMessage = { required: "Required Numeric value"}; this.currencyMessage = { required: "Required Currency value"}; this.percentMessage = { required: "Required Percentage value"}; } }

{% endhighlight %}

{:#members:validationrules}

Set the jQuery validation rules to the editor.

N> The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.

• null

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [validationRules]="validationRules" />

<input id="currency" type="text" ej-currencytextbox [validationRules]="validationRules" />

<input id="percent" type="text" ej-percentagetextbox [validationRules]="validationRules" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { validationRules:object; constructor(){ this.validationRules = {required:true}; } }

{% endhighlight %}

{:#members:value}

Specifies the value of the editor.

• null

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="numericValue" />

<input id="currency" type="text" ej-currencytextbox [value]="currencyValue" />

<input id="percent" type="text" ej-percentagetextbox [value]="percentValue" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { numericValue:number; currencyValue:number; percentValue:number; constructor(){ this.numericValue = 10; this.currencyValue = 10; this.percentValue = 10; } }

{% endhighlight %}

{:#members:watermarktext}

Specifies the watermark text to editor.

• Based on the culture.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [watermarkText]="numericText" />

<input id="currency" type="text" ej-currencytextbox [watermarkText]="currencyText" />

<input id="percent" type="text" ej-percentagetextbox [watermarkText]="percentText" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { numericText:string; currencyText:string; percentText:string; constructor(){ this.numericText = "Enter the value"; this.currencyText = "Enter the currency value"; this.percentText = "Enter the percentage"; } }

{% endhighlight %}

{:#members:width}

Specifies the width of the editor.

• 143

{% highlight html %}

{% endhighlight %}

{:#methods:destroy}

destroy the editor widgets all events are unbind automatically and bring the control to pre-init state.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="5" />

<input id="currency" type="text" ej-currencytextbox [value]="55" />

<input id="percent" type="text" ej-percentagetextbox [value]="555" />

{% endhighlight %}

{% highlight ts %}

// destroy the numericTextbox var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.destroy();

// destroy the currencyTextbox var currencyObj = $("#currency").data("ejCurrencyTextbox"); currencyObj.destroy();

// destroy the percentageTextbox var percentObj = $("#percentage").data("ejPercentageTextbox"); percentObj.destroy();

{% endhighlight %}

{:#methods:disable}

To disable the corresponding Editors

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" />

<input id="currency" type="text" ej-currencytextbox [value]="400" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" />

{% endhighlight %}

{% highlight ts %}

// disable the numericTextbox var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.disable();

// disable the currencyTextbox var currencyObj = $("#currency").data("ejCurrencyTextbox"); currencyObj.disable();

// disable the percentageTextbox var percentObj = $("#percentage").data("ejPercentageTextbox"); percentObj.disable();

{% endhighlight %}

{:#methods:enable}

To enable the corresponding Editors

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" />

<input id="currency" type="text" ej-currencytextbox [value]="400" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" />

{% endhighlight %}

{% highlight ts %}

// enable the numericTextbox var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.enable();

// enable the currencyTextbox var currencyObj = $("#currency").data("ejCurrencyTextbox"); currencyObj.enable();

// enable the percentageTextbox var percentObj = $("#percentage").data("ejPercentageTextbox"); percentObj.enable();

{% endhighlight %}

{:#methods:getvalue}

To get value from corresponding Editors

{:#methods:returns:}

number

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" />

<input id="currency" type="text" ej-currencytextbox [value]="400" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" />

{% endhighlight %}

{% highlight ts %}

// get value the numericTextbox var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.getValue();

// get value the currencyTextbox var currencyObj = $("#currency").data("ejCurrencyTextbox"); currencyObj.getValue();

// get value the percentageTextbox var percentObj = $("#percentage").data("ejPercentageTextbox"); percentObj.getValue();

{% endhighlight %}

{:#events:change}

Fires after Editor control value is changed.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" (change)="numericChange($event)" />

<input id="currency" type="text" ej-currencytextbox [value]="400" (change)="currencyChange($event)" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" (change)="percentChange($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } numericChange(e: any){ // Your code here } currencyChange(e: any){ // Your code here } percentChange(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:create}

Fires after Editor control is created.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" (create)="numericCreate($event)" />

<input id="currency" type="text" ej-currencytextbox [value]="400" (create)="currencyCreate($event)" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" (create)="percentCreate($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } numericCreate(e: any){ // Your code here } currencyCreate(e: any){ // Your code here } percentCreate(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:destroy}

Fires when the Editor is destroyed successfully.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" (destroy)="numericDestroy($event)" />

<input id="currency" type="text" ej-currencytextbox [value]="400" (destroy)="currencyDestroy($event)" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" (destroy)="percentDestroy($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } numericDestroy(e: any){ // Your code here } currencyDestroy(e: any){ // Your code here } percentDestroy(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:focusin}

Fires after Editor control is focused.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" (focusIn)="numericFocusIn($event)" />

<input id="currency" type="text" ej-currencytextbox [value]="400" (focusIn)="currencyFocusIn($event)" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" (focusIn)="percentFocusIn($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } numericFocusIn(e: any){ // Your code here } currencyFocusIn(e: any){ // Your code here } percentFocusIn(e: any){ // Your code here }

}

{% endhighlight %}

{:#events:focusout}

Fires after Editor control is loss the focus.

{% highlight html %}

<input id="numeric" type="text" ej-numerictextbox [value]="20" (focusOut)="numericFocusOut($event)" />

<input id="currency" type="text" ej-currencytextbox [value]="400" (focusOut)="currencyFocusOut($event)" />

<input id="percent" type="text" ej-percentagetextbox [value]="2000" (focusOut)="percentFocusOut($event)" />

{% endhighlight %}

{% highlight ts %}

export class AppComponent { constructor(){ } numericFocusOut(e: any){ // Your code here } currencyFocusOut(e: any){ // Your code here } percentFocusOut(e: any){ // Your code here }

}

{% endhighlight %}