Custom Elements Documentation

decimalNotation string 'default'

Sets or gets the decimalNotation property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, decimalNotation:"exponential", theme:"light"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25,disabled:true, theme:"light"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

placeHolder string ''

Sets or gets the placeHolder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light", placeHolder:"Enter a complex number"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

roundedCorners boolean true

Sets or gets the roundedCorners property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light",roundedCorners:false        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light",rtl:true        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

spinButtons boolean false

Sets or gets the spinButtons property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light",spinButtons:true        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

spinButtonsStep number 1

Sets or gets the spinButtonsStep property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light",spinButtonsStep:10        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

template string 'default'

Sets or gets the template property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light", template:"primary"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

value string ''

Sets or gets the value property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light",value:190        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

change Event

Code examples

Bind to the change event of jqxComplexInput.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-complex-input").addEventListener("change", function(event) {			// Your code here.		});	};    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-complex-input").destroy();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

getReal Method

Parameter	Type	Description
complexNumber	number	if passed, gets the real part of the passed complex number

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		var result = document.querySelector("jqx-complex-input").getReal();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

getImaginary Method

Parameter	Type	Description
complexNumber	number	if passed, gets the imaginary part of the passed complex number

Return Value
Number

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		var result = document.querySelector("jqx-complex-input").getImaginary();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

getDecimalNotation Method

Parameter	Type	Description
part	string
type	string

Return Value
String

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		var result = document.querySelector("jqx-complex-input").getDecimalNotation();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-complex-input").render();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		document.querySelector("jqx-complex-input").refresh();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

val Method

Parameter	Type	Description
value	string/object	If object is passed, it should be with object.real and object.imaginary properties.

Return Value
String

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>ComplexInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>    <script>        JQXElements.settings["complexInputSettings"] =        {            width:250,height:25, theme:"light"        }	window.onload = function() {		var result = document.querySelector("jqx-complex-input").val();								}    </script></head><body>   <jqx-complex-input settings="complexInputSettings"></jqx-complex-input></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Methods