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