| Name | Type | Default |
|---|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} disabled={true}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
dropDownWidth
|
Number
|
null
|
Sets or gets the dropDownWidth property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} dropDownWidth={200}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
displayMember
|
String
|
""
|
Sets or gets the displayMember property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} valueMember={'CompanyId'} displayMember={'CompanyName'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
height
|
Number
|
null
|
Sets or gets the height property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
items
|
Number
|
8
|
Sets or gets the items property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} items={10}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
minLength
|
Number
|
1
|
Sets or gets the minLength property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} minLength={1}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
maxLength
|
Number
|
null
|
Sets or gets the maxLength property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} maxLength={10}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
opened
|
Boolean
|
false
|
Sets or gets the opened property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} opened={true}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
placeHolder
|
String
|
""
|
Sets or gets the placeHolder property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} placeHolder={'Enter a Country'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
popupZIndex
|
Number
|
20000
|
Sets or gets the popupZIndex property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} popupZIndex={99999}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
query
|
String
|
""
|
Sets or gets the query property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} query={'item'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
renderer
|
function
|
null
|
Sets or gets the renderer property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} renderer={renderer}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} rtl={true}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
searchMode
|
String
|
'default'
|
Sets or gets the searchMode property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} searchMode={'startswithignorecase'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
source
|
Array
|
[]
|
Sets or gets the source property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} theme={'energyblue'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
valueMember
|
String
|
""
|
Sets or gets the valueMember property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} valueMember={'CompanyId'} displayMember={'CompanyName'}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
width
|
Number
|
null
|
Sets or gets the width property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
value
|
Number
|
null
|
Sets or gets the value property.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries} value={200}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
|
change
|
Event
|
|
This event is triggered when the value is changed.
Code examples
Bind to the change event of jqxInput.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.on('change', (event) => {
// Do Something...
});
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
close
|
Event
|
|
This event is triggered when the auto-suggest popup is closed.
Code examples
Bind to the close event of jqxInput.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.on('close', (event) => {
// Do Something...
});
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
open
|
Event
|
|
This event is triggered when the auto-suggest popup is opened.
Code examples
Bind to the open event of jqxInput.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.on('open', (event) => {
// Do Something...
});
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
select
|
Event
|
|
This event is triggered when an item is selected from the auto-suggest popup.
Code examples
Bind to the select event of jqxInput.
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.on('select', (event) => {
// Do Something...
});
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
|
| Name | Return Type |
|---|
|
destroy
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.destroy();
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
focus
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.focus();
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
selectAll
|
None
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.myInput.selectAll();
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
|
val
|
String
|
import React from 'react';
import ReactDOM from 'react-dom';
import JqxInput from 'jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myInput.val();
}
render() {
let countries = new Array("USA", "Germany", "UK", "Russia");
return (
<JqxInput ref='myInput'
width={200} height={25} source={countries}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|