-
Config
- barHeight
-
bbar
- bbarHeight
-
buttons
- buttonsHeight
- cellHeaderHeight
- cellHeight
- cellTrackOver
- cellWrapper
- clicksToEdit
- cls
- columnClickData
- columnLines
-
columns
- align
- autoHeight
- cellAlign
- cellTip
- cls
- columns
-
data
- displayKey
- draggable
- editable
- ellipsis
-
filter
- flex
- format
- headerCheckBox
- hidden
- index
- itemCheckBox
-
items
- leftTpl
- leftWidth
- listItemTpl
- lockable
- locked
- maxWidth
- menu
- minEditorWidth
- minListWidth
- minWidth
- multiSelect
- render
- resizable
- rightLocked
- rowdrag
- searchable
- select
- selectable
- sortable
- sparkConfig
- spin
- step
- subSearch
- summary
- title
- titleEditable
- type
- valueKey
- values
- vtype
- width
- controllers
- columnTrackOver
- contextmenu
-
data
- defaults
- dirtyEnabled
- draggable
- doubleHorizontalScroll
- emptyText
-
events
- cellclick
- celldblclick
- cellenter
- cellleave
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- deselectrow
- dropitems
- filter
- init
- insert
- headercellclick
- 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
- minHeight
- minWidth
- modal
- multiSort
- multiSortLimit
- nativeScroller
- paging
- renderOuter
- renderTo
- resizable
- rowEdit
- rowDragDrop
- rowLines
- searching
- selModel
- shadow
- singleExpand
- state
- 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
- cellclick
- celldblclick
- cellenter
- cellleave
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- contextmenu
- deselectrow
- dropitems
- filter
- init
- insert
- headercellclick
- 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
- enableSelection
- expand
- expandAll
- exportToCSV
- exportToExcel
- find
- findItem
- firstPage
- flashCell
- flashRow
- get
- getById
- getData
- getDataAsCSV
- getDataFiltered
- getDataView
- getHeaderCell
- getPage
- getPages
- getPageSize
- getRowById
- getSelection
- getSubTitle
- getTitle
- getTotal
- getViewTotal
- insert
- hide
- hideBar
- hideColumn
- hideLoadMask
- insert
- lastPage
- load
- lockColumn
- nextPage
- on
- once
- prevPage
- redo
- remove
- removeAll
- removeAt
- removeColumn
- removeRow
- removeRowById
- rightLockColumn
- save
- scroll
- scrollToRow
- search
- selectRow
- selectColumn
- set
- setById
- setColumnTitle
- 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
grossloss
Gross Loss column type
Gross Loss is part of FancyGrid spark module. To config this spark use
sparkConfig
param.Example
columns: [{ ... },{ title: 'Gross/Loss', index: 'change', type: 'grossloss', width: 75, sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, rightLocked: true },{ ...
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 editable
BooleanEnable column editing.
{ type: 'string', width: 65, title: 'Name', index: 'name', editable: true }
False draggable
BooleanAllows column to be dragged.
draggable: 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 }]
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,
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 sparkConfig
ObjectSpark config of module.
sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true },
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: 'grossloss' }
width
Numbercolumn width.
{ type: 'action', width: 65, items: [{ text: 'Delete', cls: 'action-column-remove', action: 'remove' }] }
sparkConfig
grossColor
StringGross spark color.
{ ... type: 'grossloss', sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, ... }
lossColor
StringLoss spark color.
{ ... type: 'grossloss', sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, ... }
percents
BooleanEnables percents mode.
It used for adding sign
%
in tooltip.{ ... type: 'grossloss', sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, ... }
false showOnMax
BooleanChange default maximum value from 100 to max value of column in data.
{ ... type: 'grossloss', sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, ... }
false tipFormat
FunctionToolTip format function
{ width: 550, type: 'hbar', index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'], sparkConfig: { fullStack: true, stacked: true, tipFormat: function(o){ return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%'; }, title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'], legend: { type: 'bbar', style: { 'margin-left': '100px' } } } }
tipTpl
StringChange tooltip template.
{ ... type: 'grossloss', sparkConfig: { grossColor: '#6fb270', lossColor: '#dc6b67', showOnMax: true, percents: true }, tipTpl: 'Value: {value} %' ... }
'<span style="color: {color};">●</span> {value} {suffix}'