Fields

Fields types

checkbox, combo, date, hidden, html, line, number, password, radio, set, string, tab, textarea.

checkbox

Boolean

checkbox field type.


items: [{
...
},{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

combo

Mixed

combo field type.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...

date

String

date field type.


items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  value: new Date()

emptyText

String

Placeholder text.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  emptyText: 'Write your age',
},{
...

hidden

Mixed

hidden field type.


items: [{
  type: 'hidden',
  name: 'param',
  value: true
},{
...

html

String

html field type.


items: [{
  type: 'html',
  value: [
    '<b>Kia Sportage</b><br>',
    '<img src="img/kia-sportage.png">'
  ].join("")
},{
...

line

line field type.


items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

number

Number

number field type.


items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
...

password

Mixed

password field type.


items: [{
  label: 'Pass',
  name: 'pass',
  type: 'password'
...

radio

Mixed

radio field type.


items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

set

set field type.



items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    inputWidth: 180,
    labelWidth: 90,
  },
  items: [{
    type: 'string',
    label: 'Login',
    emptyText: 'Login',
    name: 'login'
  },{
    type: 'password',
    label: 'Password',
    emptyText: 'Password',
    name: 'password'
  }]
},{
...

string

String

string field type.


items: [{
  type: 'string',
  label: 'Name',
  name: 'name',
...

tab

String

tab field type.


activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

textarea

Array

textarea field type.


items: [{
  label: 'About',
  type: 'textarea',
  name: 'about',
  emptyText: 'About'
...

defaults

All listed properties can be auto set to columns if they do not already exist.

defaults

Object

Defaults fields properties.


defaults: {
  type: 'string'
},

All field configs

column

Boolean

It is used only for radio field.
Placing radio elements in column.


...
items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...
false

data

Array

It is used only for combo field.
Combo values.


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
    {index: 0, country: 'USA'},
    {index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0,
  events: [{
    change: function(field, value){
      
    }
  }]
},{
...

countries.json
{
  "data": [
    {"index": 0, "country": "Canada"},
    {"index": 1, "country": "Finland"},
    {"index": 2, "country": "France"},
    {"index": 3, "country": "Japan"},
    {"index": 4, "country": "UK"},
    {"index": 5, "country": "USA"}
  ]
}

defaults

Object

It is used only for fields: radio, set, tab .


items: [{
  type: 'set',
  label: 'User Info',
  checkbox: true,
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',    
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
...

disabled

Boolean

Disable field.


items: [{
  label: 'Name',    
  name: 'name',
  disabled: true
},{
...
//Enable field
field.enable();

//Disable field
field.disable();

displayKey

String

Combo data key to display.
It is used only for combo field.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: [
	{index: 0, country: 'USA'},
	{index: 1, country: 'Canada'}
  ],
  displayKey: 'country',
  valueKey: 'index',
  value: 0
}]
...

events

Array

Set event handler to field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  events: [{
    change: function(){
      
    }
  }]
},{
...

format

Object

Formatting fields.


...
items: [{
  type: 'date',
  label: 'Birthday',
  name: 'birthday',
  emptyText: 'm.d.Y',
  format: {
    read: 'm.d.Y',
    write: 'm.d.Y',
    edit: 'm.d.Y'
  }
...

...
items: [{
  type: 'number',
  label: 'Salary',
  name: 'salary',
  emptyText: '$80,000',
  format: {
    inputFn: function salaryInputFn(value){
      value = value.toString().replace('$', '').replace(/\,/g,'').replace('-', '').replace('.', '');
        
      if(value.length === 0){
        value = '';
      }     
      else if(value.length > 6){
        value = value.substr(0, 6);
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      else{
        value = '$' + value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
      
      return value;
    }
  }
...

inputLabel

String

An optional text label that will appear next to the checkbox.


...
items: [{
  inputLabel: 'Remember me?',
  type: 'checkbox',
  width: 336,        
  name: 'remember',
  value: true
},{
...

items

Array

It is used for fields: line, set, tab.

Line field

items: [{
  type: 'line',
  defaults: {
    labelAlign: 'top'
  },
  items: [{
    type: 'string',
    label: 'Name',
    emptyText: 'Name',
    name: 'name'
  },{
    type: 'string',
    label: 'SurName',
    emptyText: 'SurName',
    name: 'surname'
  }]
}]
...

Radio field

items: [{
  type: 'radio',
  label: 'Favorite car brand?',
  name: 'brand',
  value: 'kia',
  items: [{
    text: 'KIA',
    value: 'kia'
  },{
    text: 'Honda',
    value: 'honda'
  },{
    text: 'Land Rover',
    value: 'lr'
  },{
    text: 'Toyota',
    value: 'toyota'
  }]
},{
...

Tab field

activeTab: 0,
items: [{
  type: 'tab',
  defaults: {
    type: 'string'
  },
  items: [{
    label: 'Name',
    name: 'name'
  },{
    label: 'SurName',
    name: 'surname'
  }]
},{
  type: 'tab',
  items: [{
    type: 'number',
    label: 'Age',
    name: 'age'
  },{
    type: 'checkbox',
    label: 'Married',
    name: 'married'
  }]
},{
  type: 'tab',
  items: [{
    type: 'combo',
    label: 'Country',
    name: 'country',
    data: [
      {index: 0, country: 'USA'},
      {index: 1, country: 'Canada'}
    ],
    displayKey: 'country',
    valueKey: 'index',
    value: 0
  },{
    type: 'textarea',
    inputWidth: 250,
    height: 110,
    emptyText: 'About',
    label: false,
    name: 'about'
  }]
}],
...

itemCheckBox

Boolean

Adds checkboxes for filter combo list.


},{
  type: 'combo',
  label: 'Country',
  name: 'country',
  multiSelect: true,
  itemCheckBox: true,
  data: [{
	index: 0,
	country: 'USA'
  }, {
	index: 1,
	country: 'Canada'
  }],
  displayKey: 'country',
  valueKey: 'index'
},{
true

inputHeight

Number

Field input height. It influence only on fields with input element inside.


...
items: [{
  label: 'Salary',
  type: 'number',
  name: 'salary',
  inputHeight: 35
},{
...

label

String/Boolean

Text of field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true
},{
...

labelAlign

String

Align of label.

Values: right, left, top..


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...
left

minListWidth

Number

The minimum width of list for combo.
When field is not wide but values in list are long than for better look
it is possible to set minListWidth


minListWidth: 150,

multiSelect

Boolean

Enables multiSelect for combo.


},{
  type: 'combo',
  label: 'Country',
  name: 'country',
  multiSelect: true,
  itemCheckBox: true,
  data: [{
	index: 0,
	country: 'USA'
  }, {
	index: 1,
	country: 'Canada'
  }],
  displayKey: 'country',
  valueKey: 'index'
},{

name

String

Name of field over which it is possible to get value of field.


...
items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
},{
...

spin

Boolean

Enable a pair of up/down spinner buttons.
It is used only for number field.


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...

step

Number

increment/decrement value for number field if spin is true


items: [{
  label: 'Salary',
  name: 'salary',
  value: 70000,
  spin: true,
  step: 1000,
  type: 'number',
  min: 0,
  max: 150000,
...
1

type

String

Type of field.


{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
}

value

Mixed

Value of field.


items: [{
  label: 'Married',
  type: 'checkbox',
  name: 'married',
  value: true,
  labelAlign: 'right'
...

valueKey

String

Combo data key to associate as value.


items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: comboData,
  displayKey: 'country',
  valueKey: 'index',
  value: 0
...

vtype

Mixed

Validation.


},{
  name: 'age',
  label: 'Age',
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'max',
    param: 70
  }
}]

},{
  name: 'email',
  label: 'Email',
  vtype: 'email'
},{

Default


[]