Ignite UI™ API Documentation

ui.igCheckboxEditor

Overview
Options
Events
Methods
Theming

Code Sample

 
      <!DOCTYPE html>
      <html>
      <head>
           <!--Ignite UI Required Combined CSS Files-->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
          <link href="css/themes/infragistics/infragistics.ui.popover.css" rel="stylesheet" />
          <link href="css/themes/infragistics/infragistics.ui.notifier.css" rel="stylesheet" />
          <link href="css/themes/infragistics/infragistics.ui.editors.css" rel="stylesheet" />
          <link href="css/themes/infragistics/infragistics.ui.shared.css" rel="stylesheet" />
          <link href="css/structure/infragistics.css" rel="stylesheet" />

          <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
          <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
          <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

           <!--Ignite UI Required Combined JavaScript Files--> 
          <script src="js/infragistics.core.js"></script>
          <script src="js/infragistics.lob.js"></script>

          <script type="text/javascript">
   
              $(document).ready(function () {
                  $('#checkbox').igCheckboxEditor({
                      checked: true,
                      inputName: "chkBox2name",
                      value: "semanticValue",
                      readOnly: true,
                      size: "normal"
                  });
              });


          </script>
      </head>
      <body>
          <input id="checkbox"/>
      </body>
      </html>

Related Samples

Basic Usage

checked

Type:: bool
Default:: false

Gets/Sets whether the checkbox is checked.

Code Sample

 
				//Initialize
				$('.selector').igCheckboxEditor({
					checked: true
				});

				//Get
				var checked = $(".selector").igCheckboxEditor("option", "checked");

				//Set
				$(".selector").igCheckboxEditor("option", "checked", true);

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").igCheckboxEditor({
					disabled : false
				});

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

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

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").igCheckboxEditor({
					height : 25
				});
				//Get
				var height = $(".selector").igCheckboxEditor("option", "height");
				//Set
				$(".selector").igCheckboxEditor("option", "height", 25);
				 
```

iconClass

Type:: string
Default:: "ui-icon-check"

Gets/Sets a custom class on the checkbox. Custom image can be used this way.
The following jQuery classes can be used in addition http://api.jqueryui.com/theming/icons/.

Code Sample

 
				//Initialize
				$('.selector').igCheckboxEditor({
					iconClass: "ui-icon-check"
				});

				//Get
				var iconClass = $(".selector").igCheckboxEditor("option", "iconClass");

				//Set
				$(".selector").igCheckboxEditor("option", "iconClass", "ui-icon-check");

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").igCheckboxEditor({
				  inputName : "textField"
				});

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

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

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

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

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

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

locale
Inherited

Type:: object
Default:: null

Set/Get the locale setting for the widget.

Code Sample

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

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

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

readOnly

Type:: bool
Default:: false

Gets/Sets the readonly attribute. Does not allow editing. Disables changing the checkbox state as an interaction, but it still can be changed programmatically. On submit the current value is sent into the request.

Code Sample

 
				//Initialize
				$('.selector').igCheckboxEditor({
					readOnly: true
				});

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

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

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

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

size

Type:

enumeration

Default:

normal
Gets/Sets size of the checkbox based on preset styles. For different sizes, define 'width' and 'height' options instead.
Members
- verysmall
- Type:string
- The size of the Checkbox editor is very small.
- small
- Type:string
- The size of the Checkbox editor is small.
- normal
- Type:string
- The size of the Checkbox editor is normal.
- large
- Type:string
- The size of the Checkbox editor is large.
Code Sample
```
 
				//Initialize
				$('.selector').igCheckboxEditor({
					size: "large"
				});
				//Get
				var size = $(".selector").igCheckboxEditor("option", "size");
				//Set
				$(".selector").igCheckboxEditor("option", "size", "large");
				 
