Docs
API
-
Config
- barHeight
-
bbar
-
buttons
- cellHeaderHeight
- cellHeight
- cellTrackOver
- cellWrapper
- clicksToEdit
- cls
- columnClickData
- columnLines
-
columns
- align
- cellAlign
- cellTip
- cls
- columns
-
data
- displayKey
- draggable
- editable
- ellipsis
-
filter
- flex
- format
- headerCheckBox
- hidden
- index
- itemCheckBox
-
items
- lockable
- locked
- maxWidth
- menu
- minListWidth
- minWidth
- multiSelect
- render
- resizable
- rightLocked
- searchable
- sortable
- sparkConfig
- spin
- step
- summary
- title
- type
- valueKey
- values
- vtype
- width
- controllers
- columnTrackOver
-
data
- defaults
- dirtyEnabled
- draggable
- emptyText
-
events
-
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
- renderTo
- resizable
- rowEdit
- rowDragDrop
- rowLines
- searching
- selModel
- shadow
- singleExpand
- state
- stateful
- striped
- subTBar
- subTitle
- summary
- tbar
- textSelection
- theme
- title
- Columns
- Events
- Methods
- add
- addChild
- addColumn
- addFilter
- clearFilter
- clearSelection
- collapse
- collapseAll
- copy
- deSelectRow
- destroy
- disableSelection
- each
- enableSelection
- expand
- expandAll
- exportToExcel
- find
- findItem
- firstPage
- flashCell
- flashRow
- get
- getById
- getData
- getDataFiltered
- getDataView
- getPage
- getPages
- getPageSize
- getRowById
- getSelection
- getSubTitle
- getTitle
- getTotal
- getViewTotal
- insert
- hide
- hideColumn
- hideLoadMask
- lastPage
- load
- nextPage
- on
- once
- prevPage
- redo
- remove
- removeAll
- removeAt
- removeColumn
- removeRow
- removeRowById
- save
- scroll
- scrollToRow
- search
- selectRow
- selectColumn
- set
- setById
- setData
- setHeight
- setPage
- setPageSize
- setParams
- setSelModel
- setSubTitle
- setTitle
- setTrackOver
- setWidth
- show
- showColumn
- showLoadMask
- sort
- stopEditor
- stopSelection
- un
- undo
- undoAll
- update
theme
Mixed
In FancyGrid there are several themes:
blue
,bootstrap
,dark
,default
,gray
,dark
,sand
.Example
To override some styling it requires to change size values and css values.theme: 'gray'
Example
.fancy-theme-gray .fancy-grid-cell { color: gray; } ... theme: { name: 'gray', config: { cellHeight: 92, titleHeight: 65 } }
To do absolutely new theme it needs:
To define it over
FancyGrid.defineTheme
Example
.fancy-theme-my .fancy-grid-cell { color: #888888; } ... FancyGrid.defineTheme('my', { config: { cellHeaderHeight: 30, cellHeight: 32, titleHeight: 42, barHeight: 37, bottomScrollHeight: 12 } });
Borders
The most complex issue about theme is borders widths.
There are 3 borders params that need to know for that.
gridBorders
,gridWithoutPanelBorders
,panelBodyBorders
.Example
gridBorders: [0,1,1,1], gridWithoutPanelBorders: [1,1,1,1], panelBodyBorders: [0,0,0,0]
Default
'default'