Skip to content
Docs
API
Samples
Licenses
Forum
Free Trial
Docs
API
Samples
Licenses
Forum
Quick Start
Key Features
GPL vs Pro versions
Configuration
Configuring Columns
Creating Index Columns
Headers and Footers
Rowspans and Colspans
Sizing and Resizing
External Configuration
Localizing DataGrid
Number and Date Formatting
Adding Subrows
Adding Subviews
Frozen Rows in DataGrid
Split Mode or "Frozen" Columns/Rows
Tooltips
Header Menu
Keyboard Navigation
Drag-and-drop with DataGrid
Operations with Data
Loading Data into DataGrid: Overview
Loading from XML, CSV, JSArray
Converting HTML Table to DataGrid
Loading from Database
Loading Big Datasets (Dynamic)
Loading Screen
Loading Configuration
Examples of Data Formats
Data Mapping
Copy-Pasting DataGrid Data
Filtering
Sorting
Editing
Math Operations
Paging with DataGrid
Selection in DataGrid
Area Selection in DataGrid
Checkbox and Radio in DataGrid
Getting/Setting Cell Value
Styling
Styling DataGrid
Styling Columns
Styling Rows
Styling Cells
Styling Header
Cells Templates
Templates. Syntax
Using Sparklines in DataGrid
CSS Maps
DataGrid Skins
DataGrid API
Overview
Events Handling
Methods
add
addCellCss
addCss
addRowCss
addSelectArea
addSpan
adjust
adjustColumn
adjustRowHeight
attachEvent
blockEvent
callEvent
clearAll
clearCss
clearSelection
clearValidation
closeSub
collectValues
columnId
copy
count
define
destructor
detachEvent
disable
eachColumn
eachRow
edit
editCancel
editCell
editColumn
editNext
editRow
editStop
enable
exists
filter
filterByAll
find
focusEditor
freezeRow
getAllSelectAreas
getColumnConfig
getColumnIndex
getColumns
getCss
getEditState
getEditor
getEditorValue
getFilter
getFirstId
getFooterNode
getHeaderContent
getHeaderNode
getIdByIndex
getIndexById
getItem
getItemNode
getLastId
getNextId
getNode
getPage
getPager
getPrevId
getScrollState
getSelectArea
getSelectedId
getSelectedItem
getSpan
getSpanNode
getState
getSubView
getText
getVisibleCount
group
hasCss
hasEvent
hide
hideColumn
hideOverlay
ignoreUndo
isColumnVisible
isEnabled
isSelected
isVisible
load
loadNext
locate
mapCells
mapSelection
markSorting
move
moveBottom
moveColumn
moveDown
moveSelection
moveTop
moveUp
openSub
parse
refresh
refreshColumns
refreshFilter
refreshSelectArea
registerFilter
remove
removeCellCss
removeCss
removeRowCss
removeSelectArea
removeSpan
removeUndo
render
resize
resizeSubView
scrollTo
select
selectAll
selectRange
serialize
setColumnWidth
setPage
setRowHeight
setState
show
showCell
showColumn
showColumnBatch
showItem
showItemByIndex
showOverlay
sort
unblockEvent
undo
ungroup
unselect
unselectAll
updateItem
validate
validateEditor
waitSave
Properties
areaselect
autoConfig
autoheight
autowidth
blockselect
borderless
checkboxRefresh
clipboard
columnWidth
columns
container
css
data
dataFeed
datafetch
datathrottle
datatype
delimiter
disabled
drag
dragColumn
dragscroll
editMath
editable
editaction
externalData
fixedRowHeight
footer
header
headerRowHeight
headermenu
height
hidden
hover
id
keyPressTimeout
leftSplit
liveValidation
loadahead
map
math
maxColumnWidth
maxHeight
maxRowHeight
maxWidth
minColumnWidth
minHeight
minRowHeight
minWidth
mouseEventDelay
multiselect
navigation
on
onClick
onContext
onDblClick
onMouseMove
pager
prerender
ready
removeMissed
resizeColumn
resizeRow
rightSplit
rowHeight
rowLineHeight
rules
save
scheme
scroll
scrollAlignY
scrollX
scrollY
select
sort
spans
subRowHeight
subrow
subview
templateCopy
tooltip
topSplit
type
undo
undoLimit
url
width
yCount
Events
onAfterAdd
onAfterAreaAdd
onAfterAreaRemove
onAfterBlockSelect
onAfterColumnDrop
onAfterColumnDropOrder
onAfterColumnHide
onAfterColumnShow
onAfterContextMenu
onAfterDelete
onAfterDrop
onAfterEditStart
onAfterEditStop
onAfterFilter
onAfterLoad
onAfterRender
onAfterScroll
onAfterSelect
onAfterSort
onAfterUnSelect
onAreaDrag
onBeforeAdd
onBeforeAreaAdd
onBeforeAreaRemove
onBeforeBlockSelect
onBeforeColumnDrag
onBeforeColumnDrop
onBeforeColumnDropOrder
onBeforeColumnHide
onBeforeColumnShow
onBeforeContextMenu
onBeforeDelete
onBeforeDrag
onBeforeDragIn
onBeforeDrop
onBeforeDropOut
onBeforeEditStart
onBeforeEditStop
onBeforeFilter
onBeforeLoad
onBeforeRender
onBeforeSelect
onBeforeSort
onBeforeUnSelect
onBlur
onCheck
onCollectValues
onColumnGroupCollapse
onColumnResize
onDataRequest
onDataUpdate
onDestruct
onDragOut
onEditorChange
onEnter
onFocus
onHeaderClick
onItemClick
onItemDblClick
onItemSingleClick
onKeyPress
onLiveEdit
onLoadError
onLongTouch
onMouseMove
onMouseMoving
onMouseOut
onMoveSelection
onPaste
onResize
onRowResize
onScrollX
onScrollY
onSelectChange
onStructureLoad
onStructureUpdate
onSubViewClose
onSubViewCreate
onSubViewOpen
onSubViewRender
onSwipeX
onSwipeY
onSyncScroll
onTabFocus
onTimedKeyPress
onTouchEnd
onTouchMove
onTouchStart
onValidationError
onValidationSuccess
onViewResize
onViewShow
Others
$customPrint
$drag
$dragHTML
$dragIn
$dragMark
$dragOut
$drop
$dropAllow
$dropHTML
$getSize
$height
$scope
$setNode
$setSize
$tooltipIn
$tooltipMove
$tooltipOut
$touch
$view
$width
config
data
headerContent
name
on_click
on_context
on_dblclick
on_mouse_move
waitData
Auxiliary Resources
Number Formatting Methods
Date Formatting Methods
$width
the current width of a datagrid
let
$width
:
number
Example
Section titled “Example”
var
width
=
mygrid
.
$width
;
Details
Section titled “Details”