Ignite UI™ API Documentation

ui.igCheckboxEditor

Code Sample

<!DOCTYPE html>
<html>
<head>
     <!--Ignite UI Required Combined CSS Files-->
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.ui.popover.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.ui.notifier.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.ui.editors.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/css/themes/infragistics/infragistics.ui.shared.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2015.2/latest/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="http://cdn-na.infragistics.com/igniteui/2015.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2015.2/latest/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 either the editor is checked or not.

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.Does not allow editing. Disables all the buttons and iteracitons applied. On submit the current value is not sent into the request.

Code Sample

//Initialize
$('.selector').igCheckboxEditor({
    disabled: true
});
 
//Get
var checked = $(".selector").igCheckboxEditor("option", "disabled");
 
//Set
$(".selector").igCheckboxEditor("option", "disabled", true); 

height
Inherited

Type:: enumeration
Default:: null

Gets/Sets how the height of the control can be set.

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

iconClass

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

Applies custom class on the checkbox, so that custom image can be used.
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

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

readOnly
Inherited

Type:: bool
Default:: false

Gets/Sets the readonly attribute.Does not allow editing. Disables all the buttons and iteracitons applied. 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); 

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 value in tabIndex for Checkbox Editor.

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

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

Code Sample

//Initialize
$('.selector').igCheckboxEditor({
    validatorOptions: {
      errorMessage: "This field is required!",
      onblur: true
    }
});
 
//Get
var validatorOptions = $(".selector").igCheckboxEditor("option", "validatorOptions");
 
//Set
var validationOptions = {
      errorMessage: "This field is required!",
      onblur: true
    };
$(".selector").igCheckboxEditor("option", "validatorOptions", validationOptions); 

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

width
Inherited

Type:: enumeration
Default:: null

Gets/Sets how the width of the control can be set.

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", "200px"); 

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 argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.

Code Sample

$(document).delegate(".selector", "igcheckboxblur", function (evt) {
 
    //return browser event
    evt.originalEvent;
});
 
//Initialize
$(".selector").igCheckboxEditor({
    blur: function (evt) {
    ...
    }
});

focus
Inherited

Cancellable:: false

Event which is raised when input field of editor gets focus.
Function takes argument evt.
Use ui.owner to obtain reference to igEditor.
Use evt.originalEvent to obtain reference to event of browser.

Code Sample

    $(document).delegate(".selector", "igcheckboxeditorfocus", function (evt, ui) {
            //return browser event
            evt.originalEvent;
            //use to obtain reference to igEditors
            ui.owner;
 
});
 
//Initialize
$(".selector").igCheckboxEditor({
        focus: function (evt, ui) {
        ...
        }
});     

keydown

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

$(document).delegate(".selector", "igcheckboxeditorkeydown", function (evt, ui) {
      //return browser event
      evt.originalEvent;
      //use to obtain reference to igEditors
      ui.owner;
      //use to obtain value of keyCode
      ui.key;
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keydown: function (evt, ui) {
    ...
    }
});

keypress

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.
Set ui.key to another character which will replace original entry.

Code Sample

$(document).delegate(".selector", "igcheckboxeditorkeypress", function (evt, ui) {
      //return browser event
      evt.originalEvent;
      //use to obtain reference to igEditors
      ui.owner;
      //use to obtain value of keyCode
      ui.key;
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keypress: function (evt, ui) {
    ...
    }
});

keyup

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

$(document).delegate(".selector", "igcheckboxeditorkeyup", function (evt, ui) {
      //return browser event
      evt.originalEvent;
      //use to obtain reference to igEditors
      ui.owner;
      //use to obtain value of keyCode
      ui.key;
});
 
//Initialize
$(".selector").igCheckboxEditor({
    keyup: function (evt, ui) {
    ...
    }
});

mousedown
Inherited

Cancellable:: false

Event which is raised on mousedown at any part of editor including drop-down list.
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.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

$(document).delegate(".selector", "igcheckboxeditormousedown", function (evt, ui) {
      //return browser event
      evt.originalEvent;
 
      //use to obtain reference to igEditors
      ui.owner;
 
      //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
      ui.elementType;
 
      //obtains flag which represents html element under mouse
      ui.id and ui.elementType
 
  });
 
  //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 evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

$(document).delegate(".selector", "igcheckboxeditormousemove", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //use to obtain reference to igEditors
    ui.owner;
 
    //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
    ui.elementType;
 
    //obtains flag which represents html element under mouse
    ui.id and ui.elementType
 
});
 
//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 evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

$(document).delegate(".selector", "igcheckboxeditormouseout", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //use to obtain reference to igEditors
    ui.owner;
 
    //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
    ui.elementType;
 
    //obtains flag which represents html element under mouse
    ui.id and ui.elementType
 
});
 
//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 evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igEditor.
Use ui.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

$(document).delegate(".selector", "igcheckboxeditormouseover", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //use to obtain reference to igEditors
    ui.owner;
 
    //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
    ui.elementType;
 
    //obtains flag which represents html element under mouse
    ui.id and ui.elementType
 
});
 
