## Properties

Name | Type | Default
--- | --- | ---
decimalNotation | String | 'default'
Sets or gets the notation in which to display the real and imaginary parts of the complex number. Possible Values:
    'default' - decimal notation, e.g. '330000 - 200i'
    'exponential', e.g. '3.3e+5 - 2e+2i'
    'scientific', e.g. '3.3×10⁵ - 2×10²i'
    'engineering', e.g. '330×10³ - 200×10⁰i'

#### Code example

Set the `decimalNotation` property.

    $("#jqxComplexInput").jqxComplexInput({ decimalNotation: "exponential" });

Get the `decimalNotation` property.

    var decimalNotation = $('#jqxComplexInput').jqxComplexInput('decimalNotation');

Try it: decimalNotation is set to "exponential"
disabled | Boolean | false
Enables or disables the jqxComplexInput.

#### Code examples

Set the `disabled` property.

    $('#jqxComplexInput').jqxComplexInput({ disabled: false });

Get the `disabled` property.

    var disabled = $('#jqxComplexInput').jqxComplexInput('disabled');

Try it: disabled is set to true
height | Number/String | null
Sets or gets the jqxComplexInput's height.

#### Code examples

Set the `height` property.

    $('#jqxComplexInput').jqxComplexInput({ height: "35px" });

Get the `height` property.

    var height = $('#jqxComplexInput').jqxComplexInput('height');

Try it: height is set to 35
placeHolder | String | ''
Sets or gets the jqxComplexInput's placeholder.

#### Code example

Set the `placeHolder` property.

    $("#jqxComplexInput").jqxComplexInput({ placeHolder: "Enter a complex number" });

Get the `placeHolder` property.

    var placeHolder = $('#jqxComplexInput').jqxComplexInput('placeHolder');

Try it: placeHolder is set to "Enter a complex number"
roundedCorners | boolean | true
Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

#### Code example

Set the `roundedCorners` property.

    $("#jqxComplexInput").jqxComplexInput({ roundedCorners: false });

Get the `roundedCorners` property.

    var roundedCorners = $("#jqxComplexInput").jqxComplexInput('roundedCorners');

Try it: roundedCorners is set to false
rtl | Boolean | false
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code example

Set the `rtl` property.

    $('#jqxComplexInput').jqxComplexInput({ rtl : true });

Get the `rtl` property.

    var rtl = $('#jqxComplexInput').jqxComplexInput('rtl');

Try it: rtl is set to true
spinButtons | boolean | false
Shows or hides the spin buttons. Note: the spin buttons require an additional empty div element in the initialization div of jqxComplexInput.

#### Code example

Set the `spinButtons` property.

    $("#jqxComplexInput").jqxComplexInput({ spinButtons: true });

Get the `spinButtons` property.

    var spinButtons = $('#jqxComplexInput').jqxComplexInput('spinButtons');

Try it: spinButtons is set to true
spinButtonsStep | Number | 1
Sets or gets the increase/decrease step.

#### Code example

Set the `spinButtonsStep` property.

    $("#jqxComplexInput").jqxComplexInput({ spinButtonsStep: 10 });

Get the `spinButtonsStep` property.

    var spinButtonsStep = $('#jqxComplexInput').jqxComplexInput('spinButtonsStep');

Try it: spinButtonsStep is set to 10
template | String | 'default'
Determines the template as an alternative of the default styles. Possible Values:
    'default' - the default template. The style depends only on the "theme" property value.
    'primary' - dark blue style for extra visual weight.
    'success' - green style for successful or positive action.
    'warning' - orange style which indicates caution.
    'danger' - red style which indicates a dangerous or negative action.
    'info' - blue button, not tied to a semantic action or use.

#### Code examples

Set the `template` property.

    $("#jqxComplexInput").jqxComplexInput({ template: 'primary'});

Get the `template` property.

    var template = $('#jqxComplexInput').jqxComplexInput('template');

Try it: template is set to 'primary'
theme | String | ''
Sets the widget's theme. jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

                                      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

- Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'energyblue'
value | String | ''
Sets or gets the value of the jqxComplexInput widget.

#### Code example

Set the `value` property.

    $("#jqxComplexInput").jqxComplexInput({ value: "190 - 17i" });

Get the `value` property.

    var value = $('#jqxComplexInput').jqxComplexInput('value');

Try it: value is set to "190 - 17i"
width | Number/String | null
Sets or gets the jqxComplexInput's width.

#### Code examples

Set the `width` property.

    $('#jqxComplexInput').jqxComplexInput({ width: 200 });

Get the `width` property.

    var width = $('#jqxComplexInput').jqxComplexInput('width');

Try it: width is set to 200

## Events

change | Event |
This event is triggered when the value is changed.

#### Code examples

Bind to the `change` event by type: jqxComplexInput.

    $("#jqxComplexInput").on("change", function (event) {
        // event arguments
        var args = event.args;
        if (args) {
            // new value
            var value = args.value;
            // old value
            var oldValue = args.oldValue;
            // real part
            var realPart = args.realPart;
            // imaginary part
            var imaginaryPart = args.imaginaryPart;
            // type
            var type = args.type; // keyboard, mouse or null depending on how the value was changed.
        }
    });

Try it: Bind to the change event by type: jqxComplexInput.

## Methods

destroy | Method |
Destroys the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxComplexInput').jqxComplexInput('destroy');

Try it: destroys the complex input
getReal | Method |
Gets the real part of the entered number.

Parameter | Type | Description
--- | --- | ---
complexNumber | Number(optional) | if passed, gets the real part of the passed complex number

Return Value
None

#### Code examples

Invoke the `getReal` method.

    // @param complexNumber (optional) - if passed, gets the real part of the passed complex number
    var realPart = $('#jqxComplexInput').jqxComplexInput('getReal');

Try it: gets the real part
getImaginary | Method |
Gets the imaginary part of the entered number.

Parameter | Type | Description
--- | --- | ---
complexNumber | Number(optional) | if passed, gets the imaginary part of the passed complex number

Return Value
Number

#### Code examples

Invoke the `getImaginary` method.

    // @param complexNumber (optional) - if passed, gets the imaginary part of the passed complex number
    var imaginaryPart = $('#jqxComplexInput').jqxComplexInput('getImaginary');

Try it: gets the imaginary part
render | Method |
Renders the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `render` method.

    $('#jqxComplexInput').jqxComplexInput('render');

Try it: renders the complex input
refresh | Method |
Refreshes the widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `refresh` method.

    $('#jqxComplexInput').jqxComplexInput('refresh');

Try it: refreshes the complex input
val | Method |
Sets or gets the value.

Parameter | Type | Description
--- | --- | ---
None | String/Object | If object is passed, it should be with object.real and object.imaginary properties.

Return Value
String

#### Code examples

Get the `value`:

    var value = $('#jqxComplexInput').jqxComplexInput('val');
    or
    var value = $('#jqxComplexInput').val();

Set the `value`:

    // @param complexNumber - a string with the value of the complex number to set or an object with the fields "real" and "imaginary", representing the real and imaginary parts of the number to set
    $('#jqxComplexInput').jqxComplexInput('val', '1 - 99i');
    or
    $('#jqxComplexInput').val('1 - 99i');
    or
    $('#jqxComplexInput').jqxComplexInput('val', { real: 1, imaginary: -99 });
    or
    $('#jqxComplexInput').val({ real: 1, imaginary: -99 });

Try it: sets the jqxComplexInput value