Ignite UI™ API Documentation

ui.igPercentEditor

Overview
Options
Events
Methods
Theming

The igPercentEditor control allows you to provide full support for displaying and reading percentage values in user input. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The igPercentEditor control extends the functionality of the igNumericEditor. For more details on the igPercentEditor control’s API, refer to the base igNumericEditor control’s API documentation.

The following code snippet demonstrates how to initialize the igPercentEditor control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igNumericEditor control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

      <!doctype html>
      <html>
      <head>
           <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>
          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>
          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>
          <script type="text/javascript">
                $(function () {
                    $("#percentEditor").igPercentEditor({
                        width: 160
                    });
                });
          </script>
      </head>
      <body>
        <input id="percentEditor" /> 
      </body>
      </html>

Related Samples

allowNullValue
Inherited

Type:: bool
Default:: false

Gets/Sets whether the editor value can become null.
If that option is disabled, and editor has no value, then value is set to 0 (or minValue/maxValue).

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					allowNullValue : false
				});

				//Get
				var allowNullValue = $(".selector").igPercentEditor("option", "allowNullValue");

				//Set
				$(".selector").igPercentEditor("option", "allowNullValue", false);

buttonType
Inherited

Type:

enumeration

Default:

none
Gets visibility of the spin, clear and drop-down button. That option can be set only on initialization. Combinations like 'dropdown,spin' or 'spin,clear' are supported too. Note! This option can not be set runtime.
Members
- dropdown
- Type:string
- A button to open/close the list is located on the right side of the editor.
- clear
- Type:string
- A button to clear the value is located on the right side of the editor.
- spin
- Type:string
- Spin buttons are located on the right side of the editor.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						buttonType : "dropdown"
					});
					//Get
					var button = $(".selector").igPercentEditor("option", "buttonType");
					//Initialize multiple buttons
					$(".selector").igPercentEditor({
						buttonType : "dropdown,clear"
					});
				 
```
dataMode

Type:

enumeration

Default:

float
Defines the range that editor's value can accept. This is achieved by setting the minValue and maxValue editor's options, accordingly to the lowest and highest accepted values for the defined numeric mode.
The range for the specific type follows the numeric type standards, e.g. in .NET Framework floating-point types and integral types.
In addition, the maximum value that can be set to minDecimals and maxDecimals options can be 15, when editor is in 'double' mode and 7, when in 'float' mode.
Members
- double
- Type:string
- the Number object is used with the limits of a double and if the value is not set, then the null or Number.NaN is used depending on the option allowNullValue. Note: that is used as default.
- float
- Type:string
- the Number object is used with the limits of a float and if the value is not set, then the null or Number.NaN is used depending on the option allowNullValue.
- long
- Type:string
- the Number object is used with the limits of a signed long and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- ulong
- Type:string
- the Number object is used with the limits of an unsigned long and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- int
- Type:string
- the Number object is used with the limits of a signed int and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- uint
- Type:string
- the Number object is used with the limits of an unsigned int and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- short
- Type:string
- the Number object is used with the limits of a signed short and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- ushort
- Type:string
- the Number object is used with the limits of an unsigned short and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- sbyte
- Type:string
- the Number object is used with the limits of a signed byte and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
- byte
- Type:string
- the Number object is used with the limits of an unsigned byte and if the value is not set, then the null or 0 is used depending on the option allowNullValue.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					dataMode : "double"
				});
				//Get
				var dataMode = $(".selector").igPercentEditor("option", "dataMode");
				 
```
decimalSeparator
Inherited

Type:

string

Default:

null
Gets/Sets the character, which is used as decimal separator.
Note: this option has priority over possible regional settings.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Note: This option's value should not be equal to the value of groupSeparator or negativeSign options.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						decimalSeparator : ","
					});

					//Get
					var separator = $(".selector").igPercentEditor("option", "decimalSeparator");

					//Set
					$(".selector").igPercentEditor("option", "decimalSeparator", ",");
				 
```

disabled
Inherited

Type:: bool
Default:: false

Gets/Sets the disabled attribute for the input. If set to true the input is disabled, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is not submitted.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					disabled : false
				});

				//Get
				var disabled = $(".selector").igPercentEditor("option", "disabled");

				//Set
				$(".selector").igPercentEditor("option", "disabled", true);

displayFactor

Type:

number

Default:

100
Gets/Sets the factor which is used for the get and set of the "value" method.
On get the number (string) entered by the user is divided by that factor and on set the number (string) displayed in the editor is multiplied by that factor.
For example, if the factor is 100 and the "value" is set to 0.123, then the editor will show string "12.3".
Possible values: 1 or 100.
Note: this option has priority over possible regional settings.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					displayFactor : 100
				});

				//Get
				var factor = $(".selector").igPercentEditor("option", "displayFactor");

				//Set
				$(".selector").igPercentEditor("option", "displayFactor", 100);
				 
```

dropDownAnimationDuration
Inherited

Type:: number
Default:: 300

Gets/Sets show/hide drop-down list animation duration in milliseconds.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
				  dropDownAnimationDuration: 500
				});
				//Get
				var animationShowDuration= $(".selector").igPercentEditor("option", "dropDownAnimationDuration");
				//Set
				$(".selector").igPercentEditor("option", "dropDownAnimationDuration", 500);

dropDownAttachedToBody
Inherited

Type:

bool

Default:

false
Gets wheather the drop-down list element is attached to the body of the document, or to the editor container element.
If the option is set to false the editor will attach the drop-down list element to the editor container
If the option is set to true the editor will attach its drop-down list to as a child of the body.
Note! This option can not be set runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					dropDownAttachedToBody : true
				});

				//Get
				var attachedToBody = $(".selector").igPercentEditor("option", "dropDownAttachedToBody");
				 
