-
Config
- barHeight
-
bbar
- bbarHeight
- bbarHidden
-
buttons
- buttonsHeight
- buttonsHidden
- cellHeaderHeight
- cellHeight
- cellStylingCls
- cellTrackOver
- cellWrapper
- clicksToEdit
- cls
- columnClickData
- columnLines
-
columns
- autoWidth
- align
- autoHeight
- cellAlign
- cellTip
- cls
- columns
-
data
- disallowAfterDrop
- displayKey
- draggable
- editable
- ellipsis
- exportFn
- exportable
-
filter
- flex
- format
- headerCheckBox
- headerClickSort
- headerCls
- headerCellTip
- headerLImageCls
- hidden
- id
- index
- itemCheckBox
-
items
- leftTpl
- leftWidth
- listItemTpl
- lockable
- locked
- maxWidth
- menu
- minEditorWidth
- minListWidth
- minWidth
- multiSelect
- precision
- render
- resizable
- rightLocked
- rowdrag
- searchable
- select
- selectable
- smartIndexFn
- sortable
- sorter
- sparkConfig
- spin
- step
- subSearch
- summary
- title
- titleEditable
- type
- valueKey
- values
- vtype
- width
- controllers
- columnTrackOver
- contextmenu
-
data
- defaults
- dirtyEnabled
- draggable
- droppable
- dropZone
- dropZoneFn
- doubleHorizontalScroll
- emptyText
-
events
- activate
- beforeedit
- beforeendedit
- cellclick
- celldblclick
- cellenter
- cellleave
- change
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- deactivate
- delay
- deselectrow
- dragrows
- dropitems
- endedit
- filter
- init
- insert
- headercellclick
- headercellenter
- headercellleave
- load
- lockcolumn
- remove
- rowclick
- rowdblclick
- rowenter
- rowleave
- select
- selectrow
- servererror
- set
- scope
- sort
- startedit
- unlockcolumn
- update
-
expander
- exporter
-
filter
- flexScrollSensitive
-
footer
-
gridToGrid
-
grouping
- height
- id
- infinite
- i18n
-
lang
- autoSizeColumn
- autoSizeColumns
- cancel
- columns
-
date
- decimalSeparator
- dragText
- loadingText
- lock
- no
- paging
- loadMask
- minHeight
- minWidth
- modal
- multiSort
- multiSortLimit
- nativeScroller
- paging
- renderOuter
- renderTo
- resizable
- rowEdit
- 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
- subTBarHidden
- subHeaderFilter
- 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
- tbarHidden
- textSelection
- theme
- title
- Columns
- Events
- activate
- beforeedit
- beforeendedit
- cellclick
- celldblclick
- cellenter
- cellleave
- change
- changepage
- changepagesize
- columnclick
- columndblclick
- columndrag
- columnenter
- columnhide
- columnleave
- columnshow
- columnresize
- columntitlechange
- contextmenu
- deactivate
- deselectrow
- dragrows
- dropitems
- endedit
- filter
- init
- insert
- headercellclick
- headercellenter
- headercellleave
- load
- lockcolumn
- remove
- rowclick
- rowdblclick
- rowenter
- rowleave
- select
- selectrow
- servererror
- set
- sort
- startedit
- statechange
- unlockcolumn
- update
- Methods
- add
- addChild
- addColumn
- addEvent
- addFilter
- addGroup
- autoSizeColumns
- clearData
- clearDirty
- clearFilter
- clearGroup
- clearSelection
- collapse
- collapseAll
- collapseGroup
- copy
- deSelectRow
- destroy
- disableSelection
- each
- editCell
- enableSelection
- expand
- expandAll
- expandGroup
- exportToCSV
- exportToExcel
- find
- findItem
- fire
- firstPage
- flashCell
- flashRow
- get
- getById
- getCell
- getChanges
- getColumn
- getColumnById
- getColumns
- getData
- getDataAsCSV
- getDataFiltered
- getDataView
- getFilter
- getHeaderCell
- getHeight
- getPage
- getPages
- getPageSize
- getRowById
- getSelection
- getSorter
- getSubTitle
- getTitle
- getTotal
- getViewTotal
- getWidth
- hide
- hideBar
- hideColumn
- hideLoadMask
- isDirty
- isLoading
- 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
- setColumnComboData
- setColumns
- setColumnTitle
- setColumnWidth
- setData
- setHeight
- setPage
- setPageSize
- setParams
- setSelModel
- setSubTitle
- setTitle
- setTrackOver
- setUrl
- setWidth
- show
- showAt
- showBar
- showColumn
- showLoadMask
- sort
- stopEditor
- stopSelection
- toggleCollapse
- toggleExpand
- un
- undo
- undoAll
- unLockColumn
- update
- updateFilters
order
Order column type
Order column. It does numbered rows.
Example
columns: [{ ... },{ type: 'order', locked: true },{ ...
align
StringColumn header cell align.
... columns: [{ type: 'order', title: 'N', align: 'right' },{ ...
left cellAlign
StringColumn cell align.
... columns: [{ type: 'image', title: 'Photo', index: 'src', width: 80, cellAlign: 'center' },{ ...
right cls
StringColumn css className.
.my-order { background-color: #ccc; } ... columns: [{ type: 'order', cls: 'my-order' },{ ...
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 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 headerLImageCls
StringIn column header cell there is inactive left to title image.
If to set css class name than this image will become active..phone { display: inline-block; width: 19px; height: 16px; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6.2223%2C2.8573%20C6.4953%2C3.1303%206.4953%2C3.5723%206.2223%2C3.8453%20L5.2333%2C4.8333%20C4.9603%2C5.1063%205.0863%2C5.4653%205.2333%2C5.8213%20C5.5833%2C6.6653%206.3453%2C7.5103%207.4163%2C8.5813%20C8.6103%2C9.7763%209.3313%2C10.3323%2010.1753%2C10.7653%20C10.5193%2C10.9413%2010.8913%2C11.0383%2011.1633%2C10.7653%20L12.1523%2C9.7783%20C12.4253%2C9.5053%2012.8673%2C9.5053%2013.1403%2C9.7783%20L15.1173%2C11.7563%20C15.3903%2C12.0293%2015.3903%2C12.4713%2015.1173%2C12.7443%20L13.0653%2C14.7953%20C12.8233%2C15.0373%2012.4423%2C15.0683%2012.1643%2C14.8693%20C12.1643%2C14.8693%208.1363%2C13.6693%205.2333%2C10.7653%20C2.2063%2C7.7373%201.1303%2C3.8303%201.1303%2C3.8303%20C0.9313%2C3.5523%200.9633%2C3.1713%201.2043%2C2.9303%20L3.2573%2C0.8793%20C3.5303%2C0.6063%203.9723%2C0.6063%204.2453%2C0.8793%20L6.2223%2C2.8573%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; position: absolute; left: 2px; top: 7px; } ... },{ type: 'string', headerLImageCls: 'phone', cellAlign: 'right', sortable: false, title: 'Phone', index: 'phone' },{
undefined hidden
BooleanHide column on start.
{ index: 'married', resizable: true, type: 'checkbox', title: 'Married', width: 100, hidden: true }
false id
StringColumn id was added to solve cases when column does not have data index or data index is repeated on several columns.
If column id is not provided that it will be auto generated on base of column data index or random value.columns: [{ type: 'string', title: 'Name', index: 'name', id: 'name', width: 80, align: 'center' },{
Auto generation. lockable
BooleanEnable/disable column locking.
locked: false,
true locked
BooleanLocking column.
{ type: 'order', width: 65, 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: 'order', width: 65, rightLocked: true }
False title
StringColumn title.
{ type: 'order', title: 'N' }
'' titleEditable
StringEnables column title editing by double click on text.
{ type: 'string', width: 65, title: 'Name', titleEditable: true, index: 'name' }
false type
StringColumn type.
{ type: 'type' }
width
Numbercolumn width.
{ type: 'order', width: 65 }