```

tabIndex

Type:: number
Default:: 0

Gets/Sets tabIndex attribute for the editor input.

Code Sample

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

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

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

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").igCheckboxEditor({
						validatorOptions : {
							successMessage: "Success",
									 required: true,
									 onchange: true,
							notificationOptions: { mode: "popover" }
						}
					});

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

					//Set
					$(".selector").igCheckboxEditor("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").igCheckboxEditor({
				value : "Some text"
			});

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

			//Set
			$(".selector").igCheckboxEditor("option", "value", "Some text");

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").igCheckboxEditor({
					width : 200
				});
				//Get
				var width = $(".selector").igCheckboxEditor("option", "width");
				//Set
				$(".selector").igCheckboxEditor("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("igcheckboxeditorblur", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					blur: 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("igcheckboxeditorfocus", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditorkeydown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditorkeypress", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditorkeyup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditormousedown", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditormousemove", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditormouseout", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditormouseover", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditormouseup", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditorrendered", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					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("igcheckboxeditorrendering", function (evt, ui) {
					...
				});

				//Initialize
				$(".selector").igCheckboxEditor({
					rendering: function (evt, ui) {
						...
					}
				});
				 
```
valueChanged

Cancellable:

false

Event which is raised after value in editor was changed.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.newState to obtain the new state.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput obtain reference to the editor element.
Code Sample
```
 
				$(".selector").on("igcheckboxeditorvaluechanged", function (evt, ui) {
					...
				});

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

Cancellable:

true

Event which is raised before value in editor was changed.
Return false in order to cancel change.
Function takes arguments evt and ui.
Use ui.owner to obtain reference to igEditor.
Use ui.newValue to obtain the new value.
Use ui.newState to obtain the new state.
Use ui.oldValue to obtain the old value.
Use ui.oldState to obtain the old state.
Use ui.element to obtain a reference to the event target.
Use ui.editorInput obtain reference to the editor element.
Code Sample
```
 
				$(".selector").on("igcheckboxeditorvaluechanging", function (evt, ui) {
					...
				});

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

Show Details

changeGlobalLanguage
Inherited

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

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

.igCheckboxEditor( "changeLocale", $container:object );
Changes the all locales contained into a specified container to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.
- $container
- Type:object
- Optional parameter - if not set it would use the element of the widget as $container.
Code Sample
```
 
				$(".selector").igCheckboxEditor("changeLocale");
			 
```
destroy
Inherited

.igCheckboxEditor( "destroy" );
Destroys the widget.
Code Sample
```
 
					$(".selector").igCheckboxEditor("destroy");
				 
```
editorContainer
Inherited

.igCheckboxEditor( "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").igCheckboxEditor("editorContainer");
			 
```
field
Inherited

.igCheckboxEditor( "field" );

Return Type:

jquery

Return Type Description:

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

.igCheckboxEditor( "hasFocus" );

Return Type:

bool

Return Type Description:

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

.igCheckboxEditor( "hide" );
Hides the editor.
Code Sample
```
 
			$(".selector").igCheckboxEditor("hide");
			 
```
inputName
Inherited

.igCheckboxEditor( "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").igCheckboxEditor("inputName", "checkbox");
				 
```
isValid

.igCheckboxEditor( "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").igCheckboxEditor("isValid");
				 
```
setFocus
Inherited

.igCheckboxEditor( "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").igCheckboxEditor("setFocus", 200);
				 
```
show
Inherited

.igCheckboxEditor( "show" );
Shows the editor.
Code Sample
```
 
			$(".selector").igCheckboxEditor(("show");
			 
```
toggle

.igCheckboxEditor( "toggle" );
Toggles the state of the checkbox.
Code Sample
```
 
				$(".selector").igCheckboxEditor("toggle");
				 
```
validate
Inherited

.igCheckboxEditor( "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").igCheckboxEditor("validate");
				 
```
validator
Inherited

.igCheckboxEditor( "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").igCheckboxEditor("validator");
				 
```
value

.igCheckboxEditor( "value", newValue:object );

Return Type:

