React Form API Reference

Name	Type	Default
padding	FormPadding	{ left: 5, top: 5, right: 5, bottom: 5 }
Interface FormPadding { left?: number \| string; right?: number \| string; top?: number \| string; bottom?: number \| string; } Gets or sets the jqxForm's padding. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} padding={{ left: 10, top: 10, right: 10, bottom: 10 }} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backgroundColor	string	#F5F5F5
Gets or sets the jqxForm's backgroundColor. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} backgroundColor={'lightblue'} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
borderColor	string	#E5E5E5
Gets or sets the jqxForm's borderColor. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} borderColor={'red'} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value	any	{}
Gets or sets the jqxForm's value. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
template	Array<FormTemplateItem>	undefined
Interface FormPadding { left?: number \| string; right?: number \| string; top?: number \| string; bottom?: number \| string; } Interface FormTemplateItem { type?: string; bind?: string; submit?: boolean; required?: boolean; requiredPosition?: string; info?: string; infoPosition?: string; component?: string; init?: (value: any) => void; label?: string; labelPosition?: string; labelAlign?: string; align?: string; valign?: string; labelValign?: string; height?: number \| string; rowHeight?: number \| string; width?: number \| string; columnWidth?: number \| string; labelWidth?: number \| string; labelHeight?: number \| string; padding?: FormPadding; labelPadding?: FormPadding; columns?: Array<FormTemplateItem>; optionsLayout?: string; options?: Array<any>; } Gets or sets the jqxForm's template. Each object in the template, represents a Form row. Each row can have one field with label or multiple fields(if the current object's columns property is defined). Template options: bind - Sets a template's member Name. type - Sets a template member's type. Possible values: 'text', 'option', 'blank', 'button', 'color', 'number', 'boolean', 'password', 'label', 'time', 'date', 'datetime', 'custom'. label - Sets the label displayed next to the field. labelWidth - Sets the with o label displayed next to the field. required - Sets whether the field is optional or not. info - Sets the field information icon's tooltip. infoPosition - Sets the information icon's position. component - Sets the component's type. 'jqxDropDownList' when type is 'option'. By default, the component type is jqxRadioButton for the 'option' type. options - Sets the 'option' type's options. init - Sets the callback function for 'custom' type initialization. rowHeight - Sets the row's height. width - Sets the row's width. columns - Sets the row's columns. align - Sets the alignment of the field. Possible values: 'right', 'center', 'left' valign - Sets the vertical alignment of the field. Possible values: 'top', 'center', 'bottom' columnWidth - Sets the column's width. const template = [ { bind: 'firstName', type: 'text', label: 'First name', required: true, labelWidth: '80px', width: '250px', info: 'Enter first name', infoPosition: 'right' }, { bind: 'lastName', type: 'text', label: 'Last name', required: true, labelWidth: '80px', width: '250px', info: 'Enter last name' }, { bind: 'company', type: 'text', label: 'Company', required: false, labelWidth: '80px', width: '250px' }, { bind: 'address', type: 'text', label: 'Address', required: true, labelWidth: '80px', width: '250px' }, { bind: 'city', type: 'text', label: 'City', required: true, labelWidth: '80px', width: '250px' }, { bind: 'state', type: 'option', label: 'State', required: true, labelWidth: '80px', width: '250px', component: 'jqxDropDownList', options: [ { value: 'California' }, { value: 'New York'}, { value: 'Oregon'}, { value: 'Illinois'}, { value: 'Texas'} ] }, { bind: 'zip', type: 'text', label: 'Zip code', required: true, labelWidth: '80px', width: '250px' }, { type: 'blank', rowHeight: '10px' }, { columns: [ { type: 'button', text: 'Sign up', width: '90px', height: '30px', rowHeight: '40px', columnWidth: '50%', align: 'right' }, { type: 'button', text: 'Cancel', width: '90px', height: '30px', rowHeight: '40px', columnWidth: '50%' } ] } ]; var sampleValue = { firstName: 'John', lastName: 'Scott', address: '1st Ave SW', company: 'N/A', city: 'San Antonio', state: 'Texas', zip: '78209' }; $('#sampleForm').jqxForm({ template: template, value: sampleValue, backgroundColor: '#fafafa', padding: { left: 10, top: 10, right: 10, bottom: 10 } }); /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
Events
formDataChange	Event
Event: formDataChange Code examples Bind to the `formDataChange` event of jqxForm. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} onFormDataChange={this.onFormDataChange} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } private onFormDataChange(e: Event): void { alert('do something...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
buttonClick	Event
Event: buttonClick Code examples Bind to the `buttonClick` event of jqxForm. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public render() { return ( <JqxForm ref={this.myForm} onButtonClick={this.onButtonClick} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } private onButtonClick(e: Event): void { alert('do something...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
Methods
Name	Arguments	Return Type
getInstance
Method: getInstance /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public componentDidMount(): void { this.myForm.current!.getInstance(); } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh
Refreshes the Form Component /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public componentDidMount(): void { this.myForm.current!.refresh(); } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
destroy
Destroys the Form Component /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public componentDidMount(): void { this.myForm.current!.destroy(); } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
hideComponent	name
Hides a form element component from the list specified in the template .
showComponent	name
Shows a hidden form element component from the list specified in the template .
val	value
Sets or gets the value of the object to bind to the form.
submit	action, target, method
Submits the form.
getComponentByName	name
Gets a form input element by name. /* tslint:disable / import as React from 'react'; import * as ReactDOM from 'react-dom'; import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css'; import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform'; class App extends React.PureComponent<{}, IFormProps> { private myForm = React.createRef<JqxForm>(); constructor(props: {}) { super(props); this.state = { template: [{ bind: 'textBoxValue', type: 'text', label: 'Text input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'passwordBoxValue', type: 'password', label: 'Password input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { bind: 'numberBoxValue', type: 'number', label: 'Number input', labelPosition: 'left', labelWidth: '30%', align: 'left', width: '250px', required: true }, { name: 'submitButton', type: 'button', text: 'Submit Form Data', align: 'right', padding: { left: 0, top: 5, bottom: 5, right: 40 } }], value: { 'textBoxValue': 'text box value', 'passwordBoxValue': 'password box', 'numberBoxValue': 67.44 } } } public componentDidMount(): void { this.myForm.current!.getComponentByName('submitButton'); } public render() { return ( <JqxForm ref={this.myForm} style={{ width: 450, height: 'auto' }} template={this.state.template} value={this.state.value} /> ); } private onButtonClick(event) { alert('Button Clicked...'); } } ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Properties

Events

Code examples

Code examples

Methods