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 |
| 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 |
| 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.
- Apply the methods of Selection to manage the selection of Grid cells.
Grid events
Editing
| Name | Description |
|---|---|
| afterEditEnd | fires after editing of a cell is ended |
| afterEditStart | fires after editing of a cell has started |
| beforeEditEnd | fires before editing of a cell is completed |
| beforeEditStart | fires before editing of a cell has started |
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.
- Apply the events of Selection to handle the selection of Grid cells.
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 |
| bottomSplit | Optional. Sets the number of frozen rows from the bottom |
| closable | Optional. Enables closing of all the elements of the group panel |
| 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 |
| dragItem | Optional. Enables the possibility to reorder grid columns or (and) rows by drag and drop |
| dragMode | Optional. Enables drag-n-drop in Grid |
| 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 |
| 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 |
| htmlEnable | Optional. Specifies the HTML content (inner HTML) of 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 |
| resizable | Optional. Defines whether columns can be resized |
| rightSplit | Optional. Sets the number of frozen columns from the right |
| 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 |
| 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 |
| 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 |
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 |
TreeGrid mode API
TreeGrid mode methods
| Name | Description |
|---|---|
| collapse() | collapses a tree node by id |
| collapseAll() | collapses all expanded tree nodes |
| expand() | expands a tree node by id |
| expandAll() | expands all collapsed tree nodes |
important
- Use the methods of TreeCollection to work with data of Grid in the TreeGrid mode.
TreeGrid mode events
| Name | Description |
|---|---|
| afterCollapse | fires after collapsing Grid in the TreeGrid mode |
| afterExpand | fires after expanding Grid in the TreeGrid mode |
| beforeCollapse | fires before collapsing Grid in the TreeGrid mode |
| beforeExpand | fires before expanding Grid in the TreeGrid mode |
| expand | fires before collapsing Grid in the TreeGrid mode |
important
- Use the events of TreeCollection to work with data of Grid in the TreeGrid mode.
TreeGrid mode properties
| Name | Description |
|---|---|
| collapsed | Optional. Defines that Grid in the TreeGrid mode is initialized in the collapsed state |
| dragExpand | Optional. Defines whether the collapsed rows should expand when you hover them over during drag-n-drop |
| rootParent | Optional. Defines the id of the root parent |