```
dropDownOnReadOnly
Inherited

Type:

bool

Default:

false
Gets the ability to limit the editor to be used only as a dropdown list. When set to true the editor input is not editable.
Note! In case there are no list items - the editor will reamin readonly
Note! This option can not be set runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					dropDownOnReadOnly : true
				});

				//Get
				var readOnly = $(".selector").igPercentEditor("option", "dropDownOnReadOnly");
				 
```
dropDownOrientation
Inherited

Type:

enumeration

Default:

auto
Gets/Sets the drop-down list opening orientation when the list gets open. If the option is set to auto the editor has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.
Members
- auto
- Type:string
- If the option is set to auto the editor has priority to open the drop-down list bottom. If the space is not enough it tries to open the list top. If the space is not enough in both directions then the list gets opened at the bottom of the editor.
- bottom
- Type:string
- The drop-down list is opened at the bottom of the editor.
- top
- Type:string
- The drop-down list is opened at the top of the editor.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					dropDownOrientation : "top"
				});
				//Get
				var orientation = $(".selector").igPercentEditor("option", "dropDownOrientation");
				//Set
				$(".selector").igPercentEditor("option", "dropDownOrientation", "bottom");
				 
```
groups
Inherited

Type:

array

Default:

null

Elements Type:
(array of number objects) Gets/Sets the number of digits in the integer part of a number, which are divided into groups.
The "groupSeparator" is inserted between groups.
If the sum of all values in array is smaller than the length of integer part, then the last item in array is used for all following groups.
Count of groups starts from the decimal point (from right to left).
That option has effect only in display mode(no focus).
Note: The numbers in the array must be positive integers.
Note: This option has priority over possible regional settings.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						groups : [1, 2, 3]
					});

					//Get
					var groups = $(".selector").igPercentEditor("option", "groups");

					//Set
					$(".selector").igPercentEditor("option", "groups", [3, 3, 3]);
				 
```
groupSeparator
Inherited

Type:

string

Default:

null
Gets/Sets the character, which is used as separator for groups (like thousands).
That option has effect only in display mode(no focus).
Note: This option has priority over possible regional settings.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Note: This option's value should not be equal to the value of decimalSeparator or negativeSign options.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						groupSeparator : "."
					});

					//Get
					var groupSeparator = $(".selector").igPercentEditor("option", "groupSeparator");

					//Set
					$(".selector").igPercentEditor("option", "groupSeparator", ".");
				 
```
height
Inherited

Type:

enumeration

Default:

null
Gets/Sets the height of the control.
Members
- null
- Type:object
- will fit the editor inside its parent container, if no other heights are defined.
- string
- The height can be set in pixels (px) and percentage (%).
- number
- The height can be set as a number in pixels.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					height : 25
				});
				//Get
				var height = $(".selector").igPercentEditor("option", "height");
				//Set
				$(".selector").igPercentEditor("option", "height", 25);
				 
```
inputName
Inherited

Type:

string

Default:

null
Gets/Sets the name attribute of the value input. This input is used to sent the value to the server. In case the target element is input and it has name attribute, but the developer has set the inputName option, so this option overwrites the value input and removes the attribute from the element.
Code Sample
```
 
			//Initialize
				$(".selector").igPercentEditor({
				  inputName : "textField"
				});

				//Get
				var inputName = $(".selector").igPercentEditor("option", "inputName");

			//Set
			$(".selector").igPercentEditor("option", "inputName", "textField");
			 
```

isLimitedToListValues
Inherited

Type:: bool
Default:: false

Gets/Sets if the editor should only allow values from the list of items. Enabling this also causes spin actions to cycle through list items instead.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					isLimitedToListValues : true
				});

				//Get
				var limited = $(".selector").igPercentEditor("option", "isLimitedToListValues");

				//Set
				$(".selector").igPercentEditor("option", "isLimitedToListValues", false);

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igPercentEditor({
					language: "ja"
				});

				// Get
				var language = $(".selector").igPercentEditor("option", "language");

				// Set
				$(".selector").igPercentEditor("option", "language", "ja");

listItemHoverDuration
Inherited

Type:: number
Default:: 0

Gets/Sets the hover/unhover animation duration of a drop-down list item.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					listItemHoverDuration : 100
				});

				//Get
				var hoverDuration = $(".selector").igPercentEditor("option", "listItemHoverDuration");

				//Set
				$(".selector").igPercentEditor("option", "listItemHoverDuration", 100);

listItems
Inherited

Type:: array
Default:: null
Elements Type:

Gets/Sets list of items which are used as a source for the drop-down list.
Items in the list can be of type number.

Code Sample

 
				$(".selector").igPercentEditor({
					listItems : [
						10,
						20,
						30
					]
				});

				//Get
				var items = $(".selector").igPercentEditor("option", "listItems");

				//Set
				$(".selector").igPercentEditor("option", "listItems", [10, 20, 30]);

listWidth
Inherited

Type:: number
Default:: 0

Gets/Sets custom width of the drop-down list in pixels. If the value is equal to 0 or negative, then the width of editor is set as a drop-down width.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					listWidth : 200
				});

				//Get
				var width = $(".selector").igPercentEditor("option", "listWidth");

				//Set
				$(".selector").igPercentEditor("option", "listWidth", 200);

locale
Inherited

Type:: object
Default:: null

Set/Get the locale setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igPercentEditor({
					locale: {}
				});

				// Get
				var locale = $(".selector").igPercentEditor("option", "locale");

				// Set
				$(".selector").igPercentEditor("option", "locale", {});

maxDecimals
Inherited

Type:

number

Default:

null
Gets/Sets the maximum number of decimal places supported by the editor.
Note: this option has priority over possible regional settings.
Note: In case of min decimals value higher than max decimals - max decimals are equaled to min decimals property.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Note: This option supports values between 0 and 15, when dataMode is 'double' (default) and values between 0 and 7 in 'float' mode.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						maxDecimals: 10
					});

					//Get
					var maxDecimals = $(".selector").igPercentEditor("option", "maxDecimals");

					//Set
					$(".selector").igPercentEditor("option", "maxDecimals", 5);
				 
