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 |