Skip to main content

Grid API overview

Grid methods

NameDescription
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
destructor()removes a Grid instance and releases occupied resources
editCell()enables editing of a Grid cell
editEnd()finishes editing in a cell
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
getSortingState()returns the current state of sorting data in Grid
getSpan()returns an object with spans
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

Grid events

Editing

NameDescription
afterEditEndfires after editing of a cell is ended
afterEditStartfires after editing of a cell has started
beforeEditEndfires before editing of a cell is completed
beforeEditStartfires before editing of a cell has started

Mouse

NameDescription
cellClickfires on click on a grid cell
cellDblClickfires on double-click on a grid cell
cellMouseDownfires before releasing the left mouse button when clicking on a grid cell
cellMouseOverfires on moving the mouse pointer over a grid cell
cellRightClickfires on right click on a grid cell
footerCellClickfires on click on a grid footer cell
footerCellDblClickfires on double-click on a grid footer cell
footerCellMouseDownfires on moving the mouse pointer over a grid footer cell
footerCellMouseOverfires on moving the mouse pointer over a grid footer cell
footerCellRightClickfires on right click on a grid footer cell
headerCellClickfires on click on a grid header cell
headerCellDblClickfires on double-click on a grid footer cell
headerCellMouseDownfires on moving the mouse pointer over a grid header cell
headerCellMouseOverfires on moving the mouse pointer over a grid header cell
headerCellRightClickfires on right click on a grid header cell

Key Navigation and Scroll

NameDescription
afterKeyDownfires after the user is pressing a shortcut key
beforeKeyDownfires before the user is pressing a shortcut key
scrollfires on scrolling a grid

Sort and Filter

NameDescription
afterSortfires after a column is sorted by clicking on its header
beforeFilterfires before the filterChange event is called
beforeSortfires before a column is sorted by clicking on its header
filterChangefires on typing text in an input of a column's header

Column Drag and Drop

NameDescription
afterColumnDragfires after dragging of a column is finished
afterColumnDropfires before the user has finished dragging a column but after the mouse button is released
beforeColumnDragfires before dragging of a column has started
beforeColumnDropfires before the user has finished dragging and released the mouse button over a target column
cancelColumnDropfires on moving a mouse pointer out of borders of a column while dragging the column
canColumnDropfires when a dragged column is placed over a target column
dragColumnInfires when a column is dragged to another potential target
dragColumnOutfires when a column is dragged out of a potential target
dragColumnStartfires when dragging of a column has started

Column Hide and Show

NameDescription
afterColumnHidefires after a column is hidden
afterColumnShowfires after a column is shown
beforeColumnHidefires before a column is hidden
beforeColumnShowfires before a column is shown on a page

Column Resize

NameDescription
afterResizeEndfires after resizing of a column is ended
beforeResizeStartfires before resizing of a column has started
resizefires on resizing a column

Row Drag and Drop

NameDescription
afterRowDragfires after dragging of a row is finished
afterRowDropfires before the user has finished dragging a row but after the mouse button is released
beforeRowDragfires before dragging of a row has started
beforeRowDropfires before the user has finished dragging and released the mouse button over a target row
cancelRowDropfires on moving a mouse pointer out of borders of a row while dragging the row
canRowDropfires when a dragged row is placed over a target row
dragRowInfires when a row is dragged to another potential target
dragRowOutfires when a row is dragged out of a potential target
dragRowStartfires when dragging of a row has started

Row Hide and Show

NameDescription
afterRowHidefires after a row is hidden
afterRowShowfires after a row is shown on a page
beforeRowHidefires before a row is hidden
beforeRowShowfires before a row is shown on a page

Row Resize

NameDescription
afterRowResizefires after the height of a row is changed
beforeRowResizefires before the height of a row is changed
important

Grid properties

NameDescription
adjustOptional. Defines whether the width of columns is automatically adjusted to the width of their content
autoEmptyRowOptional. Adds an empty row after the last filled row in the Grid
autoHeightOptional. 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
autoWidthOptional. Makes grid's columns to fit the size of a grid
bottomSplitOptional. Sets the number of frozen rows from the bottom
columnsRequired. Specifies the configuration of grid columns
cssOptional. Adds style classes to Grid
dataOptional. Specifies an array of data objects to set into the grid
dragCopyOptional. Defines that a row is copied to a target during drag-n-drop
dragItemOptional. Enables the possibility to reorder grid columns or (and) rows by drag and drop
dragModeOptional. Enables drag-n-drop in Grid
editableOptional. Enables editing in Grid columns
eventHandlersOptional. 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
exportStylesOptional. Defines the styles that will be sent to the export service when exporting Grid to PDF/PNG
footerAutoHeightOptional. Allows adjusting the height of the footer for the content to fit in
footerRowHeightOptional. Sets the height of rows in the footer
footerTooltipOptional. Controls the footer tooltips
headerAutoHeightOptional. Allows adjusting the height of the header for the content to fit in
headerRowHeightOptional. Sets the height of rows in the header
headerTooltipOptional. Controls the header tooltips
heightOptional. Sets the height of a grid or adjusts it automatically to the content
htmlEnableOptional. Specifies the HTML content (inner HTML) of Grid columns
keyNavigationOptional. Enables keyboard navigation in Grid
leftSplitOptional. Sets the number of frozen columns from the left
multiselectionOptional. Enables multi-row/multi-cell selection in Grid
resizableOptional. Defines whether columns can be resized
rightSplitOptional. Sets the number of frozen columns from the right
rowCssOptional. Sets style for a row
rowHeightOptional. Defines the height of a row in a grid
selectionOptional. Enables selection in a grid
sortableOptional. Defines whether sorting on clicking headers of columns is enabled
spansOptional. Describes the configuration of cols/rows spans
tooltipOptional. Enables/disables all the tooltips of a column
topSplitOptional. Sets the number of frozen rows from the top
widthOptional. 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

NameDescription
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
removeCell()unselects previously selected cells
setCell()sets selection to specified cells

Selection events

NameDescription
afterSelectfires after selecting a cell
afterUnSelectfires after unselecting a cell
beforeSelectfires before selecting a cell
beforeUnSelectfires before unselecting a cell

Export methods

NameDescription
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