Grid API overview

Grid methods

Name	Description
addCellCss()	adds a style to a cell
addRowCss()	adds a style to a row
addSpan()	adds a rows/cols span
adjustColumnWidth()	adjusts the width of a column to make all its content visible
collapse()	collapses a row that contains child rows by id
collapseAll()	collapses all expanded rows that contain child rows
destructor()	removes a Grid instance and releases occupied resources
editCell()	enables editing of a Grid cell
editEnd()	finishes editing in a cell
expand()	expands a row that contains child rows
expandAll()	expands all collapsed rows that contain child rows
getCellRect()	returns the parameters of a cell
getColumn()	returns an object with attributes of a column
getHeaderFilter()	returns an object with a set of methods for the header filter of the specified column
getScrollState()	returns the coordinates of a position a grid has been scrolled to
getSpan()	returns an object with spans
getSummary()	returns an object with the specified calculated values
hideColumn()	hides a column of Grid
hideRow()	hides a row of Grid
isColumnHidden()	checks whether a column is hidden
isRowHidden()	checks whether a row is hidden
paint()	repaints a grid on a page
removeCellCss()	removes a style from a cell
removeRowCss()	removes a style from a row
removeSpan()	removes a cols/rows span
scroll()	scrolls a grid according to specified coordinates
scrollTo()	scrolls a grid to a specified cell
setColumns()	sets configuration for Grid columns
showColumn()	makes a specified column visible on a page
showRow()	makes a specified row visible on a page

important

• Use the methods of DataCollection to work with data.
• Use the methods of TreeCollection to work with data of Grid in the TreeGrid mode.
• Use the methods of the Selection object to work with the selection of Grid cells.
• Use the methods of the RangeSelection module to work with the range selection within Grid.
• Use the methods of the BlockSelection module to work with the block selection within Grid.
• Use the methods of the Export module to work with data export within Grid.
• Use the methods of the History module to work with the history of actions within Grid.

Grid events

Editing

Name	Description
afterCollapse	fires after collapsing a row that contains child rows
afterEditEnd	fires after editing of a cell is ended
afterEditStart	fires after editing of a cell has started
afterExpand	fires after expanding a row that contains child rows
beforeCollapse	fires before collapsing a row that contains child rows
beforeEditEnd	fires before editing of a cell is completed
beforeEditStart	fires before editing of a cell has started
beforeExpand	fires before expanding a row that contains child rows

Mouse

Name	Description
cellClick	fires on click on a grid cell
cellDblClick	fires on double-click on a grid cell
cellMouseDown	fires before releasing the left mouse button when clicking on a grid cell
cellMouseOver	fires on moving the mouse pointer over a grid cell
cellRightClick	fires on the right click on a grid cell
footerCellClick	fires on a click on a grid footer cell
footerCellDblClick	fires on a double-click on a grid footer cell
footerCellMouseDown	fires before releasing the left mouse button when clicking on a grid footer cell
footerCellMouseOver	fires on moving the mouse pointer over a grid footer cell
footerCellRightClick	fires on right click on a grid footer cell
groupPanelItemClick	fires on click on a group panel item
groupPanelItemMouseDown	fires before releasing the left mouse button when clicking on a group panel item
headerCellClick	fires on click on a grid header cell
headerCellDblClick	fires on double-click on a grid header cell
headerCellMouseDown	fires before releasing the left mouse button when clicking on a grid header cell
headerCellMouseOver	fires on moving the mouse pointer over a grid header cell
headerCellRightClick	fires on right click on a grid header cell

Key Navigation and Scroll

Name	Description
afterKeyDown	fires after the user is pressing a shortcut key
beforeKeyDown	fires before the user is pressing a shortcut key
scroll	fires on scrolling a grid

Sort and Filter

Name	Description
afterSort	fires after a column is sorted by clicking on its header
beforeFilter	fires before the filterChange event is called
beforeSort	fires before a column is sorted by clicking on its header
filterChange	fires on typing text in an input of a column's header

Column Drag and Drop

Name	Description
afterColumnDrag	fires after dragging of a column is finished
afterColumnDrop	fires before the user has finished dragging a column but after the mouse button is released
beforeColumnDrag	fires before dragging of a column has started
beforeColumnDrop	fires before the user has finished dragging and released the mouse button over a target column
cancelColumnDrop	fires on moving a mouse pointer out of borders of a column while dragging the column
canColumnDrop	fires when a dragged column is placed over a target column
dragColumnIn	fires when a column is dragged to another potential target
dragColumnOut	fires when a column is dragged out of a potential target
dragColumnStart	fires when dragging of a column has started

Column Hide and Show