string

Return Type Description:

Current checked state(bool) or the value(string) of the igCheckboxEditor that will be submitted by the HTML form.
Gets/Sets Current checked state/Value of the igCheckboxEditor that will be submitted by the HTML form.
1. If the value option IS NOT defined, then 'value' method will match the checked state of the editor.
This option is used when the checkbox is intended to operate as a Boolean editor. In that case the return type is bool.
2. If the value option IS defined, then 'value' method will return the value that will be submitted when the editor is checked and the form is submitted.
To get checked state regardless of the 'value' option, use $(".selector").igCheckboxEditor("option", "checked");.
- newValue
- Type:object
Code Sample
```
 
				//Get
				var editorVal = $(".selector").igCheckboxEditor("value");

				//Set
				$(".selector").igCheckboxEditor("value", 42);
				 
```

ui-state-active

Class applied to the top element when editor is active. Default value is 'ui-state-active'.
ui-icon

Class applied to the checkbox element when that holds the styles for the checkbox icon. Default value is 'ui-icon'.
ui-helper-hidden

Class applied to the hidden HTML checkbox input when. Default value is 'ui-helper-hidden'.
ui-igcheckbox-normal-on

Class applied to the checkbox element when it is checked. Default value is 'ui-igcheckbox-normal-on'.
ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal

Classes applied to the top element when editor is rendered in container. Default value is 'ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal'.
ui-state-checkbox-checked

Class applied to the top element when editor is checked. Default value is 'ui-state-checkbox-checked'.
ui-state-disabled

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

Class applied to the main/top element. Default value is 'ui-igedit-input'.
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-icon-custom

Class applied to the checkbox element that there is custom width and height, in order to have the image centered. Default value is 'ui-icon-custom'.
ui-igcheckbox-normal-off

Class applied to the checkbox element when it is unchecked. Default value is 'ui-igcheckbox-normal-off'.

Ignite UI | Samples

ui.igCheckboxEditor

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

checked

Code Sample

disabledInherited

Code Sample

heightInherited

Members

Code Sample

iconClass

Code Sample

inputNameInherited

Code Sample

languageInherited

Code Sample

localeInherited

Code Sample

readOnly

Code Sample

regionalInherited

Code Sample

size

Members

Code Sample

tabIndex

Code Sample

validatorOptionsInherited

Code Sample

valueInherited

Code Sample

widthInherited

Members

Code Sample

blurInherited

Code Sample

focusInherited

Code Sample

keydownInherited

Code Sample

keypressInherited

Code Sample

keyupInherited

Code Sample

mousedownInherited

Code Sample

mousemoveInherited

Code Sample

mouseoutInherited

Code Sample

mouseoverInherited

Code Sample

mouseupInherited

Code Sample

renderedInherited

Code Sample

renderingInherited

Code Sample

valueChanged

Code Sample

valueChanging

Code Sample

changeGlobalLanguageInherited

Code Sample

changeGlobalRegionalInherited

Code Sample

changeLocaleInherited

Code Sample

destroyInherited

Code Sample

editorContainerInherited

Code Sample

fieldInherited

Code Sample

hasFocusInherited

Code Sample

disabled
Inherited

height
Inherited

inputName
Inherited

language
Inherited

locale
Inherited

regional
Inherited

validatorOptions
Inherited

value
Inherited

width
Inherited

blur
Inherited

focus
Inherited

keydown
Inherited

keypress
Inherited

keyup
Inherited

mousedown
Inherited

mousemove
Inherited

mouseout
Inherited

mouseover
Inherited

mouseup
Inherited

rendered
Inherited

rendering
Inherited

changeGlobalLanguage
Inherited

changeGlobalRegional
Inherited

changeLocale
Inherited

destroy
Inherited

editorContainer
Inherited

field
Inherited

hasFocus
Inherited

hide
Inherited

inputName
Inherited

setFocus
Inherited

show
Inherited

validate
Inherited

validator
Inherited