React UI Components Documentation

/* 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);

/* 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);

/* 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);

/* 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);

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);

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);

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);

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);

/* 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);

/* 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);

Sets or gets the value of the object to bind to the form.

Submits the form.

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);