Name	Description
afterColumnHide	fires after a column is hidden
afterColumnShow	fires after a column is shown
beforeColumnHide	fires before a column is hidden
beforeColumnShow	fires before a column is shown on a page

Column Resize

Name	Description
afterResizeEnd	fires after resizing of a column is ended
beforeResizeStart	fires before resizing of a column has started
resize	fires on resizing a column

Row Drag and Drop

Name	Description
afterRowDrag	fires after dragging of a row is finished
afterRowDrop	fires before the user has finished dragging a row but after the mouse button is released
beforeRowDrag	fires before dragging of a row has started
beforeRowDrop	fires before the user has finished dragging and released the mouse button over a target row
cancelRowDrop	fires on moving a mouse pointer out of borders of a row while dragging the row
canRowDrop	fires when a dragged row is placed over a target row
dragRowIn	fires when a row is dragged to another potential target
dragRowOut	fires when a row is dragged out of a potential target
dragRowStart	fires when dragging of a row has started

Row Hide and Show

Name	Description
afterRowHide	fires after a row is hidden
afterRowShow	fires after a row is shown on a page
beforeRowHide	fires before a row is hidden
beforeRowShow	fires before a row is shown on a page

Row Resize

Name	Description
afterRowResize	fires after the height of a row is changed
beforeRowResize	fires before the height of a row is changed

important

• Use the events of DataCollection to work with data of Grid.
• Use the events of TreeCollection to work with data of Grid in the TreeGrid mode.
• Use the events of the Selection object to work with the selection of Grid cells.
• Use the events of the RangeSelection module to work with the range selection within Grid.
• Use the events of the BlockSelection module to work with the block selection within Grid.
• Use the events of the Clipboard module to work with clipboard within Grid.
• Use the events of the DragPanel module to work with drag panel within Grid.
• Use the events of the History module to work with the history of actions within Grid.

Grid properties

Name	Description
adjust	Optional. Defines whether the width of columns is automatically adjusted to the width of their content
autoEmptyRow	Optional. Adds an empty row after the last filled row in the Grid
autoHeight	Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment of the header/footer and cells with data
autoWidth	Optional. Makes grid's columns to fit the size of a grid
blockSelection	Optional. Enables/disables the BlockSelection module during the Grid initialization
bottomSplit	Optional. Sets the number of frozen rows from the bottom
clipboard	Optional. Enables/disables the Clipboard module during the Grid initialization
closable	Optional. Enables closing of all the elements of the group panel
collapsed	Optional. Defines that Grid is initialized in the collapsed state
columns	Required. Specifies the configuration of grid columns
css	Optional. Adds style classes to Grid
data	Optional. Specifies an array of data objects to set into the grid
dragCopy	Optional. Defines that a row is copied to a target during drag-n-drop
dragExpand	Optional. Defines whether the collapsed rows should expand when you hover them over during drag-n-drop
dragItem	Optional. Enables the possibility to reorder grid columns or (and) rows by drag and drop
dragMode	Optional. Enables drag-n-drop in Grid
dragPanel	Optional. Enables/disables the DragPanel module during the Grid initialization
editable	Optional. Enables editing in Grid columns
eventHandlers	Optional. Adds event handlers to the HTML elements of a custom template in a cell, or to the HTML elements defined in the data set, or to the header/footer cell
exportStyles	Optional. Defines the styles that will be sent to the export service when exporting Grid to PDF/PNG
footerAutoHeight	Optional. Allows adjusting the height of the footer for the content to fit in
footerRowHeight	Optional. Sets the height of rows in the footer
footerTooltip	Optional. Controls the footer tooltips
group	Optional. Enables grouping row data by column values and allows configuring grouping settings
groupable	Optional. Enables grouping data by values in all columns via the user interface
headerAutoHeight	Optional. Allows adjusting the height of the header for the content to fit in
headerRowHeight	Optional. Sets the height of rows in the header
headerTooltip	Optional. Controls the header tooltips
height	Optional. Sets the height of a grid or adjusts it automatically to the content
history	Optional. Enables/disables the History module during the Grid initialization
htmlEnable	Optional. Allows using and displaying HTML content in Grid columns
keyNavigation	Optional. Enables keyboard navigation in Grid
leftSplit	Optional. Sets the number of frozen columns from the left
multiselection	Optional. Enables multi-row/multi-cell selection in Grid
multiSort	Optional. Enables the possibility of sorting Grid data by multiple columns
rangeSelection	Optional. Enables/disables the RangeSelection module during the Grid initialization
resizable	Optional. Defines whether columns can be resized
rightSplit	Optional. Sets the number of frozen columns from the right
rootParent	Optional. Defines the id of the root parent
rowCss	Optional. Sets style for a row
rowHeight	Optional. Defines the height of a row in a grid
selection	Optional. Enables selection in a grid
sortable	Optional. Defines whether sorting on clicking headers of columns is enabled
spans	Optional. Describes the configuration of cols/rows spans
subRow	Optional. Defines the sub-row content for each row of the main Grid
subRowConfig	Optional. Specifies the configuration settings of a sub-row
summary	Optional. Creates the list of calculated values based on the column's data
tooltip	Optional. Enables/disables all the tooltips of a column
topSplit	Optional. Sets the number of frozen rows from the top
type	Optional. Sets the TreeGrid mode of a grid
width	Optional. Sets the width of a grid