```

maxValue
Inherited

Type:: number
Default:: null

Gets/Sets the maximum value which can be entered in the editor by the end user.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					maxValue : 100
				});

				//Get
				var maxValue = $(".selector").igPercentEditor("option", "maxValue");

				//Set
				$(".selector").igPercentEditor("option", "maxValue", 100);

minDecimals
Inherited

Type:

number

Default:

null
Gets/Sets the minimum number of decimal places supported by the editor.
If number of digits in fractional part of number is less than the value of this option, then the "0" characters are used to fill missing digits.
Note: This option has priority over possible regional settings.
Note: In case of min decimals value higher than max decimals - max decimals are equaled to min decimals property.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Note: This option supports values between 0 and 15, when dataMode is 'double' (default) and values between 0 and 7 in 'float' mode.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
							minDecimals: 5
					});

					//Get
					var minDecimals = $(".selector").igPercentEditor("option", "minDecimals");

					//Set
					$(".selector").igPercentEditor("option", "minDecimals", 3);
				 
```

minValue
Inherited

Type:: number
Default:: null

Gets/Sets the minimum value which can be entered in the editor by the end user.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					minValue: 5
				});

				//Get
				var minValue = $(".selector").igPercentEditor("option", "minValue");

				//Set
				$(".selector").igPercentEditor("option", "minValue", 3);

negativePattern
Inherited

Type:

string

Default:

null
Gets/Sets the string, which is used as negative pattern. The "n" flag represents the value of number. The "-" and "()" flags are static part of pattern.
Note: This option has priority over possible regional settings.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						negativePattern : "-  n"
					});

					//Get
					var pattern = $(".selector").igPercentEditor("option", "negativePattern");

					//Set
					$(".selector").igPercentEditor("option", "negativePattern", "-  n");
							 
```
negativeSign
Inherited

Type:

string

Default:

null
Gets/Sets the character, which is used as negative sign.
Note: This option has priority over possible regional settings.
Note: Even if the default value is null - if internationalization file is provided and it contains default values for those properties the values are imlicitly set.
Note: This option's value should not be equal to the value of groupSeparator or decimalSeparator options.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						negativeSign : "-"
					});

					//Get
					var negativeSign = $(".selector").igPercentEditor("option", "negativeSign");

					//Set
					$(".selector").igPercentEditor("option", "negativeSign", "-");
				 
```

nullValue
Inherited

Type:: enumeration
Default:: null

Gets/Sets the representation of null value. In case of default the value for the input is set to null, which makes the input to hold an empty string.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					nullValue : null
				});
				//Get
				var nullValue = $(".selector").igPercentEditor("option", "nullValue");
				//Set
				$(".selector").igPercentEditor("option", "nullValue", null);

percentSymbol

Type:: string
Default:: null

Gets/Sets the symbol, which is used in display (no focus) state.
Note: this option has priority over possible regional settings.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					percentSymbol: "pc"
				});

				//Get
				var percentSymbol= $(".selector").igPercentEditor("option", "percentSymbol");

				//Set
				$(".selector").igPercentEditor("option", "percentSymbol", "pc");

placeHolder
Inherited

Type:: string
Default:: null

Gets/Sets the text which appears in the editor when it has no focus and the "value" is null or empty string.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					placeHolder : "Enter Value"
				});

				//Get
				var placeHolder = $(".selector").igPercentEditor("option", "placeHolder");

				//Set
				$(".selector").igPercentEditor("option", "placeHolder", "Enter Value");

positivePattern

Type:

string

Default:

null
Gets/Sets the pattern for positive numeric values, which is used in display (no focus) state.
If you use the "en-US" culture the default value for "positivePattern" will be "n$" where the "$" flag represents the "numericSymbol" and the "n" flag represents the value of the number.
Note: this option has priority over possible regional settings.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					positivePattern : "+ n"
				});

				//Get
				var pattern = $(".selector").igPercentEditor("option", "positivePattern");

				//Set
				$(".selector").igPercentEditor("option", "positivePattern", "+ n");
				 
```

preventSubmitOnEnter
Inherited

Type:: bool
Default:: false

Gets/Sets if the editor should prevent form submition when enter key is pressed.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
						preventSubmitOnEnter: true
				});

				//Get
				var preventSubmitOnEnter = $(".selector").igPercentEditor("option", "preventSubmitOnEnter");

				//Set
				$(".selector").igPercentEditor("option", "preventSubmitOnEnter", true);

readOnly
Inherited

Type:: bool
Default:: false

Gets/Sets the readonly attribute for the input. If set to true the input is readonly, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is submitted.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					readOnly : true
				});

				//Get
				var readOnly = $(".selector").igPercentEditor("option", "readOnly");

				//Set
				$(".selector").igPercentEditor("option", "readOnly", true);

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igPercentEditor("option", "regional");
				// Set
				$(".selector").igPercentEditor("option", "regional", "ja");

revertIfNotValid
Inherited

Type:: bool
Default:: true

Gets/Sets if the editor should revert it's value to the previously valid value in case the value on blur, or enter key is not valid. If the opiton is set to false, editor calls clear functionality.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					revertIfNotValid : false
				});

				//Get
				var revertIfNotValid = $(".selector").igPercentEditor("option", "revertIfNotValid");

				//Set
				$(".selector").igPercentEditor("option", "revertIfNotValid", false);

roundDecimals
Inherited

Type:

bool

Default:

true
Gets/Sets whether the last decimal place will be rounded, when the maxDecimal option is defined and applied.
For example if the initial editor value is set to 123.4567, maxDecimals option is set to 3 and roundDecimals is enabled,
then editor will round the value and will display it as 123.457. If roundDecimals is disabled then editor value will be truncated to 123.456.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					roundDecimals : false
				});

				//Get
				var roundDecimals = $(".selector").igPercentEditor("option", "roundDecimals");

				//Set
				$(".selector").igPercentEditor("option", "roundDecimals", false);
				 
```
scientificFormat
Inherited

