FancyGrid Documentation

Docs

API

Fields

Fields types

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

button

button field type.


items: [{
...
},{
  label: 'Label',
  type: 'button',
  name: 'button',
  buttonText: true
},{
...

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

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'
  }]
},{
...

segbutton

^String

segmented button field type.


items: [{
...
},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...

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',
...

switcher

^Boolean

switcher field type.


items: [{
  type: 'switcher',
  label: 'Active',
  name: 'active',
  value: true
...

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

allowToggle

^Boolean

It is used only for segbutton field.
It enables toggle.


...
items: [{
  label: 'Military',
  type: 'segbutton',
  name: 'military',
  items: [{
    text: 'Yes',
    value: 'yes'
  },{
    text: 'No',
    pressed: true,
    value: 'no'
  }]
},{
...

true

cls

^String

The CSS class that will be added to field.
It is used for custom styling field.


items: [{
  type: 'string',
  label: 'Name',
  cls: 'field-name'
},{
...
}]

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

columns

^Number

It is used only for radio field.
It defines number of columns to place radio-s.


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

undefined

data

^Mixed

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){
      
    }
  }]
},{
...


...
items: [{
  type: 'combo',
  label: 'Country',
  name: 'country',
  data: {
    proxy: {
      url: 'countries.json'
    }
  },
  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
}]
...

editable

^Boolean

It is used only for combo field.
It enables editing combo field value.


...
items: [{
  label: 'Text',
  displayKey: 'valueText',
  valueKey: 'index',
  editable: false,
  data: [{
    index: "AL",
    valueText: "Alabama"
  },{
    index: "AK",
    valueText: "Alaska"
...

true

emptyText

^String

Placeholder text.


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

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

hidden

^Boolean

If set to true than field is hidden.


tbar: [{
  type: 'number',
  id: 'employee',
  hidden: true,
  value: 1
},{
...
}]

id

^String

If to set id, it will be possible to get link on widget over Fancy.getWidget.


tbar: [{
  type: 'number',
  id: 'employee',
  value: 1
},{
...
}] 

...
var numberField = Fancy.getWidget('employee'),
  newValue = numberField.get() + 2;

numberField.set(newValue);

items

^Array

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

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'
  }]
}],
...

SegButton field


},{
  label: 'Education',
  type: 'segbutton',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{

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

max

^Number|Date

Maximum value.


...
items: [{
  type: 'number',
  label: 'Age',
  name: 'age',
  min: 0
  min: 100
},{
...


...
items: [{
  type: 'sale',
  label: 'Sale',
  name: 'sale',
  max: new Date() //today
},{
...

undefined

maxListRows

^Number

Max number of row in list.
This property is used only for combo field.


maxListRows: 7,

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'
},{

multiToggle

^Boolean

It is used only for segbutton field.
Enables multi toggle.


...
items: [{
  label: 'Education',
  type: 'segbutton',
  name: 'education',
  multiToggle: true,
  items: [{
    text: 'Bachelor'
  },{
    text: 'Master',
    pressed: true
  },{
    text: 'PhD',
    pressed: true
  },{
    text: 'Doctor'
  }]
},{
...

true

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,
...

subSearch

^Boolean

Enables search field in list with values.
This property disables editable property.
It is used only for combo type.


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

tabIndex

^Number

Sets a DOM tabIndex for this field.
tabIndex may be set to -1 in order to remove the field from the tab rotation.
Available for fields with input.


{
  label: 'Age',
  type: 'number',
  name: 'age',
  tabIndex: 2
}

undefined

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
...