//Initialize
$(".selector").igCheckboxEditor({
    mouseover: function (evt, ui) {
    ...
    }
});

mouseup
Inherited

Cancellable:: false

Event which is raised on mouseup at any part of editor including drop-down list.
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.elementType to obtain type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
Use ui.id and ui.elementType to obtain flag which represents html element under mouse.

Code Sample

$(document).delegate(".selector", "igcheckboxeditormouseup", function (evt, ui) {
    //return browser event
    evt.originalEvent;
 
    //use to obtain reference to igEditors
    ui.owner;
 
    //obtains type of html element under mouse, such as field, button, spinUpper, spinLower or item#.
    ui.elementType;
 
    //obtains flag which represents html element under mouse
    ui.id and ui.elementType
 
});
 
//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

$(document).delegate(".selector", "igcheckboxeditorrendered", function (evt, ui) {
 
  //obtain reference to the editor performing rendering
  ui.owner;
  //get a reference to the editor element
  ui.element;
 
});
 
//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

  $(document).delegate(".selector", "igcheckboxeditorrendering", function (evt, ui) {
 
  //obtain reference to the editor performing rendering
  ui.owner;
  //get a reference to the editor element
  ui.element;
 
});
 
//Initialize
$(".selector").igCheckboxEditor({
    rendering: function (evt, ui) {
    ...
    }
});

valueChanged

Cancellable:: false

Event which is raised after value in editor was changed. It can be raised on lost 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.newState to obtain the new state.
Use ui.element to obtain reference to the DOM element.
Use ui.editorInput obtain reference to the editor input.

Code Sample

$(document).delegate(".selector", "igcheckboxeditorvaluechanged", function (evt, ui) {
 
  //obtain reference to igEditor
  ui.owner;
  //gets the new value
  ui.newValue;
  //gets the new state
  ui.newState;
  //get a reference to the editor element
  ui.element;
  //get a reference to the editor input
  ui.editorInput;
 
});
 
//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.
It can be raised on lost 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.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 reference to the DOM element.
Use ui.editorInput obtain reference to the editor input.

Code Sample

$(document).delegate(".selector", "igcheckboxeditorvaluechanging", function (evt, ui) {
 
  //obtain reference to igEditor
  ui.owner;
  //gets the new value
  ui.newValue;
  //gets the new state
  ui.newState;
  //gets the old value
  ui.oldValue;
  //gets the old state
  ui.oldState;
  //get a reference to the editor element
  ui.element;
  //get a reference to the editor input
  ui.editorInput;
 
});
 
//Initialize
$(".selector").igCheckboxEditor({
    valueChanging: function (evt, ui) {
    ...
    }
});

Show Details

destroy
Inherited

.igCheckboxEditor( "destroy" );
Destructor of the widget.
Code Sample

$(".selector").igCheckboxEditor("destroy");
editorContainer
Inherited

.igCheckboxEditor( "editorContainer" );

Return Type:

jquery

Return Type Description:

The container editor element.
Gets reference to jquery object which is used as top/outer element of igEditor.
Code Sample

var editorContainer = $(".selector").igCheckboxEditor("editorContainer");
field
Inherited

.igCheckboxEditor( "field" );

Return Type:

jquery

Return Type Description:

The visual editor element.
Gets the visual editor element.
Code Sample

var field = $(".selector").igCheckboxEditor("field");
hasFocus
Inherited

.igCheckboxEditor( "hasFocus" );

Return Type:

bool

Return Type Description:

Returns if the editor is focused or not.
Checks if editor has focus.
Code Sample

var hasFocus = $(".selector").igCheckboxEditor("hasFocus");
hide
Inherited

.igCheckboxEditor( "hide" );
Hides 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 value in editor is valid. Note: This function always returns true for the igCheckboxEditor.
Code Sample

var isValid = $(".selector").igCheckboxEditor("isValid");
setFocus
Inherited

.igCheckboxEditor( "setFocus", [delay:number] );
Set focus to editor with delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample

$(".selector").igCheckboxEditor("setFocus", 2000);
show
Inherited

.igCheckboxEditor( "show" );
Shows 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 of editor and show potential warning message. If validatorOptions are set will also call validate on the igValidator.
Code Sample

$(".selector").igCheckboxEditor("validate");
validator
Inherited

.igCheckboxEditor( "validator" );

Return Type:

object

Return Type Description:

Returns reference to igValidator or null.
Gets reference to igValidator used by the editor.
Code Sample

var validator = $(".selector").igCheckboxEditor("validator");
value

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

Return Type:

enumeration

Return Type Description:

Can return 'boolean|string'. Current checked state or the value 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 is a good option when the checkbox is intended to operate as a Boolean editor.
2. If the 'value' option IS defined, then 'value' method will return the 'value' option,
the one that is going to be submitted by the HTML form to the server.
To get checked state regardless of the 'value' option, use $("checkBox").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 Home

ui.igCheckboxEditor

Code Sample

Related Samples

Related Topics

Dependencies

Inherits