-
Config
- barHeight
-
bbar
- bbarHeight
-
buttons
- buttonsHeight
- cellHeaderHeight
- cellHeight
- cellStylingCls
- cellTrackOver
- cellWrapper
- clicksToEdit
- cls
- columnClickData
- columnLines
-
columns
- align
- autoHeight
- cellAlign
- cellTip
- cls
- columns
-
data
- displayKey
- draggable
- editable
- ellipsis
-
filter
- flex
- format
- headerCheckBox
- headerClickSort
- headerCls
- headerCellTip
- hidden
- index
- itemCheckBox
-
items
- leftTpl
- leftWidth
- listItemTpl
- lockable
- locked
- maxWidth
- menu
- minEditorWidth
- minListWidth
- minWidth
- multiSelect
- render
- resizable
- rightLocked
- rowdrag
- searchable
- select
- selectable
- sortable
- sorter
- sparkConfig
- spin
- step
- subSearch
- summary
- title
- titleEditable
- type
- valueKey
- values
- vtype
- width
- controllers
- columnTrackOver
- contextmenu
-
data
- defaults
- dirtyEnabled
- draggable
- doubleHorizontalScroll
- emptyText
-
events
- beforeedit
- cellclick
- celldblclick
- cellenter
- cellleave
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- deselectrow
- dragrows
- dropitems
- filter
- init
- insert
- headercellclick
- headercellenter
- headercellleave
- load
- lockcolumn
- remove
- rowclick
- rowdblclick
- rowenter
- rowleave
- select
- selectrow
- servererror
- set
- scope
- sort
- unlockcolumn
- update
-
expander
- exporter
-
filter
- flexScrollSensitive
-
footer
-
gridToGrid
-
grouping
- height
- id
- i18n
-
lang
- cancel
-
date
- decimalSeparator
- dragText
- loadingText
- no
- paging
- loadMask
- minHeight
- minWidth
- modal
- multiSort
- multiSortLimit
- nativeScroller
- paging
- renderOuter
- renderTo
- resizable
- rowEdit
- rowDragDrop
- rowLines
- searching
- selModel
- shadow
- singleExpand
- state
- startEditByTyping
- stateful
- stateId
- striped
- subTBar
- allowToggle
- action
- cls
- data
- disabled
- displayKey
- editable
- emptyText
- enableToggle
- events
- format
- handler
- hidden
- id
- imageCls
- inputHeight
- itemCheckBox
- leftTpl
- leftWidth
- max
- menu
- minListWidth
- multiSelect
- multiToggle
- paramsMenu
- paramsText
- pressed
- spin
- step
- subSearch
- text
- tip
- toggleGroup
- type
- valueKey
- vtype
- width
- subTBarHeight
- subTitle
- summary
- tabScrollStep
- tbar
- action
- allowToggle
- cls
- data
- disabled
- displayKey
- editable
- emptyText
- enableToggle
- events
- format
- handler
- hidden
- id
- imageCls
- inputHeight
- itemCheckBox
- leftTpl
- leftWidth
- max
- menu
- min
- minListWidth
- multiSelect
- multiToggle
- paramsMenu
- paramsText
- pressed
- spin
- step
- subSearch
- text
- tip
- toggleGroup
- type
- valueKey
- vtype
- width
- tbarHeight
- textSelection
- theme
- title
- Columns
- Events
- beforeedit
- cellclick
- celldblclick
- cellenter
- cellleave
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- contextmenu
- deselectrow
- dragrows
- dropitems
- filter
- init
- insert
- headercellclick
- headercellenter
- headercellleave
- load
- lockcolumn
- remove
- rowclick
- rowdblclick
- rowenter
- rowleave
- select
- selectrow
- servererror
- set
- sort
- statechange
- unlockcolumn
- update
- Methods
- add
- addChild
- addColumn
- addFilter
- clearData
- clearDirty
- clearFilter
- clearSelection
- collapse
- collapseAll
- copy
- deSelectRow
- destroy
- disableSelection
- each
- editCell
- enableSelection
- expand
- expandAll
- exportToCSV
- exportToExcel
- find
- findItem
- firstPage
- flashCell
- flashRow
- get
- getById
- getCell
- getChanges
- getColumn
- getColumns
- getData
- getDataAsCSV
- getDataFiltered
- getDataView
- getHeaderCell
- getPage
- getPages
- getPageSize
- getRowById
- getSelection
- getSubTitle
- getTitle
- getTotal
- getViewTotal
- insert
- isLoading
- hide
- hideBar
- hideColumn
- hideLoadMask
- insert
- lastPage
- load
- lockColumn
- nextPage
- on
- once
- prevPage
- redo
- remove
- removeAll
- removeAt
- removeColumn
- removeRow
- removeRowById
- rightLockColumn
- save
- scroll
- scrollToRow
- search
- selectCell
- selectCellDown
- selectCellLeft
- selectCellRight
- selectCellUp
- selectColumn
- selectRow
- set
- setById
- setColumnTitle
- setColumnWidth
- setData
- setHeight
- setPage
- setPageSize
- setParams
- setSelModel
- setSubTitle
- setTitle
- setTrackOver
- setUrl
- setWidth
- show
- showAt
- showBar
- showColumn
- showLoadMask
- sort
- stopEditor
- stopSelection
- un
- undo
- undoAll
- unLockColumn
- update
- updateFilters
number
Number column type
Example
columns: [{ ... index: 'age', title: 'Age', type: 'number' ...
align
StringColumn header cell align.
... columns: [{ type: 'image', title: 'Photo', index: 'src', width: 80, align: 'center' },{ ...
left cellAlign
StringColumn cell align.
... columns: [{ type: 'image', title: 'Photo', index: 'src', width: 80, cellAlign: 'center' },{ ...
left cellTip
MixedColumn cell tooltip.
... columns: [{ type: 'number', width: 75, align: 'center', cellAlign: 'center', cellTip: '{title} sold {value}<br> items on {day}' },{ ...
... columns: [{ type: 'number', width: 75, align: 'center', cellAlign: 'center', cellTip: function(o){ if(!o.value){ return false; } return o.value; } },{ ...
If cellTip is function that it should return cell tip text, if it returns false than tip will not be shown.false cls
StringColumn css className.
.photo img { width: 80px; margin-top: -5px; margin-left: -10px; } ... columns: [{ type: 'image', title: 'Photo', index: 'src', width: 80, cls: 'photo' },{ ...
columnMenu
BooleanEnable/disable column for menu.
columns: [{ title: 'Company', index: 'name', columnMenu: false, type: 'string', width: 200, }, { text: 'Stock Price', columns: [{ title: 'Price', index: 'price' }, { title: 'Change', index: 'change', render: renderChangesFn }, { title: '% Change', index: 'pctChange', render: renderChangesFn }] }, { title: 'Last Updated', index: 'lastChange', type: 'string', width: 97 }] ...
undefined draggable
BooleanAllows column to be dragged.
draggable: true,
false editable
BooleanEnable column editing.
{ type: 'string', width: 65, title: 'Name', index: 'name', editable: true }
False flex
NumberAuto-calc column width by fitting available width.
If to set one column to
1
than column width will fit to available grid width.If to set one column to
1
and another to2
than available width will be divided on 3.columns: [{ index: 'company', title: 'Company' },{ index: 'name', title: 'Name', sortable: true },{ index: 'surname', title: 'Sur Name' },{ index: 'age', title: 'Age', type: 'number', width: 50 },{ index: 'education', title: 'Education', flex: 1 }]
format
MixedFormatting.
{ type: 'number', width: 65, title: 'amount', index: 'amount', format: 'number' }
headerClickSort
BooleanIt is used only for columns that are sortable.
It prevents sorting by click on column header cell.
It is used for sorting outside of grid over grid API.{ index: 'company', type: 'string', title: 'Company', sortable: true, headerClickSort: false } ... grid.sort('company', 'asc');
undefined headerCls
StringIt is used only for checkbox column type.
Configure as true to display a checkbox below the header text.
Clicking the checkbox will check/uncheck all records.{ index: 'company', type: 'string', title: 'Company', headerCls: 'header-cell-company' }
undefined hidden
BooleanHide column on start.
{ index: 'married', resizable: true, type: 'checkbox', title: 'Married', width: 100, hidden: true }
false index
String|NumberData index.
{ type: 'string', width: 65, title: 'Name', index: 'name', editable: true }
lockable
BooleanEnable/disable column locking.
locked: false,
true locked
BooleanLocking column.
{ type: 'string', width: 65, title: 'Name', index: 'name', locked: true }
False maxWidth
NumberThe maximum width of column.
maxWidth: 150,
menu
MixedEnables column menu.
menu: true,
Example: Custom Default menu
menu: ['sort', '-', 'columns', '-', 'lock'],
Example: Custom menu
menu: ['columns', '-', { text: 'Hi', handler: function(){ alert('Hi'); } }],
Example: One menu with columns only
menu: 'columns',
false minWidth
NumberThe minimum width of column.
minWidth: 80,
render
FunctionColumn render function.
Before grid cell will be updated with it's value, function render runs if it exist. Function render is mainly used for some not standard styling or formatting of cell value..
render: function(o){ if(o.value < 0){ o.style = { color: '#E46B67' }; } else{ o.style = { color: '#65AE6E' }; } o.value = o.value + '%'; return o; }
resizable
BooleanEnable resizing of column.
resizable: true,
False rightLocked
BooleanLocking column to right side.
{ type: 'string', width: 65, title: 'Name', index: 'name', rightLocked: true }
False sortable
BooleanEnable column sorting.
sortable: true,
False sorter
FunctionEnable custom column sort.
}, { index: 'age', width: 60, title: 'Age', sorter: function(dir, a, b) { switch (dir) { case 'asc': if (a === '') { return -1; } return a - b; case 'desc': if (b === '') { return -1; } return b - a; } return; }, type: 'number' }, {
undefined spin
BooleanEnable a pair of up/down spinner buttons. It is used only for
number
column.columns: [{ .. title: 'Salary', index: 'salary', type: 'number', spin: true, step: 1000, min: 0, max: 150000, format: { inputFn: salaryInputFn } ...
step
Numberincrement/decrement value for
number
column ifspin
is truecolumns: [{ .. title: 'Salary', index: 'salary', type: 'number', spin: true, step: 1000, min: 0, max: 150000, format: { inputFn: salaryInputFn } ...
1 summary
MixedEnables
summary
for column.
Also requiressummary
property for core object.Enables summary for column.
Also requires to enable propertysummary
for core object.
Possible values:
average
- Gets the average value in the column.
count
- Gets the count of rows in column.
min
- Gets the minimum value in the column.
max
- Gets the maximum value in the column.
sum
- Sums the column values.
new FancyGrid({ ..., summary: true, columns: [{ ..., summary: 'sum' },{
Example: summary row position
new FancyGrid({ ..., summary: { position: 'bottom' }, columns: [{ ..., summary: 'sum' },{
Example: handler
new FancyGrid({ ..., summary: { position: 'bottom' }, columns: [{ ..., summary: function(){ return 'Total' } },{
Example: object
new FancyGrid({ ..., summary: { position: 'bottom' }, columns: [{ ..., summary: { type: 'count', fn: function(value){ return '' + value + ''; } } },{
undefined title
StringColumn title.
{ type: 'string', width: 65, title: 'Name', index: 'name' }
'' titleEditable
StringEnables column title editing by double click on text.
{ type: 'string', width: 65, title: 'Name', titleEditable: true, index: 'name' }
false type
StringColumn type.
{ index: 'married', title: 'Married', type: 'checkbox' }
vtype
MixedValidation.
},{ index: 'age', title: 'Age', width: 50, type: 'number', vtype: { before: ['notempty', 'notnan'], type: 'range', min: 20, max: 70 } }]
},{ index: 'email', title: 'Email', width: 150, vtype: 'email' },{
width
Numbercolumn width.
{ type: 'action', width: 65, items: [{ text: 'Delete', cls: 'action-column-remove', action: 'remove' }] }