Column properties

You will find the list of all the available configuration properties of a Grid column here.

Selection API

Selection methods

Name	Description
disable()	disables selection of cells in Grid
enable()	enables selection of cells in Grid
getCell()	returns the object of a selected cell
getCells()	returns an array with config objects of selected cells
isSelectedCell()	checks whether the cell with the specified row and column parameters is selected
removeCell()	unselects previously selected cells
setCell()	sets selection to specified cells

Selection events

Name	Description
afterSelect	fires after selecting a cell
afterUnSelect	fires after unselecting a cell
beforeSelect	fires before selecting a cell
beforeUnSelect	fires before unselecting a cell

RangeSelection API

RangeSelection methods

Name	Description
disable()	disables the RangeSelection module and resets the current range in Grid
enable()	enables the RangeSelection module and activates the capabilities of range selection in Grid
getRange()	returns the current selection range
getRangedCells()	returns an array of cells within the current range
isDisabled()	returns the module's current state
isRanged()	checks whether a cell is within the current range
resetRange()	resets the current selection range
setRange()	sets the selection range

RangeSelection events

Name	Description
afterResetRange	fires after a range has been successfully reset
afterSetRange	fires after a range has been successfully set
beforeResetRange	fires before resetting the range
beforeSetRange	fires before setting a new range

BlockSelection API

BlockSelection methods

Name	Description
disable()	disables the BlockSelection module and resets processing of block selection in Grid
enable()	enables the BlockSelection module and activates the capabilities of block selection in Grid
isDisabled()	returns the module's current state

BlockSelection events

Name	Description
afterBlockHandleApply	triggered after applying the handle action
afterBlockSelectionApply	triggered after applying the selection
afterBlockSelectionMove	triggered after moving the selection boundary
beforeBlockHandleApply	triggered before applying the handle action
beforeBlockSelectionApply	triggered before applying the selection (e.g., to a range)
beforeBlockSelectionMove	triggered before moving the selection boundary
blockHandleMouseDown	triggered when clicking on the selection handle
blockSelectionEnd	triggered when the selection has been completed
blockSelectionStart	triggered when selection has been started
blockSelectionValidate	triggered to check the possibility of starting a selection

Export API

Export methods

Name	Description
csv()	Exports data from a grid into a CSV file
pdf()	Exports data from a grid to a PDF file
png()	Exports data from a grid to a PNG file
xlsx()	Exports data from a grid to an Excel file

Clipboard API

Clipboard events

Name	Description
afterCopy	fires after successfully copying or cutting data
afterPaste	fires after successfully pasting data
beforeCopy	fires before copying or cutting data
beforePaste	fires before pasting data from the clipboard
copyError	fires when an error occurs during copying or cutting (e.g., clipboard access is blocked)
pasteError	fires when an error occurs during pasting (e.g., clipboard is empty or data is invalid)

DragPanel API

DragPanel events

Name	Description
dragPanelItemClick	triggered when the drag panel item is clicked
dragPanelItemMouseDown	triggered when the mouse button is pressed on the drag panel item

History API

History methods

Name	Description
add()	adds a new action into the history of actions within the Grid
canRedo()	checks whether an action within the Grid history can be redone
canUndo()	checks whether an action within the Grid history can be undone
disable()	disables the module, preventing the addition of new actions to the Grid history and the execution of any operations
enable()	enables the module, allowing the addition of new actions to the Grid history
getHistory()	returns a copy of the array of all actions in the Grid history to prevent accidental modification of the internal structure
isDisabled()	returns the module's current state
redo()	reapplies the last undone action in the Grid history
remove()	removes the last action from the Grid history
removeAll()	clears the entire Grid history and the redo stack
undo()	undoes the last action in the Grid history

History events

Name	Description
afterAdd	triggered after successfully adding an action to the history
afterRedo	triggered after successfully redoing an action
afterUndo	triggered after successfully undoing an action
beforeAdd	triggered before adding an action to the history
beforeRedo	triggered before redoing an action
beforeUndo	triggered before undoing an action
error	triggered when an error occurs