Type:

enumeration

Default:

null
Gets/Sets support for scientific format.
If that option is set, then numeric value appears as a string with possible E-power flag. In edit mode the "E" or "e" character can be entered as well.
Notes: The "+" character is not supported in edit mode.
Members
- null
- Type:object
- scientific format is disabled.
- E
- Type:string
- scientific format is enabled and the "E" character is used.
- e
- Type:string
- scientific format is enabled and the "e" character is used.
- E+
- Type:string
- scientific format is enabled and the "E" character is used. The "E+" is used for positive values in display mode.
- e+
- Type:string
- scientific format is enabled and the "e" character is used. The "e+" is used for positive values in display mode.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						scientificFormat : "e"
					});
					//Get
					var scientificFormat = $(".selector").igPercentEditor("option", "scientificFormat");
					//Set
					$(".selector").igPercentEditor("option", "scientificFormat", "e+");
				 
```
selectionOnFocus
Inherited

Type:

enumeration

Default:

selectAll
Gets/Sets the action when the editor gets focused. The default value is selectAll.
Members
- selectAll
- Type:string
- Setting this option will select all the text into the editor when the edit mode gets enetered.
- atStart
- Type:string
- Setting this option will move the cursor at the begining the text into the editor when the edit mode gets enetered.
- atEnd
- Type:string
- Setting this option will move the cursor at the end the text into the editor when the edit mode gets enetered.
- browserDefault
- Type:string
- Setting this option won't do any extra logic, but proceed with the browser default behavior.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						selectionOnFocus: "atStart"
					});
					//Get
					var selectionOnFocus= $(".selector").igPercentEditor("option", "selectionOnFocus");
					//Set
					$(".selector").igPercentEditor("option", "selectionOnFocus", "selectAll");
					 
```
spinDelta

Type:

number

Default:

0.01
Gets/Sets the default delta-value which is used with "spin" buttonType or spinUp and spinDown methods to increment or decrement value in the editor. The value can not be negative. Non integer value is supported only for dataMode double and float.
Code Sample
```
 
			//Initialize
			$(".selector").igPercentEditor({
				spinDelta: 2
			});

			//Get
			var spinDelta= $(".selector").igPercentEditor("option", "spinDelta");

			//Set
			$(".selector").igPercentEditor("option", "spinDelta", 2);
			 
```
spinWrapAround
Inherited

Type:

bool

Default:

false
Gets/Set the ability of the editor to automatically set value in the editor to the opposite side of the limit, when the spin action reaches minimum or maximum limit.
This applies to minValue and maxValue or cycling through list items if isLimitedToListValues is enabled.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					spinWrapAround : true
				});

				//Get
				var spinAround = $(".selector").igPercentEditor("option", "spinWrapAround");

				//Set
				$(".selector").igPercentEditor("option", "spinWrapAround", true);
			 
```
suppressKeyboard
Inherited

Type:

bool

Default:

false
Gets/Sets whether the onscreen keyboard (if available on device) should be shown when the dropdown button is clicked/tapped. This option prevents initial focus or removes it when the drop button is clicked/tapped.
Note: The option does not perform device detection so its behavior is always active if enabled.
Note: When drop down is opened the only way to close it will be using the drop down button.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					suppressKeyboard : true
				});

				//Get
				var readOnly = $(".selector").igPercentEditor("option", "suppressKeyboard");

				//Set
				$(".selector").igPercentEditor("option", "suppressKeyboard", true);
				 
```

suppressNotifications
Inherited

Type:: bool
Default:: false

Disables/Enables default notifications for basic validation scenarios built in the editors such as required list selection, value wrapping around or spin limits.

Code Sample

 
				//Initialize
				$(".selector").igPercentEditor({
					suppressNotifications : true
				});

				//Get
				var suppressNotifications = $(".selector").igPercentEditor("option", "suppressNotifications");

				//Set
				$(".selector").igPercentEditor("option", "suppressNotifications", true);

tabIndex
Inherited

Type:: number
Default:: null

Gets/Sets tabIndex attribute for the editor input.

Code Sample

 
			  //Initialize
			  $('.selector').igPercentEditor({
				  tabIndex: 1
			  });

			  //Get
			  var tabIndex = $(".selector").igPercentEditor("option", "tabIndex");

			  //Set
			  $(".selector").igPercentEditor("option", "tabIndex", 1);

textAlign
Inherited

Type:

enumeration

Default:

right
Gets/Sets the horizontal alignment of the text in the editor.
Members
- left
- Type:string
- The text into the input gets aligned to the left.
- right
- Type:string
- The text into the input gets aligned to the right.
- center
- Type:string
- The text into the input gets aligned to the center.
Code Sample
```
 
					//Initialize
					$(".selector").igPercentEditor({
						textAlign : "center"
					});
					//Get
					var align = $(".selector").igPercentEditor("option", "textAlign");
					//Set
					$(".selector").igPercentEditor("option", "textAlign", "center");
				 
```

validatorOptions
Inherited

Type:: object
Default:: null

Gets/Sets options supported by the igValidator widget.
Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
while the corresponding options of the editor prevent values violating the defined rules from being entered.

Code Sample

 
					//Initialize
					$(".selector").igPercentEditor({
						validatorOptions : {
							successMessage: "Success",
									 required: true,
									 onchange: true,
							notificationOptions: { mode: "popover" }
						}
					});

					//Get
					var validateOptions = $(".selector").igPercentEditor("option", "validatorOptions");

					//Set
					$(".selector").igPercentEditor("option", "validatorOptions", {onblur: true, onchange: true});

