Resets the side bar to the provided configuration. The parameter is the same as the sideBar grid property. The side bar is re-created from scratch with the new config. See Side Bar.
function setSideBar(
def: SideBarDef | string | string[] | boolean
): void;
interface SideBarDef {
// A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom.
toolPanels?: (ToolPanelDef | string)[];
// The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed.
defaultToolPanel?: string;
// To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown.
hiddenByDefault?: boolean;
// Sets the side bar position relative to the grid.
position?: 'left' | 'right';
}
getSideBar
Function
Returns the current side bar configuration. If a shortcut was used, returns the detailed long form.
function getSideBar(): SideBarDef | undefined;
interface SideBarDef {
// A list of all the panels to place in the side bar. The panels will be displayed in the provided order from top to bottom.
toolPanels?: (ToolPanelDef | string)[];
// The panel (identified by ID) to open by default. If none specified, the side bar is initially displayed closed.
defaultToolPanel?: string;
// To hide the side bar by default, set this to `true`. If left undefined the side bar will be shown.
hiddenByDefault?: boolean;
// Sets the side bar position relative to the grid.
position?: 'left' | 'right';
}
setSideBarVisible
Function
Show/hide the entire side bar, including any visible panel and the tab buttons.
function setSideBarVisible(show: boolean): void;
isSideBarVisible
Function
Returns true if the side bar is visible.
function isSideBarVisible(): boolean;
setSideBarPosition
Function
Sets the side bar position relative to the grid. Possible values are 'left' or 'right'.
Default: 'right'
function setSideBarPosition(
position: 'left' | 'right'
): void;
openToolPanel
Function
Opens a particular tool panel. Provide the ID of the tool panel to open. See Tool Panel.
function openToolPanel(key: string): void;
closeToolPanel
Function
Closes the currently open tool panel (if any).
function closeToolPanel(): void;
getOpenedToolPanel
Function
Returns the ID of the currently shown tool panel if any, otherwise null.
function getOpenedToolPanel(): string | null;
isToolPanelShowing
Function
Returns true if the tool panel is showing, otherwise false.
function isToolPanelShowing(): boolean;
refreshToolPanel
Function
Force refresh all tool panels by calling their refresh method.
Call to set new auto group column definition. The grid will recreate any auto-group columns if present.
function setAutoGroupColumnDef(
colDef: ColDef<TData>,
source: ColumnEventType = "api"
): void;
setDefaultColDef
Function
Call to set new Default Column Definition.
function setDefaultColDef(
colDef: ColDef<TData>,
source: ColumnEventType = "api"
): void;
sizeColumnsToFit
Function
Sets columns to adjust in size to fit the grid horizontally. See Size Columns to Fit.
function sizeColumnsToFit(
params?: ISizeColumnsToFitParams
): void;
interface ISizeColumnsToFitParams {
// Defines a default minimum width for every column (does not override the column minimum width)
defaultMinWidth?: number;
// Defines a default maximum width for every column (does not override the column maximum width)
defaultMaxWidth?: number;
// Provides a minimum and/or maximum width to specific columns
columnLimits?: IColumnLimit[];
}
interface IColumnLimit {
// Selector for the column to which these dimension limits will apply
key: Column | string;
// Defines a minimum width for this column (does not override the column minimum width)
minWidth?: number;
// Defines a maximum width for this column (does not override the column maximum width)
maxWidth?: number;
}
Start editing the provided cell. If another cell is editing, the editing will be stopped in that other cell. See Editing API.
function startEditingCell(
params: StartEditingCellParams
): void;
interface StartEditingCellParams {
// The row index of the row to start editing
rowIndex: number;
// The column key of the row to start editing
colKey: string | Column;
// Set to `'top'` or `'bottom'` to start editing a pinned row
rowPinned?: RowPinnedType;
// The key to pass to the cell editor
key?: string;
// The charPress to pass to the cell editor
charPress?: string;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
stopEditing
Function
If a cell is editing, it stops the editing. Pass true if you want to cancel the editing (i.e. don't accept changes). See Editing API.
function stopEditing(
cancel: boolean = false
): void;
getEditingCells
Function
If the grid is editing, returns back details of the editing cell(s). See Editing API.
function getEditingCells(): CellPosition[];
interface CellPosition {
// The grid column
column: Column;
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
getCellEditorInstances
Function
Returns the list of active cell editor instances. Optionally provide parameters to restrict to certain columns / row nodes. See Cell Editor Instances.
function getCellEditorInstances(
params: GetCellEditorInstancesParams<TData> = {}
): ICellEditor[];
interface GetCellEditorInstancesParams<TData = any> {
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
Events
addEventListener
Function
Add an event listener for the specified eventType. Works similar to addEventListener for a browser DOM element.
function addEventListener(
eventType: string,
listener: Function
): void;
addGlobalListener
Function
Add an event listener for all event types coming from the grid.
function addGlobalListener(listener: Function): void;
removeEventListener
Function
Remove an event listener.
function removeEventListener(
eventType: string,
listener: Function
): void;
removeGlobalListener
Function
Remove a global event listener.
function removeGlobalListener(listener: Function): void;
addRenderedRowListener
Function
Registers a callback to a virtual row. A virtual row is a row that is visually rendered on the screen (rows that are not visible because of the scroll position are not rendered). Unlike normal events, you do not need to unregister rendered row listeners. When the rendered row is removed from the grid, all associated rendered row listeners will also be removed. listen for this event if your cellRenderer needs to do cleanup when the row no longer exists.
function addRenderedRowListener(
eventName: string,
rowIndex: number,
callback: Function
): void;
This is method to be used to get the grid's data as a sheet, that will later be exported either by getMultipleSheetsAsExcel() or exportMultipleSheetsAsExcel().
function getSheetDataForExcel(
params?: ExcelExportParams
): string | undefined;
exportMultipleSheetsAsExcel
Function
Downloads an Excel export of multiple sheets in one file.
function exportMultipleSheetsAsExcel(
params: ExcelExportMultipleSheetParams
): void;
interface ExcelExportMultipleSheetParams {
// The author of the exported file.
// Default: `AG Grid`
author?: string;
// Array of strings containing the raw data for Excel workbook sheets.
// This property is only used when exporting to multiple sheets using `api.exportMultipleSheetsAsExcel()` and the data for each sheet is obtained by calling `api.getSheetDataForExcel()`.
data: string[];
// String to use as the file name.
// Default: `export.xlsx`
fileName?: string;
// The default value for the font size of the Excel document.
// Default: `11`
fontSize?: number;
// The mimeType of the Excel file.
// Default: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
mimeType?: string;
}
getMultipleSheetsAsExcel
Function
Similar to exportMultipleSheetsAsExcel, except instead of downloading a file, it will return a Blob to be processed by the user.
function getMultipleSheetsAsExcel(
params: ExcelExportMultipleSheetParams
): Blob | undefined;
interface ExcelExportMultipleSheetParams {
// The author of the exported file.
// Default: `AG Grid`
author?: string;
// Array of strings containing the raw data for Excel workbook sheets.
// This property is only used when exporting to multiple sheets using `api.exportMultipleSheetsAsExcel()` and the data for each sheet is obtained by calling `api.getSheetDataForExcel()`.
data: string[];
// String to use as the file name.
// Default: `export.xlsx`
fileName?: string;
// The default value for the font size of the Excel document.
// Default: `11`
fontSize?: number;
// The mimeType of the Excel file.
// Default: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`
mimeType?: string;
}
Updates the excludeHiddenColumnsFromQuickFilter grid option. Set to true to exclude hidden columns from being checked by the Quick Filter (or false to include them). This can give a significant performance improvement when there are a large number of hidden columns, and you are only interested in filtering on what's visible.
See Exclude Hidden Columns.
function setExcludeHiddenColumnsFromQuickFilter(value: boolean): void;
isColumnFilterPresent
Function
Returns true if any column filter is set, otherwise false.
function isColumnFilterPresent(): boolean;
isAnyFilterPresent
Function
Returns true if any filter is set. This includes quick filter, advanced filter or external filter.
function isAnyFilterPresent(): boolean;
getFilterInstance
Function
Returns the filter component instance for a column. key can be a string field name or a ColDef object (matches on object reference, useful if field names are not unique). If your filter is created asynchronously, getFilterInstance will return null so you will need to use the callback to access the filter instance instead.
See Accessing Individual Filter Component Instances.
Used to programmatically create charts from a range. See Range Chart API.
function createRangeChart(
params: CreateRangeChartParams
): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
createPivotChart
Function
Used to programmatically create pivot charts from a grid. See Pivot Chart API.
function createPivotChart(
params: CreatePivotChartParams
): ChartRef | undefined;
interface CreatePivotChartParams {
// The type of chart to create.
chartType: ChartType;
// The default theme to use, either a default option or your own custom theme.
chartThemeName?: string;
// Provide to display the chart outside of the grid in your own container.
chartContainer?: HTMLElement;
// Allows specific chart options in the current theme to be overridden.
chartThemeOverrides?: AgChartThemeOverrides;
// When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart.
unlinkChart?: boolean;
}
type ChartType =
'column'
| 'groupedColumn'
| 'stackedColumn'
| 'normalizedColumn'
| 'bar'
| 'groupedBar'
| 'stackedBar'
| 'normalizedBar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
| 'stackedArea'
| 'normalizedArea'
| 'histogram'
| 'columnLineCombo'
| 'areaColumnCombo'
| 'customCombo'
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
createCrossFilterChart
Function
Used to programmatically create cross filter charts from a range. See Cross-filter API.
function createCrossFilterChart(
params: CreateCrossFilterChartParams
): ChartRef | undefined;
interface CreateCrossFilterChartParams {
// The type of cross-filter chart to create.
chartType: CrossFilterChartType;
// The range of cells to be charted. If no rows / rowIndexes are specified all rows will be included.
cellRange: ChartParamsCellRange;
// Suppress highlighting the selected range in the grid.
suppressChartRanges?: boolean;
// The aggregation function that should be applied to all series data.
aggFunc?: string | IAggFunc;
// The default theme to use, either a default option or your own custom theme.
chartThemeName?: string;
// Provide to display the chart outside of the grid in your own container.
chartContainer?: HTMLElement;
// Allows specific chart options in the current theme to be overridden.
chartThemeOverrides?: AgChartThemeOverrides;
// When enabled the chart will be unlinked from the grid after creation, any updates to the data will not be reflected in the chart.
unlinkChart?: boolean;
}
type CrossFilterChartType =
'column'
| 'bar'
| 'line'
| 'scatter'
| 'bubble'
| 'pie'
| 'doughnut'
| 'area'
type ChartParamsCellRange =
Partial<Omit<CellRangeParams, 'rowStartPinned'
| 'rowEndPinned'>>
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
getChartRef
Function
Returns the ChartRef using the supplied chartId.
function getChartRef(chartId: string): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
getChartModels
Function
Returns a list of models with information about the charts that are currently rendered from the grid. See Saving / Restoring Charts.
function getChartModels(): ChartModel[] | undefined;
restoreChart
Function
Restores a chart using the ChartModel that was previously obtained from getChartModels(). See Saving / Restoring Charts.
function restoreChart(
chartModel: ChartModel,
chartContainer?: HTMLElement
): ChartRef | undefined;
interface ChartRef {
// The id of the created chart.
chartId: string;
// The chart instance that is produced by AG Charts which can be used to interact with the chart directly.
chart: any;
// The chart DOM element, which the application is responsible for placing into the DOM.
chartElement: HTMLElement;
// The application is responsible for calling this when the chart is no longer needed.
destroyChart: () => void;
}
getChartImageDataURL
Function
Returns a base64-encoded image data URL for the referenced chartId. See Downloading Chart Image.
function getChartImageDataURL(
params: GetChartImageDataUrlParams
): string | undefined;
interface GetChartImageDataUrlParams {
// The id of the created chart.
chartId: string;
// A string indicating the image format.
// The default format type is `image/png`.
// Options: `image/png`, `image/jpeg`
fileFormat?: string;
}
downloadChart
Function
Starts a browser-based image download for the referenced chartId. See Downloading Chart Image.
function downloadChart(
params: ChartDownloadParams
): void;
interface ChartDownloadParams {
// The id of the created chart.
chartId: string;
// Name of downloaded image file. The chart title will be used by default
fileName?: string;
// A string indicating the image format.
// The default format type is `image/png`.
// Options: `image/png`, `image/jpeg`
fileFormat?: string;
// Dimensions of downloaded chart image in pixels. The current chart dimensions will be used if not specified.
dimensions?: { width: number; height: number; };
}
function openChartToolPanel(
params: OpenChartToolPanelParams
): void;
interface OpenChartToolPanelParams {
// The id of the created chart.
chartId: string;
// Name of the Chart Tool Panel. The default 'Settings' Tool Panel will be used if not specified.
panel?: ChartToolPanelName;
}
type ChartToolPanelName =
'settings'
| 'data'
| 'format'
function closeChartToolPanel(
params: CloseChartToolPanelParams
): void;
interface CloseChartToolPanelParams {
// The id of the created chart.
chartId: string;
}
Returns the focused cell (or the last focused cell if the grid lost focus).
function getFocusedCell(): CellPosition | null;
interface CellPosition {
// The grid column
column: Column;
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
setFocusedCell
Function
Sets the focus to the specified cell. rowPinned can be either 'top', 'bottom' or null (for not pinned).
Returns the DetailGridInfo corresponding to the supplied detailGridId.
function getDetailGridInfo(id: string): DetailGridInfo | undefined;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_<ROW_ID>`,
// where ROW_ID is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
forEachDetailGridInfo
Function
Iterates through each DetailGridInfo in the grid and calls the supplied callback on each. See Accessing Detail Grids.
function forEachDetailGridInfo(
callback: (gridInfo: DetailGridInfo, index: number) => void
): void;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_<ROW_ID>`,
// where ROW_ID is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
addDetailGridInfo
Function
Register a detail grid with the master grid when it is created. See Register Detail Grid.
function addDetailGridInfo(
id: string,
gridInfo: DetailGridInfo
): void;
interface DetailGridInfo {
// Id of the detail grid, the format is `detail_<ROW_ID>`,
// where ROW_ID is the `id` of the parent row.
id: string;
// Grid api of the detail grid.
api?: GridApi;
// Column api of the detail grid.
columnApi?: ColumnApi;
}
removeDetailGridInfo
Function
Unregister a detail grid from the master grid when it is destroyed. See Register Detail Grid.
function removeDetailGridInfo(id: string): void;
Miscellaneous
getValue
Function
Gets the value for a column for a particular rowNode (row). This is useful if you want the raw value of a cell e.g. if implementing your own CSV export.
function getValue(
colKey: string | Column,
rowNode: IRowNode
): any;
setDomLayout
Function
Switch between layout options: normal, autoHeight, print. Defaults to normal if no domLayout provided.
See DOM Layout.
function setDomLayout(
domLayout?: DomLayoutType
): void;
type DomLayoutType =
'normal'
| 'autoHeight'
| 'print'
destroy
Function
Will destroy the grid and release resources. If you are using a framework you do not need to call this, as the grid links in with the framework lifecycle. However if you are using Web Components or native JavaScript, you do need to call this, to avoid a memory leak in your application.
function destroy(): void;
setGridAriaProperty
Function
Sets an ARIA property in the grid panel (element with role="grid"), and removes an ARIA property when the value is null.
Example: api.setGridAriaProperty('label', 'my grid') will set aria-label="my grid". api.setGridAriaProperty('label', null) will remove the aria-label attribute from the grid element.
function setGridAriaProperty(
property: string,
value: string | null
): void;
isAnimationFrameQueueEmpty
Function
Returns true when there are no more animation frames left to process.
Returns true when the last page is known; this will always be the case if you are using the Client-Side Row Model for pagination. Returns false when the last page is not known; this only happens when using Infinite Row Model.
function paginationIsLastPageFound(): boolean;
paginationGetPageSize
Function
Returns how many rows are being shown per page.
function paginationGetPageSize(): number;
paginationSetPageSize
Function
Sets the paginationPageSize, then re-paginates the grid so the changes are applied immediately.
function paginationSetPageSize(size?: number): void;
paginationGetCurrentPage
Function
Returns the 0-based index of the page which is showing.
function paginationGetCurrentPage(): number;
paginationGetTotalPages
Function
Returns the total number of pages. Returns null if paginationIsLastPageFound() === false.
function paginationGetTotalPages(): number;
paginationGetRowCount
Function
The total number of rows. Returns null if paginationIsLastPageFound() === false.
function paginationGetRowCount(): number;
paginationGoToPage
Function
Goes to the specified page. If the page requested doesn't exist, it will go to the last page.
Add an aggregation function with the specified key.
function addAggFunc(
key: string,
aggFunc: IAggFunc
): void;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
addAggFuncs
Function
Add aggregations function with the specified keys.
function addAggFuncs(
aggFuncs: { [key: string]: IAggFunc; }
): void;
interface IAggFunc<TData = any, TValue = any> {
(params: IAggFuncParams<TData, TValue>) : any
}
interface IAggFuncParams<TData = any, TValue = any> {
// Values to aggregate
values: TValue[];
// Column the aggregation function is working on
column: Column;
// ColDef of the aggregation column
colDef: ColDef<TData>;
// The parent RowNode, where the aggregation result will be shown
rowNode: IRowNode<TData>;
// data (if any) of the parent RowNode
data: TData;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: any;
}
clearAggFuncs
Function
Clears all aggregation functions (including those provided by the grid).
Redraws the header. Useful if a column name changes, or something else that changes how the column header is displayed.
function refreshHeader(): void;
flashCells
Function
Flash rows, columns or individual cells. See Flashing Cells.
function flashCells(
params: FlashCellsParams<TData> = {}
): void;
interface FlashCellsParams<TData = any> {
flashDelay?: number;
fadeDelay?: number;
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
Rendering
getRenderedNodes
Function
Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer.
function getCellRendererInstances(
params: GetCellRendererInstancesParams<TData> = {}
): ICellRenderer[];
interface GetCellRendererInstancesParams<TData = any> {
// Optional list of row nodes to restrict operation to
rowNodes?: IRowNode<TData>[];
// Optional list of columns to restrict operation to
columns?: (string | Column)[];
}
interface ICellRenderer<TData = any> {
// Get the cell to refresh. Return true if successful. Return false if not (or you don't have refresh logic),
// then the grid will refresh the cell for you.
refresh(params: ICellRendererParams<TData>): boolean;
}
getSizesForCurrentTheme
Function
Gets the sizes that various UI elements will be rendered at with the current theme. If you override the row or header height using gridOptions, the override value you provided will be returned.
function getSizesForCurrentTheme(): void;
resetRowHeights
Function
Tells the grid to recalculate the row heights.
function resetRowHeights(): void;
onRowHeightChanged
Function
Tells the grid a row height has changed. To be used after calling rowNode.setRowHeight(newHeight).
function onRowHeightChanged(): void;
Row Displayed
getDisplayedRowAtIndex
Function
Returns the displayed RowNode at the given index.
function getDisplayedRowAtIndex(index: number): IRowNode<TData> | undefined;
getDisplayedRowCount
Function
Returns the total number of displayed rows.
function getDisplayedRowCount(): number;
getFirstDisplayedRow
Function
Get the index of the first displayed row due to scrolling (includes invisible rendered rows in the buffer).
function getFirstDisplayedRow(): number;
getLastDisplayedRow
Function
Get the index of the last displayed row due to scrolling (includes invisible rendered rows in the buffer).
function addRowDropZone(
params: RowDropZoneParams
): void;
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
function removeRowDropZone(
params: RowDropZoneParams
): void;
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
getRowDropZoneParams
Function
Returns the RowDropZoneParams to be used by another grid's addRowDropZone method. See Row Dragging Between Grids.
function getRowDropZoneParams(
events?: RowDropZoneEvents
): RowDropZoneParams;
interface RowDropZoneEvents {
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
interface RowDropZoneParams {
// A callback method that returns the DropZone HTMLElement.
getContainer: () => HTMLElement;
// Callback function that will be executed when the rowDrag enters the target.
onDragEnter?: (params: RowDragEnterEvent) => void;
// Callback function that will be executed when the rowDrag leaves the target
onDragLeave?: (params: RowDragLeaveEvent) => void;
// Callback function that will be executed when the rowDrag is dragged inside the target.
// Note: this gets called multiple times.
onDragging?: (params: RowDragMoveEvent) => void;
// Callback function that will be executed when the rowDrag drops rows within the target.
onDragStop?: (params: RowDragEndEvent) => void;
}
Expand or collapse a specific row node, optionally expanding/collapsing all of its parent nodes.
function setRowNodeExpanded(
rowNode: IRowNode,
expanded: boolean,
expandParents?: boolean
): void;
onGroupExpandedOrCollapsed
Function
Informs the grid that row group expanded state has changed and it needs to rerender the group nodes. Typically called after updating the row node expanded state explicitly, i.e rowNode.expanded = false, across multiple groups and you want to update the grid view in a single rerender instead of on every group change.
function onGroupExpandedOrCollapsed(): void;
Row Nodes
getRowNode
Function
Returns the row node with the given ID. The row node ID is the one you provide from the callback getRowId(params), otherwise the ID is a number (cast as string) auto-generated by the grid when the row data is set.
function getRowNode(id: string): IRowNode<TData> | undefined;
forEachNode
Function
Iterates through each node (row) in the grid and calls the callback for each node. This works similar to the forEach method on a JavaScript array. This is called for every node, ignoring any filtering or sorting applied within the grid. If using the Infinite Row Model, then this gets called for each page loaded in the page cache.
Similar to forEachNode, except lists all the leaf nodes. This effectively goes through all the data that you provided to the grid before the grid performed any grouping. If using tree data, goes through all the nodes for the data you provided, including nodes that have children, but excluding groups the grid created where gaps were missing in the hierarchy.
function forEachLeafNode(
callback: (rowNode: IRowNode<TData>) => void
): void;
Returns the row model inside the table. From here you can see the original rows, rows after filter has been applied, rows after aggregation has been applied, and the final set of 'to be displayed' rows.
function getModel(): IRowModel;
interface IRowModel {
// Returns the rowNode at the given index.
getRow(index: number): RowNode | undefined;
// Returns the rowNode for given id.
getRowNode(id: string): RowNode | undefined;
// Returns the number of rows
getRowCount(): number;
getTopLevelRowCount(): number;
getTopLevelRowDisplayedIndex(topLevelIndex: number): number;
// Returns the row index at the given pixel
getRowIndexAtPixel(pixel: number): number;
// Returns true if the provided rowNode is in the list of rows to render
isRowPresent(rowNode: RowNode): boolean;
// Returns row top and bottom for a given row
getRowBounds(index: number): RowBounds | null;
// Returns true if this model has no rows, regardless of model filter. EG if rows present, but filtered
// out, this still returns false. If it returns true, then the grid shows the 'no rows' overlay - but we
// don't show that overlay if the rows are just filtered out.
isEmpty(): boolean;
// Returns true if no rows (either no rows at all, or the rows are filtered out). This is what the grid
// uses to know if there are rows to render or not.
isRowsToRender(): boolean;
// Returns all rows in range that should be selected. If there is a gap in range (non ClientSideRowModel) then
// then no rows should be returned
getNodesInRangeForSelection(first: RowNode, last: RowNode | null): RowNode[];
// Iterate through each node. What this does depends on the model type. For clientSide, goes through
// all nodes. For serverSide, goes through what's loaded in memory.
forEachNode(callback: (rowNode: RowNode, index: number) => void, includeFooterNodes?: boolean): void;
// The base class returns the type. We use this instead of 'instanceof' as the client might provide
// their own implementation of the models in the future.
getType(): RowModelType;
// It tells us if this row model knows about the last row that it can produce. This is used by the
// PaginationPanel, if last row is not found, then the 'last' button is disabled and the last page is
// not shown. This is always true for ClientSideRowModel. It toggles for InfiniteRowModel.
isLastRowIndexKnown(): boolean;
// Used by CSRM only - is makes sure there are now estimated row heights within the range.
ensureRowHeightsValid(startPixel: number, endPixel: number, startLimitIndex: number, endLimitIndex: number): boolean;
// Gets called after grid is initialised. What happens depends on row model. Client Side will take rowData
// from gridOptions, the other row models will start calling their datasources.
start(): void;
}
interface RowBounds {
rowTop: number;
rowHeight: number;
rowIndex?: number;
}
type RowModelType =
'infinite'
| 'viewport'
| 'clientSide'
| 'serverSide'
Executes any remaining asynchronous grid transactions, if any are waiting to be executed.
function flushAsyncTransactions(): void;
refreshClientSideRowModel
Function
Refresh the Client-Side Row Model, executing the grouping, filtering and sorting again. Optionally provide the step you wish the refresh to apply from. Defaults to everything.
function setDatasource(
datasource: IDatasource
): void;
interface IDatasource {
// If you know up front how many rows are in the dataset, set it here. Otherwise leave blank.
rowCount?: number;
// Callback the grid calls that you implement to fetch rows from the server.
getRows(params: IGetRowsParams): void;
// Optional destroy method, if your datasource has state it needs to clean up.
destroy?(): void;
}
interface IGetRowsParams {
// The first row index to get.
startRow: number;
// The first row index to NOT get.
endRow: number;
// Callback to call for the result when successful.
successCallback(rowsThisBlock: any[], lastRow?: number): void;
// Callback to call when the request fails.
failCallback(): void;
// If doing server side sorting, contains the sort model
sortModel: SortModelItem[];
// If doing server side filtering, contains the filter model
filterModel: any;
// The context as provided on `gridOptions.context`
context: any;
}
interface SortModelItem {
// Column Id to apply the sort to.
colId: string;
// Sort direction
sort: 'asc' | 'desc';
}
refreshInfiniteCache
Function
Marks all the currently loaded blocks in the cache for reload. If you have 10 blocks in the cache, all 10 will be marked for reload. The old data will continue to be displayed until the new data is loaded.
function refreshInfiniteCache(): void;
purgeInfiniteCache
Function
Purges the cache. The grid is then told to refresh. Only the blocks required to display the current data on screen are fetched (typically no more than 2). The grid will display nothing while the new blocks are loaded. Use this to immediately remove the old data from the user.
function purgeInfiniteCache(): void;
getInfiniteRowCount
Function
The row count defines how many rows the grid allows scrolling to.
function getInfiniteRowCount(): number | undefined;
isLastRowIndexKnown
Function
Returns true if grid allows for scrolling past the last row to load more rows, thus providing infinite scroll.
function isLastRowIndexKnown(): boolean | undefined;
setRowCount
Function
Sets the rowCount and lastRowIndexKnown properties. The second parameter, lastRowIndexKnown, is optional and if left out, only rowCount is set. Set rowCount to adjust the height of the vertical scroll. Set lastRowIndexKnown to enable / disable searching for more rows. Use this method if you add or remove rows into the dataset and need to reset the number of rows or put the data back into 'look for data' mode.
function setRowCount(
rowCount: number,
maxRowFound?: boolean
): void;
getCacheBlockState
Function
Returns an object representing the state of the cache. This is useful for debugging and understanding how the cache is working.
function setServerSideDatasource(
datasource: IServerSideDatasource
): void;
interface IServerSideDatasource {
// Grid calls `getRows` when it requires more rows as specified in the params.
// Params object contains callbacks for responding to the request.
getRows(params: IServerSideGetRowsParams): void;
// Optional method, if your datasource has state it needs to clean up.
destroy?(): void;
}
interface IServerSideGetRowsParams<TData = any, TContext = any> {
// Details for the request. A simple object that can be converted to JSON.
request: IServerSideGetRowsRequest;
// The parent row node. The RootNode (level -1) if request is top level.
// This is NOT part fo the request as it cannot be serialised to JSON (a rowNode has methods).
parentNode: IRowNode;
// Success callback, pass the rows back to the grid that were requested.
success(params: LoadSuccessParams): void;
// Fail callback, tell the grid the call failed so it can adjust it's state.
fail(): void;
// The grid api.
api: GridApi<TData>;
// The column api.
columnApi: ColumnApi;
// Application context as set on `gridOptions.context`.
context: TContext;
}
interface IServerSideGetRowsRequest {
// First row requested or undefined for all rows.
startRow: number | undefined;
// Index after the last row required row or undefined for all rows.
endRow: number | undefined;
// Columns that are currently row grouped.
rowGroupCols: ColumnVO[];
// Columns that have aggregations on them.
valueCols: ColumnVO[];
// Columns that have pivot on them.
pivotCols: ColumnVO[];
// Defines if pivot mode is on or off.
pivotMode: boolean;
// What groups the user is viewing.
groupKeys: string[];
// If filtering, what the filter model is.
filterModel: any;
// If sorting, what the sort model is.
sortModel: SortModelItem[];
}
interface ColumnVO {
id: string;
displayName: string;
field?: string;
aggFunc?: string;
}
interface SortModelItem {
// Column Id to apply the sort to.
colId: string;
// Sort direction
sort: 'asc' | 'desc';
}
interface LoadSuccessParams {
// Data retrieved from the server as requested by the grid.
rowData: any[];
// The last row, if known, to help Infinite Scroll.
rowCount?: number;
// Any extra information for the grid to associate with this load.
groupLevelInfo?: any;
}
setCacheBlockSize
Function
Updates the cacheBlockSize when requesting data from the server if suppressServerSideInfiniteScroll is not enabled. Note this purges all the cached data and reloads all the rows of the grid.
function setCacheBlockSize(blockSize: number): void;
setRowCount
Function
Sets the rowCount and lastRowIndexKnown properties. The second parameter, lastRowIndexKnown, is optional and if left out, only rowCount is set. Set rowCount to adjust the height of the vertical scroll. Set lastRowIndexKnown to enable / disable searching for more rows. Use this method if you add or remove rows into the dataset and need to reset the number of rows or put the data back into 'look for data' mode.
function setRowCount(
rowCount: number,
maxRowFound?: boolean
): void;
refreshServerSide
Function
Refresh a server-side level. If you pass no parameters, then the top level store is refreshed. To refresh a child level, pass in the string of keys to get to the desired level.
See Purging Groups.
function refreshServerSide(
params?: RefreshServerSideParams
): void;
interface RefreshServerSideParams {
// List of group keys, pointing to the level to refresh.
// For example, to purge two levels down under 'Canada'and then '2002', pass in the string array ['Canada','2002'].
// If no route is passed, or an empty array, then the top level is refreshed.
route?: string[];
// If true, then all rows at the level getting refreshed are immediately destroyed and 'loading' rows will appear.
// If false, then all rows at the level getting refreshed are kept until rows are loaded (no 'loading' rows appear).
purge?: boolean;
}
getServerSideGroupLevelState
Function
Returns info on all server side group levels. See Store State.
function getServerSideGroupLevelState(): ServerSideGroupLevelState[];
interface ServerSideGroupLevelState {
// True if suppressing infinite scrolling and loading all the data at the current level
suppressInfiniteScroll: boolean;
// The route that identifies this level.
route: string[];
// How many rows the level has. This includes 'loading rows'.
rowCount: number;
// Infinite Scroll only.
// Whether the last row index is know.
//
lastRowIndexKnown?: boolean;
// Any extra info provided to the level, when data was loaded.
info?: any;
//Infinite Scroll only.
// Max blocks allowed in the infinite cache.
maxBlocksInCache?: number;
// Infinite Scroll only.
// The size (number of rows) of each infinite cache block.
cacheBlockSize?: number;
}
retryServerSideLoads
Function
Gets all failed server side loads to retry. See Retry Loads.
function retryServerSideLoads(): void;
applyServerSideTransaction
Function
Apply transactions to the server side row model. See Transactions.
function applyServerSideTransaction(
transaction: ServerSideTransaction
): ServerSideTransactionResult | undefined;
interface ServerSideTransaction {
// The Row Store to apply the transaction to, ie what group level.
// eg ['Ireland','2002'] to update the child store found after expanding Ireland and 2002 groups.
// Passing in blank to empty applies the transaction to the top level.
route?: string[];
// Index position to add at. If missing, rows will be added to the end.
addIndex?: number;
// Rows to add
add?: any[];
// Rows to remove
remove?: any[];
// Rows to update
update?: any[];
}
interface ServerSideTransactionResult {
// The status of applying the transaction.
status: ServerSideTransactionResultStatus;
// If rows were added, the newly created Row Nodes for those rows.
add?: IRowNode[];
// If rows were removed, the deleted Row Nodes.
remove?: IRowNode[];
// If rows were updated, the updated Row Nodes.
update?: IRowNode[];
}
enum ServerSideTransactionResultStatus {
// Transaction was successfully applied
Applied = 'Applied'
// Store was not found, transaction not applied.
// Either invalid route, or the parent row has not yet been expanded.
StoreNotFound = 'StoreNotFound'
// Store is loading, transaction not applied.
StoreLoading = 'StoreLoading'
// Store is loading (as max loads exceeded), transaction not applied.
StoreWaitingToLoad = 'StoreWaitingToLoad'
// Store load attempt failed, transaction not applied.
StoreLoadingFailed = 'StoreLoadingFailed'
// Store is type Partial, which doesn't accept transactions
StoreWrongType = 'StoreWrongType'
// Transaction was cancelled, due to grid.
// Callback isApplyServerSideTransaction() returning false
Cancelled = 'Cancelled'
}
applyServerSideTransactionAsync
Function
Batch apply transactions to the server side row model. See Transactions.
function applyServerSideTransactionAsync(
transaction: ServerSideTransaction,
callback?: (res: ServerSideTransactionResult) => void
): void;
interface ServerSideTransaction {
// The Row Store to apply the transaction to, ie what group level.
// eg ['Ireland','2002'] to update the child store found after expanding Ireland and 2002 groups.
// Passing in blank to empty applies the transaction to the top level.
route?: string[];
// Index position to add at. If missing, rows will be added to the end.
addIndex?: number;
// Rows to add
add?: any[];
// Rows to remove
remove?: any[];
// Rows to update
update?: any[];
}
interface ServerSideTransactionResult {
// The status of applying the transaction.
status: ServerSideTransactionResultStatus;
// If rows were added, the newly created Row Nodes for those rows.
add?: IRowNode[];
// If rows were removed, the deleted Row Nodes.
remove?: IRowNode[];
// If rows were updated, the updated Row Nodes.
update?: IRowNode[];
}
enum ServerSideTransactionResultStatus {
// Transaction was successfully applied
Applied = 'Applied'
// Store was not found, transaction not applied.
// Either invalid route, or the parent row has not yet been expanded.
StoreNotFound = 'StoreNotFound'
// Store is loading, transaction not applied.
StoreLoading = 'StoreLoading'
// Store is loading (as max loads exceeded), transaction not applied.
StoreWaitingToLoad = 'StoreWaitingToLoad'
// Store load attempt failed, transaction not applied.
StoreLoadingFailed = 'StoreLoadingFailed'
// Store is type Partial, which doesn't accept transactions
StoreWrongType = 'StoreWrongType'
// Transaction was cancelled, due to grid.
// Callback isApplyServerSideTransaction() returning false
Cancelled = 'Cancelled'
}
getServerSideSelectionState
Function
Returns an object containing rules matching the selected rows in the SSRM. If groupSelectsChildren=false the returned object will be flat, and will conform to IServerSideSelectionState. If groupSelectsChildren=true the retuned object will be hierarchical, and will conform to IServerSideGroupSelectionState.
See Selection.
Set the rules matching the selected rows in the SSRM. If groupSelectsChildren=false the param will be flat, and should conform to IServerSideSelectionState. If groupSelectsChildren=true the param will be hierarchical, and should conform to IServerSideGroupSelectionState.
See Selection.
function setViewportDatasource(
viewportDatasource: IViewportDatasource
): void;
interface IViewportDatasource {
// Gets called exactly once before viewPort is used. Passes methods to be used to tell viewPort of data loads / changes.
init(params: IViewportDatasourceParams): void;
// Tell the viewport what the scroll position of the grid is, so it knows what rows it has to get.
setViewportRange(firstRow: number, lastRow: number): void;
// Gets called once when viewPort is no longer used. If you need to do any cleanup, do it here.
destroy?(): void;
}
interface IViewportDatasourceParams {
// Datasource calls this method when the total row count changes. This in turn sets the height of the grids vertical scroll.
setRowCount: (count: number, keepRenderedRows?: boolean) => void;
// Datasource calls this when new data arrives. The grid then updates the provided rows. The rows are mapped [rowIndex]=>rowData].
setRowData: (rowData: { [key: number]: any; }) => void;
// Datasource calls this when it wants a row node - typically used when it wants to update the row node.
getRow: (rowIndex: number) => IRowNode;
}
If true, the horizontal scrollbar will always be present, even if not required. Otherwise, it will only be displayed when necessary.
function setAlwaysShowHorizontalScroll(show: boolean): void;
setAlwaysShowVerticalScroll
Function
If true, the vertical scrollbar will always be present, even if not required. Otherwise it will only be displayed when necessary.
function setAlwaysShowVerticalScroll(show: boolean): void;
ensureIndexVisible
Function
Vertically scrolls the grid until the provided row index is inside the visible viewport. If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport. This will have no effect before the firstDataRendered event has fired.
See firstDataRendered event.
Vertically scrolls the grid until the provided row (or a row matching the provided comparator) is inside the visible viewport. If a position is provided, the grid will attempt to scroll until the row is at the given position within the viewport. This will have no effect before the firstDataRendered event has fired.
See firstDataRendered event.
Ensures the column is visible by scrolling the table if needed. This will have no effect before the firstDataRendered event has fired.
key - The column to ensure visible
position - Where the column will be positioned.
auto - Scrolls the minimum amount to make sure the column is visible.
start - Scrolls the column to the start of the viewport.
middle - Scrolls the column to the middle of the viewport.
end - Scrolls the column to the end of the viewport.
Select all rows, regardless of filtering and rows that are not visible due to grouping being enabled and their groups not expanded.
source Source property that will appear in the selectionChanged event. Default: 'apiSelectAll'
Returns an unsorted list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed.
Returns an unsorted list of selected rows (i.e. row data that you provided).
function getSelectedRows(): TData[];
getBestCostNodeSelection
Function
Returns a list of all selected nodes at 'best cost', a feature to be used with groups / trees. If a group has all its children selected, then the group appears in the result, but not the children. Designed for use with 'children' as the group selection type, where groups don't actually appear in the selection normally.
function getBestCostNodeSelection(): IRowNode<TData>[] | undefined;
getCellRanges
Function
Returns the list of selected cell ranges.
function getCellRanges(): CellRange[] | null;
interface CellRange {
id?: string;
type?: CellRangeType;
// The start row of the range
startRow?: RowPosition;
// The end row of the range
endRow?: RowPosition;
// The columns in the range
columns: Column[];
// The start column for the range
startColumn: Column;
}
enum CellRangeType {
VALUE
DIMENSION
}
interface RowPosition {
// A positive number from 0 to n, where n is the last row the grid is rendering
// or -1 if you want to navigate to the grid header
rowIndex: number;
// Either 'top', 'bottom' or null/undefined (for not pinned)
rowPinned: RowPinnedType;
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
addCellRange
Function
Adds the provided cell range to the selected ranges.
function addCellRange(
params: CellRangeParams
): void;
interface CellRangeParams {
// Start row index
rowStartIndex: number | null;
// Pinned state of start row. Either 'top', 'bottom' or null
rowStartPinned?: RowPinnedType;
// End row index
rowEndIndex: number | null;
// Pinned state of end row. Either 'top', 'bottom' or null
rowEndPinned?: RowPinnedType;
// Starting column for range
columnStart?: string | Column;
// End column for range
columnEnd?: string | Column;
// Specify Columns to include instead of using `columnStart` and `columnEnd`
columns?: (string | Column)[];
}
type RowPinnedType =
'top'
| 'bottom'
| null
| undefined
clearRangeSelection
Function
Clears the selected ranges.
function clearRangeSelection(): void;
setSuppressRowClickSelection
Function
Sets the suppressRowClickSelection property.
function setSuppressRowClickSelection(value: boolean): void;
Gets the grid to act as if the sort was changed. Useful if you update some values and want to get the grid to reorder them according to the new values.