value
Inherited

Type:: object
Default:: null

Gets/Sets value in editor. The effect of setting/getting that option depends on type of editor and on dataMode options for every type of editor.

Code Sample

 
			//Initialize
			$(".selector").igPercentEditor({
				value : 42
			});

			//Get
			var value = $(".selector").igPercentEditor("option", "value");

			//Set
			$(".selector").igPercentEditor("option", "value", 42);

visibleItemsCount
Inherited

Type:

number

Default:

5
Gets the number of the items to be shown at once when the drop-down list get opened.
Notes:
This option is overwritten if the number of list items is less than the set value. In that case the drop-down list displays all the items.
This option can not be set runtime.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					visibleItemsCount : 5
				});

				//Get
				var visibleItemsCount = $(".selector").igPercentEditor("option", "visibleItemsCount");
				 
```
width
Inherited

Type:

enumeration

Default:

null
Gets/Sets the width of the control.
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample
```
 
				//Initialize
				$(".selector").igPercentEditor({
					width : 200
				});
				//Get
				var width = $(".selector").igPercentEditor("option", "width");
				//Set
				$(".selector").igPercentEditor("option", "width", 200);
				 
```

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

blur
Inherited

Cancellable:

false

Event which is raised when input field of editor loses focus.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditorblur", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					blur: function (evt, ui) {
						...
					}
				});
				 
```
dropDownItemSelected
Inherited

Cancellable:

false

Event which is raised after an item in the drop down list is selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Use ui.item to obtain reference to the list item which is selected.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownitemselected", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownItemSelected: function (evt, ui) {
					...
					}
				});
				 
```
dropDownItemSelecting
Inherited

Cancellable:

true

Event which is raised when an item in the drop down list is being selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Use ui.item to obtain reference to the list item which is about to be selected.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownitemselecting", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownItemSelecting: function (evt, ui) {
					...
					}
				});
				 
```
dropDownListClosed
Inherited

Cancellable:

false

Event which is raised after the drop down is closed.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownlistclosed", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownListClosed: function (evt, ui) {
					...
					}
				});
				 
```
dropDownListClosing
Inherited

Cancellable:

true

Event which is raised when the drop down is closing.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownlistclosing", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownListClosing: function (evt, ui) {
					...
					}
				});
				 
```
dropDownListOpened
Inherited

Cancellable:

false

Event which is raised after the drop down is opened.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownlistopened", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownListOpened: function (evt, ui) {
					...
					}
				});
				 
```
dropDownListOpening
Inherited

Cancellable:

true

Event which is raised when the drop down is opening.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.editorInput to obtain reference to the editable input
Use ui.list to obtain reference to the list contaier.
Code Sample
```
 
				$(".selector").on("igpercenteditordropdownlistopening", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					dropDownListOpening: function (evt, ui) {
					...
					}
				});
				 
```
focus
Inherited

Cancellable:

false

Event which is raised when input field of editor gets focus.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditorfocus", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					focus: function (evt, ui) {
						...
					}
				});
				 
```
keydown
Inherited

Cancellable:

true

Event which is raised on keydown event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igpercenteditorkeydown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					keydown: function (evt, ui) {
						...
					}
				});
				 
```
keypress
Inherited

Cancellable:

true

Event which is raised on keypress event.
Return false in order to cancel key action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igpercenteditorkeypress", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					keypress: function (evt, ui) {
						...
					}
				});
				 
```
keyup
Inherited

Cancellable:

false

Event which is raised on keyup event.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.key to obtain value of keyCode.
Code Sample
```
 
				$(".selector").on("igpercenteditorkeyup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					keyup: function (evt, ui) {
						...
					}
				});
				 
```
mousedown
Inherited

Cancellable:

false

Event which is raised on mousedown event.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditormousedown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					mousedown: function (evt, ui) {
						...
					}
				});
				 
```
mousemove
Inherited

Cancellable:

false

Event which is raised on mousemove at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditormousemove", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					mousemove: function (evt, ui) {
						...
					}
				});
				 
```
mouseout
Inherited

Cancellable:

false

Event which is raised on mouseleave at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditormouseout", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					mouseout: function (evt, ui) {
						...
					}
				});
				 
```
mouseover
Inherited

Cancellable:

false

Event which is raised on mouseover at any part of editor including drop-down list.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditormouseover", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					mouseover: function (evt, ui) {
						...
					}
				});
				 
```
mouseup
Inherited

Cancellable:

false

Event which is raised on mouseup event.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput to get a reference to the editor field.
Code Sample
```
 
				$(".selector").on("igpercenteditormouseup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					mouseup: function (evt, ui) {
						...
					}
				});
				 
```
rendered
Inherited

Cancellable:

false

Event which is raised after rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.
Code Sample
```
 
				$(".selector").on("igpercenteditorrendered", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					rendered: function (evt, ui) {
						...
					}
				});
				 
```
rendering
Inherited

Cancellable:

false

Event which is raised before rendering of the editor completes.
Function takes arguments evt and ui.
Use ui.owner to get a reference to the editor performing rendering.
Use ui.element to get a reference to the editor element.
Code Sample
```
 
				$(".selector").on("igpercenteditorrendering", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					rendering: function (evt, ui) {
						...
					}
				});
				 
```
textChanged
Inherited

Cancellable:

false

Event which is raised after text in the editor was changed. It can be raised when keyUp event occurs,
when the clear button is clicked or when an item from a list is selected.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.text to obtain new text
Use ui.oldText to obtain the old text.
Code Sample
```
 
				$(".selector").on("igpercenteditortextchanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					textChanged: function (evt, ui) {
					...
					}
				});
				 
```
valueChanged
Inherited

Cancellable:

false

Event which is raised after the editor value is changed. It can be raised after loosing focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the value entered from the user after internal formatting.
Use ui.originalValue to obtain the value entered from the user before internal formatting.
Use ui.editorInput to obtain reference to the editor input.
Code Sample
```
 
				$(".selector").on("igpercenteditorvaluechanged", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					valueChanged: function (evt, ui) {
						...
					}
				});
				 
```
valueChanging
Inherited

Cancellable:

true

Event which is raised before the editor value is changed.
Return false in order to cancel change.
It can be raised after loosing focus or on spin events.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.oldValue to obtain the old value.
Use ui.editorInput to obtain reference to the editor input.
Code Sample
```
 
				$(".selector").on("igpercenteditorvaluechanging", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igPercentEditor({
					valueChanging: function (evt, ui) {
						...
					}
				});
				 
```

Show Details

changeGlobalLanguage
Inherited

.igPercentEditor( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
```
 
				$(".selector").igPercentEditor("changeGlobalLanguage");
			 
```
changeGlobalRegional
Inherited

.igPercentEditor( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
```
 
				$(".selector").igPercentEditor("changeGlobalRegional");
			 
```
changeLocale
Inherited

.igPercentEditor( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, see language or locale option setter.
Code Sample
```
 
				$(".selector").igPercentEditor("changeLocale");
			 
```
changeRegional
Inherited

.igPercentEditor( "changeRegional" );
Changes the the regional settings of widget element to the language specified in options.regional
Note that this method is for rare scenarios, use regional option setter.
Code Sample
```
 
				$(".selector").igPercentEditor("changeRegional");
			 
```
clearButton
Inherited

.igPercentEditor( "clearButton" );

Return Type:

jquery

Return Type Description:

Returns a reference to the jquery object.
Returns a reference to the clear button UI element of the editor.
Code Sample
```
 
			var button =  $(".selector").igPercentEditor("clearButton");
			 
```
destroy
Inherited

.igPercentEditor( "destroy" );
Destroys the widget.
Code Sample
```
 
					$(".selector").igPercentEditor("destroy");
				 
```
displayValue
Inherited

.igPercentEditor( "displayValue" );

Return Type:

string

Return Type Description:

Visible text of the editor.
Gets the visible text in the editor.
Code Sample
```
  $(".selector").igPercentEditor("displayValue");  
```
dropDownButton
Inherited

.igPercentEditor( "dropDownButton" );

Return Type:

jquery

Return Type Description:

Returns reference to jquery object.
Returns a reference to the drop-down button UI element of the editor.
Code Sample
```
 
			var button = $(".selector").igPercentEditor("dropDownButton");
			 
```
dropDownContainer
Inherited

.igPercentEditor( "dropDownContainer" );

Return Type:

jquery

Return Type Description:

Returns reference to jquery object.
Gets reference to jquery object which is used as container of drop-down list.
Code Sample
```
 
				 $(".selector").igPercentEditor("dropDownContainer");
			 
```
dropDownVisible
Inherited

.igPercentEditor( "dropDownVisible" );

Return Type:

bool

Return Type Description:

The visibility state of the drop down.
Returns if the drop-down list is visible.
Code Sample
```
 
			var visible =  $(".selector").igPercentEditor("dropDownVisible");
			 
```
editorContainer
Inherited

.igPercentEditor( "editorContainer" );

Return Type:

jquery

Return Type Description:

The container editor element.
Gets a reference to the jQuery element that wraps the editor.
Code Sample
```
 
			$(".selector").igPercentEditor("editorContainer");
			 
```
field
Inherited

.igPercentEditor( "field" );

Return Type:

jquery

Return Type Description:

The visual editor element.
Gets the input element of the editor.
Code Sample
```
 
			$(".selector").igPercentEditor("field");
			 
```
findListItemIndex
Inherited

.igPercentEditor( "findListItemIndex", number:number );

Return Type:

number

Return Type Description:

Returns index of the found item.
Finds index of list item by text that matches with the search parameters.
- number
- Type:number
- The text to search for.
Code Sample
```
 
				$(".selector").igPercentEditor("findListItemIndex");
			 
```
getRegionalOption
Inherited

.igPercentEditor( "getRegionalOption" );

Return Type:

string

Return Type Description:

Current regional.
Gets current regional.
Code Sample
```
 
				$(".selector").igPercentEditor("getRegionalOption");
			 
```
getSelectedListItem
Inherited

.igPercentEditor( "getSelectedListItem" );

Return Type:

jquery

Return Type Description:

Selected list item.
Gets the selected list item.
Code Sample
```
 
			var selectedItem =  $(".selector").igPercentEditor("getSelectedListItem");
			 
```
hasFocus
Inherited

.igPercentEditor( "hasFocus" );

Return Type:

bool

Return Type Description:

Returns if the editor is focused or not.
Gets whether the editor has focus.
Code Sample
```
 
				$(".selector").igPercentEditor("hasFocus");
			 
```
hide
Inherited

.igPercentEditor( "hide" );
Hides the editor.
Code Sample
```
 
			$(".selector").igPercentEditor("hide");
			 
```
hideDropDown
Inherited

.igPercentEditor( "hideDropDown" );
Hides the drop down list.
Code Sample
```
 
			$(".selector").igPercentEditor("hideDropDown");
			 
```
inputName
Inherited

.igPercentEditor( "inputName", [newValue:string] );

Return Type:

string

Return Type Description:

Current input name.
Gets/Sets name attribute applied to the editor element.
- newValue
- Type:string
- Optional
- The new input name.
Code Sample
```
 
				$(".selector").igPercentEditor("inputName", "checkbox");
				 
```
insert

.igPercentEditor( "insert", string:string );
Paste text at location of the caret or over the current selection. Best used during editing, as the method will instead set the text as value (modified by the displayFactor) if the editor is not focused.
Note: the method raises the textChanged event.
- string
- Type:string
- The string to be inserted.
Code Sample
```
 
				$('.selector').igPercentEditor({
					blur: function (evt, ui) {
						// insert 0 as the user leaves the field
						ui.owner.insert("0");
					}
				});
				 
```
isValid
Inherited

.igPercentEditor( "isValid" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.
Code Sample
```
 
				var isValid = $(".selector").igPercentEditor("isValid");
				 
```
percentSymbol

.igPercentEditor( "percentSymbol", [symbol:object] );

Return Type:

string

Return Type Description:

Current percent symbol.
Gets/Sets a string that is used as the percent symbol shown with the number in the input. The value provided as a param is propagated to the percentSymbol option and thus has the same priority as the option.
- symbol
- Type:object
- Optional
- New percent symbol.
Code Sample
```
 
				$(".selector").igPercentEditor("percentSymbol", "pc");
				 
```
select
Inherited

.igPercentEditor( "select", start:number, end:number );
Selects the text between start and end indices in the editor. If the parameters are equal, then the method sets location of caret. The method has effect only when the editor has focus.
- start
- Type:number
- Start of the selection.
- end
- Type:number
- End of the selection.
Code Sample
```
 
				$(".selector").igPercentEditor("select", 2, 4);
			 
```
selectedListIndex
Inherited

.igPercentEditor( "selectedListIndex", [index:number] );

Return Type:

number

Return Type Description:

Returns the selected index.
Gets the index of the selected list item. Sets selected item by index.
- index
- Type:number
- Optional
- The index of the item that needs to be selected.
Code Sample
```
 
				$(".selector").igPercentEditor("selectedListIndex", 1);
				var selectedIndex = $(".selector").igPercentEditor("selectedListIndex");
			 
```
selectListIndexDown
Deprecated

.igPercentEditor( "selectListIndexDown" );
This method is deprecated in favor of spinDown.
Code Sample
```
 
				$(".selector").igPercentEditor("selectListIndexDown");
			 
```
selectListIndexUp
Deprecated

.igPercentEditor( "selectListIndexUp" );
This method is deprecated in favor of spinUp.
Code Sample
```
 
				$(".selector").igPercentEditor("selectListIndexUp");
			 
```
setFocus
Inherited

.igPercentEditor( "setFocus", [delay:number] );
Sets focus to the editor after the specified delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample
```
 
				$(".selector").igPercentEditor("setFocus", 200);
				 
```
show
Inherited

.igPercentEditor( "show" );
Shows the editor.
Code Sample
```
 
			$(".selector").igPercentEditor(("show");
			 
```
showDropDown
Inherited

.igPercentEditor( "showDropDown" );
Shows the drop down list.
Code Sample
```
 
			$(".selector").igPercentEditor("showDropDown");
			 
```
spinDown
Inherited

.igPercentEditor( "spinDown", [delta:number] );
Decrements value in editor according to the parameter selects the next item from the drop-down list if isLimitedToListValues is enabled.
- delta
- Type:number
- Optional
- Decrement value.
Code Sample
```
 
				$(".selector").igPercentEditor("spinDown");
			 
```
spinDownButton
Inherited

.igPercentEditor( "spinDownButton" );

Return Type:

jquery

Return Type Description:

The jQuery object representing the spin down UI element of the editor.
Returns a reference to the spin down UI element of the editor.
Code Sample
```
 
				var button = $(".selector").igPercentEditor("spinDownButton");
			 
```
spinUp
Inherited

.igPercentEditor( "spinUp", [delta:number] );
Increments value in editor according to the parameter or selects the previous item from the drop-down list if isLimitedToListValues is enabled.
- delta
- Type:number
- Optional
- Increments value.
Code Sample
```
 
				$(".selector").igPercentEditor("spinUp");
			 
```
spinUpButton
Inherited

.igPercentEditor( "spinUpButton" );

Return Type:

jquery

Return Type Description:

The jQuery object representing the spin up UI element of the editor.
Returns a reference to the spin up UI element of the editor.
Code Sample
```
 
				var button = $(".selector").igPercentEditor("spinUpButton");
			 
```
validate
Inherited

.igPercentEditor( "validate" );

Return Type:

bool

Return Type Description:

Whether editor value is valid or not.
Triggers validation for the editor. If validatorOptions are set will also call validate on the igValidator.
Code Sample
```
 
				var valid = $(".selector").igPercentEditor("validate");
				 
```
validator
Inherited

.igPercentEditor( "validator" );

Return Type:

object

Return Type Description:

Returns reference to igValidator or null.
Gets a reference to igValidator used by the editor.
Code Sample
```
 
					var validator = $(".selector").igPercentEditor("validator");
				 
```
value
Inherited

.igPercentEditor( "value", [newValue:number] );

Return Type:

number

Return Type Description:

Current editor value.
Gets/Sets editor value.
- newValue
- Type:number
- Optional
- New editor value.
Code Sample
```
 
				$(".selector").igPercentEditor("value", 25);
			 
```

ui-state-active

Class applied to the top element when editor is active. Default value is 'ui-state-active'.
ui-igedit-button-common ui-unselectable

Class applied commonly to all the button containers, Default value is 'ui-igedit-button-common ui-unselectable ui-igedit-button-ltr ui-state-default'.
ui-igedit-buttonhover ui-state-hover

Classes applied to the SPAN element of button in mouse-over state. Default value is 'ui-igedit-buttonhover ui-state-hover'.
ui-igedit-buttonpressed ui-state-highlight

Classes applied to the SPAN element of button in pressed state. Default value is 'ui-igedit-buttonpressed ui-state-highlight'.
ui-igedit-cleararea ui-state-default

Class applied to the div holding the clear button. Default value is 'ui-igedit-cleararea ui-state-default'.
ui-igedit-buttonimage ui-icon-circle-close

Class applied to the div holding the clear button image. Default value is 'ui-igedit-buttonimage ui-icon-circle-close ui-icon ui-igedit-buttondefault'.
ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default

Class applied to the top element when editor is rendered in container. Default value is 'ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default'.
ui-state-disabled

Classes applied to the editing element in disabled state. Default value is 'ui-igedit-disabled ui-state-disabled'.
ui-igedit-dropdown-button

Class applied to the div holding the drop down button. Default value is 'ui-igedit-dropdown-button'.
ui-icon ui-icon-triangle-1-s ui-igedit-buttonimage

Class applied to the div holding the drop down button image. Default value is 'ui-icon ui-icon-carat-1-s ui-igedit-buttonimage'.
ui-igedit-dropdown ui-widget

Class applied to the container holding the listitems. Default value is 'ui-igedit-dropdown'.
ui-igedit-input

Class applied to the main/top element. Default value is 'ui-igedit-input'.
ui-igeditor-input-container ui-corner-all

Class applied to the div which wraps the editable input (in case of multiline textarea). Default value is "ui-igeditor-input-container ui-corner-all".
ui-state-focus

Class applied to the top element when editor is on focus. Default value is 'ui-state-focus'.
ui-state-hover

Class applied to the top element when editor is hovered. Default value is 'ui-state-hover'.
ui-igedit-listitem ui-state-default

Class applied to the SPAN element which represents item in dropdown list. Default value is 'ui-igedit-listitem ui-state-default'.
ui-state-active ui-igedit-listitemactive

Class applied to the Class applied to the SPAN element which represents active item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.
ui-igedit-listitemhover ui-state-hover

Class applied to the Class applied to the SPAN element which represents item in dropdown list with mouse-over state. Default value is 'ui-igedit-listitemhover ui-state-hover'.
ui-igedit-listitemselected ui-state-highlight

Class applied to the Class applied to the SPAN element which represents selected item in dropdown list. Default value is 'ui-igedit-listitemselected ui-state-highlight'.
ui-igedit-negative

Class applied to the editing element of numeric editor when value is negative. The class is applied only when the editor is in display mode (no focus). Default value is 'ui-igedit-negative'.
ui-igedit-placeholder

Class applied to the visible input in case of plaseHolder option set. This class is related only to the placeHolder styling. Default value is 'ui-igedit-placeholder'.
ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon

Class applied to the div holding the spin down button image. Default value is 'ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.
ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon

Class applied to the div holding the spin up button image. Default value is "ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage'.
ui-igedit-textarea

Class applied to the visible textarea element in case of textMode set to 'multiline'.

Ignite UI | Samples

ui.igPercentEditor

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowNullValueInherited

Code Sample

buttonTypeInherited

Members

Code Sample

dataMode

Members

Code Sample

decimalSeparatorInherited

Code Sample

disabledInherited

Code Sample

displayFactor

Code Sample

dropDownAnimationDurationInherited

Code Sample

dropDownAttachedToBodyInherited

Code Sample

dropDownOnReadOnlyInherited

Code Sample

dropDownOrientationInherited

Members

Code Sample

groupsInherited

Code Sample

groupSeparatorInherited

Code Sample

heightInherited

Members

Code Sample

inputNameInherited

Code Sample

isLimitedToListValuesInherited

Code Sample

languageInherited

Code Sample

listItemHoverDurationInherited

Code Sample

listItemsInherited

Code Sample

listWidthInherited

Code Sample

localeInherited

Code Sample

maxDecimalsInherited

Code Sample

maxValueInherited

Code Sample

minDecimalsInherited

Code Sample

minValueInherited

Code Sample

negativePatternInherited

Code Sample

negativeSignInherited

Code Sample

nullValueInherited

Code Sample

percentSymbol

Code Sample

placeHolderInherited

Code Sample

positivePattern

Code Sample

preventSubmitOnEnterInherited

Code Sample

readOnlyInherited

Code Sample

regionalInherited

Code Sample

revertIfNotValidInherited

Code Sample

roundDecimalsInherited

allowNullValue
Inherited

buttonType
Inherited

decimalSeparator
Inherited

disabled
Inherited

dropDownAnimationDuration
Inherited

dropDownAttachedToBody
Inherited

dropDownOnReadOnly
Inherited

dropDownOrientation
Inherited

groups
Inherited

groupSeparator
Inherited

height
Inherited

inputName
Inherited

isLimitedToListValues
Inherited

language
Inherited

listItemHoverDuration
Inherited

listItems
Inherited

listWidth
Inherited

locale
Inherited

maxDecimals
Inherited

maxValue
Inherited

minDecimals
Inherited

minValue
Inherited

negativePattern
Inherited

negativeSign
Inherited

nullValue
Inherited

placeHolder
Inherited

preventSubmitOnEnter
Inherited

readOnly
Inherited

regional
Inherited

revertIfNotValid
Inherited

roundDecimals
Inherited

scientificFormat
Inherited

selectionOnFocus
Inherited

spinWrapAround
Inherited

suppressKeyboard
Inherited

suppressNotifications
Inherited

tabIndex
Inherited

textAlign
Inherited

validatorOptions
Inherited

value
Inherited

visibleItemsCount
Inherited

width
Inherited

blur
Inherited

dropDownItemSelected
Inherited

dropDownItemSelecting
Inherited

dropDownListClosed
Inherited

dropDownListClosing
Inherited

dropDownListOpened
Inherited

dropDownListOpening
Inherited

focus
Inherited

keydown
Inherited

keypress
Inherited

keyup
Inherited

mousedown
Inherited

mousemove
Inherited

mouseout
Inherited

mouseover
Inherited

mouseup
Inherited

rendered
Inherited

rendering
Inherited

textChanged
Inherited

valueChanged
Inherited

valueChanging
Inherited